Media-First Reverse HeroPRO

Hero164: Media-First Reverse Hero

A hero that opens on a full-bleed image band with a live phone frame anchored into it, then sets the eyebrow, light display heading, paragraph and actions underneath rather than above.

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/hero164?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero164.tsx, the browser35 phone-frame piece it anchors into the band (installed to components/beste/piece/browser35.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Hero164, hero164Demo } from "@/components/beste/block/hero164";

export default function Page() {
  return <Hero164 {...hero164Demo} />;
}

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

import { Browser35 } from "@/components/beste/piece/browser35";
import { Hero164 } from "@/components/beste/block/hero164";

export default function Page() {
  return (
    <Hero164
      badge={{ label: "In their pocket" }}
      heading="Members turn up because the reminder made sense"
      description="The appointment arrives as something people can act on: the room, the person, and what to bring."
      buttons={[
        { label: "See the member experience", href: "/members" },
        { label: "Book a demo", href: "/demo", tone: "outline" },
      ]}
      note="No app to install. It is a link, and it works on whatever phone they already have."
      image={{ src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" }}
      media={
        <Browser35
          time="09:41"
          title="Appointment"
          status="Confirmed"
          headline="Wednesday, 14 May · 09:00"
          rows={[
            { label: "With", value: "Dr Amelia Frost" },
            { label: "Room", value: "Clinic 2, ground floor" },
          ]}
        />
      }
    />
  );
}

Props

type ButtonTone = "primary" | "neutral" | "outline";

type ActionLink = {
  label: string;
  href: string;
  tone?: ButtonTone;
};

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

Behavior notes

• The reversal is structural, not visual: the band is the first child of the section and sits outside the max-w-7xl container, so the image genuinely leads the page and the h1 follows it in the document order too.
• The section has pb-16 and no top padding, because the band is meant to butt against whatever sits above it, usually a navbar.
• The phone frame is pinned with inset-y-0 right-0, moving to md:right-12, and is width-capped at w-64, then md:w-72. It is vertically centered inside the band rather than positioned by an offset, so band height changes do not push it out of frame.
• The header row uses md:items-end so the paragraph column aligns to the heading's baseline, with md:pb-2 compensating for the heading's line height.
• The right column is flex flex-col items-start, which keeps Button21 at its intrinsic width. Without it the actions would stretch to the column, since flex children default to align-items: stretch.
• note brings its own border-t and top padding, so the hairline under the actions only appears when a note is passed.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.