Bottom-Aligned Hero with Stack Cards

Hero97: Bottom-Aligned Hero with Stack Cards

Fullscreen hero whose content sits pinned to the bottom of the viewport rather than centered or split, over an inset, rounded video or image panel with a gradient that darkens toward the bottom where the text sits. The bottom row itself splits into heading/description/button text on the left and a vertical stack of clickable link cards on the right.

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

Base UI flavor

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

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

Quick start

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

import { Hero97, hero97Demo } from "@/components/beste/block/hero97";

export default function Page() {
  return <Hero97 {...hero97Demo} />;
}

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

import { Cpu, Layers } from "lucide-react";
import { Hero97 } from "@/components/beste/block/hero97";

export default function Page() {
  return (
    <Hero97
      badge={{ label: "Tech Stack", variant: "secondary" }}
      heading="The modern stack for ambitious teams"
      description="Modular building blocks that work together seamlessly."
      buttons={[{ label: "Explore Stack", href: "/stack", variant: "default" }]}
      backgroundMedia={{ type: "image", src: "/hero/stack.jpg", alt: "Server racks" }}
      stackCards={[
        { icon: Layers, title: "Frontend SDK", description: "Build with what you love", href: "/docs/frontend" },
        { icon: Cpu, title: "Compute Engine", description: "Serverless at the edge", href: "/docs/compute" },
      ]}
      invertColor
    />
  );
}

Props

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

Behavior notes

• The section is flex min-h-screen flex-col justify-end, so all content is pinned to the bottom of the viewport rather than centered, unlike the other fullscreen heroes in this set.
• The media is inset from the section edges (inset-x-6 top-6 bottom-6, lg:inset-x-8 lg:top-8 lg:bottom-8) and clipped to a rounded-md border. Its overlay is a bg-gradient-to-t that runs from strongest at the bottom (black/80 when invertColor) to weakest at the top (black/20), so the pinned text stays legible against the darkest part of the media.
• stackCards render as full <Link> rows (icon, title, description, trailing arrow) rather than static cards; each link brightens on hover and the arrow shifts right (translate-x-1) via a scoped group/hero97 class.
• invertColor (default true) switches both the text colors (white variants vs. default foreground/text-muted-foreground) and the stack card surface (white/5 bordered vs. background/40 bordered), a consistent light/dark pairing applied across every element in the bottom row.
• backgroundMedia.type: "video" renders autoPlay loop muted playsInline with no poster fallback; "image" renders a plain <img>.