Stacked Hero with Media Top

Hero90: Stacked Hero with Media Top

Fullscreen hero stacked vertically rather than split side by side: a video or image fills the top half of the viewport with a gradient fade into the bottom half, which holds a centered heading, description, and buttons on a solid background. There is no horizontal split at any breakpoint, only a top-to-bottom layout.

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

Base UI flavor

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

This installs the block to components/beste/block/hero90.tsx and the shadcn/ui Button primitive it depends on.

Quick start

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

import { Hero90, hero90Demo } from "@/components/beste/block/hero90";

export default function Page() {
  return <Hero90 {...hero90Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Hero90 } from "@/components/beste/block/hero90";

export default function Page() {
  return (
    <Hero90
      heading="A new way to build for the modern web"
      description="Visual development meets production-grade code."
      buttons={[
        { label: "Join the Waitlist", href: "/signup", variant: "default", icon: ArrowRight },
        { label: "Learn More", href: "/about", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "/hero/skyline.jpg", alt: "City skyline" }}
      invertColor
    />
  );
}

Props

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

Behavior notes

• backgroundMedia.type: "video" renders a <video> with autoPlay loop muted playsInline and no poster attribute; "image" renders a plain <img>. Both fill the top min-h-[50vh] panel with object-cover.
• A gradient overlay always sits on top of the media (bg-gradient-to-b), fading from transparent in the middle to darker at both edges. When invertColor is true (the default) it fades to black/30 and black/60; when false it fades to background/30 and background/60 instead, matching the page's own background color.
• Buttons accept an optional icon (a LucideIcon component reference, not an element); when present it renders after the label inside the button.
• The bottom content panel sits on a solid bg-background, independent of invertColor; only the media's overlay gradient responds to that prop.
• The section carries min-h-screen and stacks with plain flex-col, so there is no lg:flex-row breakpoint like the split-layout heroes in this set.