Fullscreen Hero with Quick-Access Cards

Hero81: Fullscreen Hero with Quick-Access Cards

Fullscreen, vertically centered hero over an inset background image or video, with a row of glassmorphism "quick access" cards anchored to the bottom of the viewport for routing visitors toward developer, designer, or team-specific 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/hero81?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero81.tsx along with the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Hero81, hero81Demo } from "@/components/beste/block/hero81";

export default function Page() {
  return <Hero81 {...hero81Demo} />;
}

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

import { Code, Palette, Users } from "lucide-react";
import { Hero81 } from "@/components/beste/block/hero81";

export default function Page() {
  return (
    <Hero81
      badge={{ label: "Now Available", variant: "secondary" }}
      heading="Experience the next generation of creative tools"
      description="A platform that helps teams build, iterate, and ship products faster."
      buttons={[
        { label: "Start Free Trial", href: "/signup" },
        { label: "See How It Works", href: "/product", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop" }}
      quickLinks={[
        { icon: Code, title: "For Developers", description: "APIs, SDKs, and CLI tools", href: "/developers" },
        { icon: Palette, title: "For Designers", description: "Visual editor and templates", href: "/designers" },
        { icon: Users, title: "For Teams", description: "Collaboration and workflows", href: "/teams" },
      ]}
      invertColor
    />
  );
}

Props

type QuickLink = {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
};

Behavior notes

• The section is min-h-screen and uses flex flex-col items-center justify-center, vertically centering the badge/heading/description/buttons block regardless of viewport height, with the quickLinks row pinned below via w-full at the bottom of the flex column.
• backgroundMedia sits in an inset rounded panel (margins of 6/8 from the viewport edge, not true edge-to-edge) with a bg-black/60 (or bg-background/80 when invertColor is false) overlay for legibility.
• quickLinks render as a sm:grid-cols-3 grid of backdrop-blur-md cards; each card's trailing arrow icon translates right on hover via a named group/hero81 class, and the whole card is a next/link <Link>, not a button.
• invertColor (default true) is threaded through nearly every text, border, and background color in the component, so flipping it to false re-themes the entire hero for a light background image in one prop.