Centered Product Hero

Hero144: Centered Product Hero

Centered hero with a bordered eyebrow pill, a large light heading, a supporting paragraph, two accent buttons, and a wide rounded image tile below that floats a live product micro-asset (a file-drawer style card list in the demo) over a soft photo backdrop.

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

Base UI flavor

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

This installs the block to components/beste/block/hero144.tsx, the badge23 and button21 components it uses for the eyebrow pill and CTA buttons, the dashboard31 piece it floats inside the image tile as the demo's live asset, and its dependencies.

Quick start

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

import { Hero144, hero144Demo } from "@/components/beste/block/hero144";

export default function Page() {
  return <Hero144 {...hero144Demo} />;
}

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

import { Hero144 } from "@/components/beste/block/hero144";
import { Dashboard31 } from "@/components/beste/piece/dashboard31";

export default function Page() {
  return (
    <Hero144
      badge={{ label: "Care operations, quietly handled" }}
      heading="The workspace that runs the day so your team doesn't have to"
      description="Scheduling, records, and billing in one calm surface."
      buttons={[
        { label: "Book a demo", href: "https://beste.co", tone: "primary" },
        { label: "Take the tour", href: "https://beste.co", tone: "outline" },
      ]}
      media={
        <Dashboard31
          title="Case Files"
          items={[
            { name: "Intake_Questionnaire_v3.docx", tone: "doc" },
            { name: "Session_Notes_April.pdf", tone: "pdf" },
          ]}
        />
      }
      image={{
        src: "https://images.unsplash.com/photo-1701979399033-1f720add6b91?w=2000&fit=crop",
        alt: "Soft blue gradient backdrop",
      }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
  tone?: "primary" | "neutral" | "outline";
};

Behavior notes

• buttons without an explicit tone fall back to "primary" on the first entry and "outline" on every entry after it (tone ?? (index === 0 ? "primary" : "outline")), so a plain two-item array with no tone set already reads as primary-then-outline.
• The image tile only renders when media is truthy; inside it, image is an absolutely positioned backdrop (absolute inset-0 object-cover) and media sits above it in a relative z-10 layer, so media can be passed without image and it will float on the plain bg-muted tile instead.
• media is a raw ReactNode, not a data prop: the demo passes a <Dashboard31 /> element directly, so swapping the asset means importing a different piece component and rendering it as JSX, not editing a data field.
• The eyebrow, heading, description, and buttons all sit in a centered max-w-4xl text-center column, while the image tile below expands to max-w-7xl, so the tile is visibly wider than the copy above it.