Split Hero with Bento Feature Grid

Hero92: Split Hero with Bento Feature Grid

Fullscreen 50/50 hero with a plain content panel on the left (badge, heading, description, buttons) and a video or image panel on the right, overlaid with a floating two-column bento grid of glass-morphism feature cards. Individual cards can span both columns to break up the grid rhythm.

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

Base UI flavor

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

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

Quick start

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

import { Hero92, hero92Demo } from "@/components/beste/block/hero92";

export default function Page() {
  return <Hero92 {...hero92Demo} />;
}

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

import { ArrowRight, Shield, Zap } from "lucide-react";
import { Hero92 } from "@/components/beste/block/hero92";

export default function Page() {
  return (
    <Hero92
      badge={{ label: "Platform", variant: "secondary" }}
      heading="Built for teams that move fast and ship often"
      description="From idea to production in record time."
      buttons={[{ label: "Start Free", href: "/signup", variant: "default", icon: ArrowRight }]}
      backgroundMedia={{ type: "image", src: "/hero/team.jpg", alt: "Team working" }}
      bentoCards={[
        { icon: Zap, title: "Edge Functions", description: "Deploy serverless functions globally", span: "wide" },
        { icon: Shield, title: "Security", description: "SOC 2 & GDPR compliant" },
      ]}
    />
  );
}

Props

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

Behavior notes

• backgroundMedia.type: "video" renders autoPlay loop muted playsInline with no poster fallback; "image" renders a plain <img>. A fixed bg-black/40 scrim sits over the media regardless of type, so the bento cards stay legible.
• The bento grid is a fixed grid-cols-2 layout capped at max-w-md; a card with span: "wide" takes col-span-2 and breaks the two-up rhythm for that row.
• Each card uses a translucent bg-white/5 fill with a backdrop-blur-md glass effect and brightens to bg-white/10 on hover; there is no click behavior, cards are static, non-interactive containers.
• The right panel keeps a min-h-[500px] floor before lg:flex-row splits the section 50/50; below that the media and grid stack under the content column.
• Buttons accept an optional icon (a LucideIcon reference) rendered after the label.