Reverse Split Hero with Pill Grid

Hero94: Reverse Split Hero with Pill Grid

Fullscreen 50/50 hero with the media panel on the left and content on the right, the mirror image of hero89/hero91/hero92/hero96. A video or image fills the left panel with a compact 3-column grid of small pill cards (icon plus label only, no description) floating on top.

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

Base UI flavor

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

This installs the block to components/beste/block/hero94.tsx and the shadcn/ui primitives it depends on: Badge and Button.

Quick start

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

import { Hero94, hero94Demo } from "@/components/beste/block/hero94";

export default function Page() {
  return <Hero94 {...hero94Demo} />;
}

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

import { Cloud, Code, Monitor } from "lucide-react";
import { Hero94 } from "@/components/beste/block/hero94";

export default function Page() {
  return (
    <Hero94
      badge={{ label: "Developer Tools", variant: "secondary" }}
      heading="Your entire workflow, unified"
      description="From code editor to production, a single platform covers every step."
      buttons={[{ label: "Try It Free", href: "/signup", variant: "default" }]}
      backgroundMedia={{ type: "image", src: "/hero/editor.jpg", alt: "Code editor" }}
      bentoCards={[
        { icon: Code, title: "Code Editor" },
        { icon: Monitor, title: "Live Preview" },
        { icon: Cloud, title: "Cloud Deploy" },
      ]}
    />
  );
}

Props

type Badge = { label: string; variant?: "default" | "secondary" | "outline" };
type Button = { label: string; href: string; variant?: "default" | "outline" };
type BackgroundMedia = { type: "image" | "video"; src: string; alt?: string };
type BentoCard = { icon: LucideIcon; title: string };

Behavior notes

• The outer flex container uses flex-col-reverse lg:flex-row: in the JSX the media panel is written first and the content panel second, but flex-col-reverse flips the visual stacking on mobile so content appears above media, while lg:flex-row restores document order (media left, content right) at the lg breakpoint.
• backgroundMedia.type: "video" renders autoPlay loop muted playsInline with no poster fallback; "image" renders a plain <img>. A bg-black/40 scrim sits over the media so the pill grid stays legible.
• The pill grid is a fixed grid-cols-3 layout (no span option, unlike hero92's bento grid), capped at max-w-sm; each pill is icon-over-label rather than icon-beside-label.
• Icon and label both dim to white/70 by default and brighten to full white together on hover (group/hero94), a single shared hover state rather than independent icon/text treatments.
• The left media panel keeps a min-h-[400px] floor before the lg split; the section carries min-h-screen.