Hero175: Split Portrait Hero

A split hero: headline, intro, a pill and a quiet link on one side, a portrait photograph drifting inside its frame on the other, with an avatar trust card inset over its corner from md up.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero175?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero175?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero175.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports hero175Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero175, hero175Demo } from "@/components/beste/block/hero175";

export default function Page() {
  return <Hero175 {...hero175Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero175 } from "@/components/beste/block/hero175";

export default function Page() {
  return (
    <Hero175
      eyebrow="A small practice in Lisbon"
      heading="Somewhere to put it all down."
      description="Therapy and coaching for people who are tired of holding everything at once."
      button={{ label: "Book a first call", href: "/call" }}
      link={{ label: "How the first session works", href: "/first-session" }}
      image={{ src: "/photos/pines.jpg", alt: "Pine trees standing in soft morning fog" }}
      avatars={[{ src: "/people/one.jpg", alt: "Portrait of a client" }]}
      proof="Ninety people came through the door last year." 
    />
  );
}

Props

type Avatar = {
  src: string;
  alt: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The trust card is only absolutely positioned from md up, where it overlaps the photograph's left edge on a translucent blurred panel. Below md it drops back into normal flow under the picture, because an inset card on a phone would cover most of the image.
• Its -left-16 offset deliberately pulls it out of the image column and into the gutter, which is what makes it read as pinned to the photograph rather than laid on top of it.
• The headline runs with trigger="mount", since a hero is above the fold and a scroll-triggered stagger would never fire.
• The copy, the actions and the trust card each wait on an offset from 0.4 + heading.split(" ").length * 0.07, so the whole column resolves in reading order behind the headline however long it runs.
• The photograph drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount for cached files.
• The pill and the link share one wrapping flex row, so the secondary action drops under the primary on a narrow screen instead of shrinking beside it.
• The link's arrow lifts only under motion-safe:, so the affordance is dropped for reduced motion while the link keeps working.