Split Hero with Metric Dashboard

Hero96: Split Hero with Metric Dashboard

Fullscreen 50/50 hero with content on the left and a video or image panel on the right, overlaid with a floating 2-column grid of metric cards: a large value, an optional trend badge with an up arrow, and a label. Built for stat-heavy positioning like "by the numbers" sections.

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

Base UI flavor

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

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

Quick start

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

import { Hero96, hero96Demo } from "@/components/beste/block/hero96";

export default function Page() {
  return <Hero96 {...hero96Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Hero96 } from "@/components/beste/block/hero96";

export default function Page() {
  return (
    <Hero96
      badge={{ label: "By the Numbers", variant: "secondary" }}
      heading="Performance you can measure, results you can trust"
      description="Real, measurable improvements across your development workflow."
      buttons={[{ label: "See It in Action", href: "/demo", variant: "default", icon: ArrowRight }]}
      backgroundMedia={{ type: "image", src: "/hero/dashboard.jpg", alt: "Dashboard" }}
      metrics={[
        { value: "3.2s", label: "Avg. Build Time", trend: "-67%" },
        { value: "99.99%", label: "Uptime SLA", trend: "+0.04%" },
        { value: "52k", label: "Active Teams", trend: "+180%", span: "wide" },
      ]}
    />
  );
}

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 MetricCard = { value: string; label: string; trend?: 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.
• Each metric card shows value at text-3xl font-bold, with an optional trend badge rendered in a fixed text-emerald-400 with a TrendingUp icon; there is no negative/red styling path, a trend string like "-67%" still renders green.
• The metric grid is a fixed grid-cols-2 layout capped at max-w-md; a card with span: "wide" takes col-span-2.
• Cards use bg-white/5 with backdrop-blur-md and brighten to bg-white/10 on hover; they are static containers with no click behavior.
• Buttons accept an optional icon (a LucideIcon reference) rendered after the label; the right panel keeps a min-h-[500px] floor before the lg:flex-row split, and the section carries min-h-screen.