Hero145: Editorial Product Hero

Editorial hero with an eyebrow pill and an oversized full-width light heading up top, then a lower two-column row pairing a paragraph and two accent buttons with an image tile that floats a live browser-window frame asset (a table of member rows in the demo).

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

Base UI flavor

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

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

Quick start

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

import { Hero145, hero145Demo } from "@/components/beste/block/hero145";

export default function Page() {
  return <Hero145 {...hero145Demo} />;
}

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

import { Hero145 } from "@/components/beste/block/hero145";
import { Browser34 } from "@/components/beste/piece/browser34";

export default function Page() {
  return (
    <Hero145
      badge={{ label: "The member record" }}
      heading="Every member on one page the whole team can trust"
      description="Records, plans, and payments live together in one view."
      buttons={[
        { label: "Book a demo", href: "https://beste.co", tone: "primary" },
        { label: "Take the tour", href: "https://beste.co", tone: "outline" },
      ]}
      media={
        <Browser34
          url="app.sirius.care/members"
          rows={[
            { name: "Rowan Blake", status: "Active", tone: "emerald" },
            { name: "Amelia Frost", status: "Intake", tone: "amber" },
          ]}
        />
      }
      image={{
        src: "https://images.unsplash.com/photo-1750918619871-dc74c9a57394?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 one after it (tone ?? (index === 0 ? "primary" : "outline")).
• The heading runs full width above a md:grid-cols-2 row that holds the description/buttons on the left and the media tile on the right; unlike hero144's fully centered layout, this one is left-aligned throughout.
• The image tile only renders when media is truthy; image fills it as an absolutely positioned backdrop and media renders above it in a relative z-10 layer, so the tile still shows (on bg-muted) if media is passed without an image.
• media is a raw ReactNode: the demo renders a <Browser34 /> piece (a fake browser chrome with a URL bar and status rows) directly as JSX, so changing the asset means swapping the imported component, not editing a data prop.
• Section uses standard py-16 md:py-24 padding rather than the full-bleed min-h-[...] treatment of the Auralis hero set, keeping it a mid-page rather than fold-filling hero.