Split Hero with Edge-to-Edge Media

Hero84: Split Hero with Edge-to-Edge Media

50/50 split hero: content column on the left over the plain page background, and an edge-to-edge image or video filling the entire right column with no inset margin or dark overlay, plus a small checklist row under the buttons.

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

Base UI flavor

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

This installs the block to components/beste/block/hero84.tsx along with the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Hero84, hero84Demo } from "@/components/beste/block/hero84";

export default function Page() {
  return <Hero84 {...hero84Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Hero84 } from "@/components/beste/block/hero84";

export default function Page() {
  return (
    <Hero84
      badge={{ label: "New Platform", variant: "secondary" }}
      heading="Where ideas become exceptional digital products"
      description="An end-to-end platform combining design, prototyping, and development."
      buttons={[
        { label: "Get Started Free", href: "/signup", icon: ArrowRight },
        { label: "Book a Demo", href: "/demo", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=1200&h=1200&fit=crop" }}
      checkItems={[
        { title: "No credit card required" },
        { title: "14-day free trial" },
      ]}
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href: string;
  variant?: "default" | "outline";
  icon?: LucideIcon;
};

type CheckItem = {
  title: string;
};

Behavior notes

• Structurally this is a plain 50/50 split (flex min-h-screen flex-col lg:flex-row): the right media column fills its half with absolute inset-0 size-full object-cover and has no rounded corners, margin, or dark overlay, unlike the inset glass-panel treatment every other hero in this set uses for its background media.
• There is no invertColor prop on this component: heading and description always use the standard text-foreground/text-muted-foreground tokens because the text sits in a plain content column next to the media, not layered on top of it.
• Below lg, the two columns stack vertically (content first, then a min-h-[400px] media block) since the flex container defaults to flex-col.
• checkItems render as an inline flex-wrap row of Check icon plus label pairs, not a bulleted list or grid, and each item gets text-primary on its check icon.
• Buttons put their icon after the label ({button.label}{Icon}), matching hero79/hero87's ordering rather than hero83's icon-first pattern.