Photo Collage HeroPRO

Hero159: Photo Collage Hero

A centered hero with an eyebrow, a light display heading and two actions, above a staggered three-photo collage whose raised middle tile floats a live booking confirmation.

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

Base UI flavor

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

This installs the block to components/beste/block/hero159.tsx, the notification19 toast piece it floats on the centre tile (installed to components/beste/piece/notification19.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Hero159, hero159Demo } from "@/components/beste/block/hero159";

export default function Page() {
  return <Hero159 {...hero159Demo} />;
}

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

import { CalendarCheck } from "lucide-react";
import { Hero159 } from "@/components/beste/block/hero159";
import { Notification19 } from "@/components/beste/piece/notification19";

export default function Page() {
  return (
    <Hero159
      badge={{ label: "Inside the day" }}
      heading="Software that stays out of the room"
      description="The paperwork between appointments is handled, so the appointment itself can stay a conversation."
      buttons={[
        { label: "See how it works", href: "/product" },
        { label: "Talk to the team", href: "/contact", tone: "outline" },
      ]}
      tiles={[
        { src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" },
        { src: "/clinic/team.jpg", alt: "A small team around a laptop" },
        { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
      ]}
      media={
        <Notification19
          icon={CalendarCheck}
          title="Follow-up booked"
          meta="Rowan Blake · Wed 09:00"
          time="now"
          tone="emerald"
        />
      }
    />
  );
}

Props

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

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

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

Behavior notes

• The collage is driven entirely by index: index === 1 is the centre tile, so the second entry in tiles is the one that gets the taller frame and the floating asset. Reordering the array is how you move the emphasis, there is no flag on the tile itself.
• The centre tile is raised with a negative top margin (md:-mt-10) and grows to md:h-[28rem] against md:h-80 for its neighbours, which is what produces the stagger. Below md the negative margin drops out and the tiles stack at plain h-80 and h-64.
• md:items-start on the grid is load-bearing. Without it the row would stretch every tile to the tallest one and the height difference that creates the stagger would disappear.
• media renders only inside the centre tile, and only when a centre tile exists. Passing fewer than two entries in tiles silently drops the asset rather than relocating it.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.
• The header block is capped at max-w-3xl and centered independently of the collage, so the copy keeps a readable measure while the photographs run the full container width.