Cinematic Hero with Social Proof

Hero98: Cinematic Hero with Social Proof

Centered hero built for a "product screenshot" reveal: an announcement pill, headline, description, buttons, and an overlapping avatar-stack social proof row sit over an inset video or image, and a second media element (a dashboard screenshot or clip) overlaps the bottom of that panel with a large negative top margin for a cinematic, layered effect. Unlike the rest of this hero set, the section has no fullscreen floor and grows with its content.

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

Base UI flavor

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

This installs the block to components/beste/block/hero98.tsx and the shadcn/ui primitives it depends on: Badge, Button, and Avatar (for the social proof row).

Quick start

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

import { Hero98, hero98Demo } from "@/components/beste/block/hero98";

export default function Page() {
  return <Hero98 {...hero98Demo} />;
}

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

import { ArrowRight, Sparkles } from "lucide-react";
import { Hero98 } from "@/components/beste/block/hero98";

export default function Page() {
  return (
    <Hero98
      announcement={{ icon: Sparkles, label: "Introducing AI-powered workflows", href: "/changelog" }}
      heading="Build, ship, and iterate at the speed of thought"
      description="The developer platform that removes every barrier between your idea and your users."
      buttons={[{ label: "Start Building", href: "/signup", variant: "default", icon: ArrowRight }]}
      backgroundMedia={{ type: "image", src: "/hero/glow.jpg", alt: "Abstract glow" }}
      media={{ type: "image", src: "/hero/dashboard-screenshot.png", alt: "Dashboard" }}
      socialProof={{
        avatars: [
          { src: "/avatars/1.jpg", alt: "User" },
          { src: "/avatars/2.jpg", alt: "User" },
        ],
        text: "Trusted by 50,000+ developers worldwide",
      }}
      invertColor
    />
  );
}

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 AvatarItem = { src: string; alt: string };
type SocialProof = { avatars: AvatarItem[]; text: string };
type Announcement = { icon?: LucideIcon; label: string; href: string };

Behavior notes

• badge is destructured from props but never referenced in the JSX; only announcement renders a pill above the heading. Pass announcement (not badge) to show one.
• media overlaps the bottom of the backgroundMedia panel using a large negative top margin (-mt-32, growing to -mt-52 at lg), producing the cinematic "screenshot floating over the hero" effect; the content column above it reserves matching bottom padding (pb-40 up to lg:pb-64) so the overlap has room.
• backgroundMedia and media are independent and both optional: backgroundMedia is inset and clipped (inset-x-6 top-6 bottom-6, rounded-md border) as the panel backdrop, while media is a separate, non-inset block rendered below with its own rounded-md border shadow-2xl. Both accept type: "image" | "video"; video variants use autoPlay loop muted playsInline with no poster fallback.
• The social proof avatars overlap each other (-space-x-2) with a border-2 border-background ring, and every AvatarFallback renders the literal letter "U" regardless of the user's name.
• This is the only hero in the set whose outer <section> has no min-h-screen; height is driven entirely by content and the two media elements' natural aspect ratios.