Bottom-Aligned Hero with Quick Links

Hero83: Bottom-Aligned Hero with Quick Links

Fullscreen hero with content pinned to the bottom of the viewport: heading, description, and buttons on the left, a vertical stack of quick-access link cards on the right, over an inset background image or video darkened by a bottom-up gradient.

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

Base UI flavor

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

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

Quick start

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

import { Hero83, hero83Demo } from "@/components/beste/block/hero83";

export default function Page() {
  return <Hero83 {...hero83Demo} />;
}

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

import { Code, Palette, Play } from "lucide-react";
import { Hero83 } from "@/components/beste/block/hero83";

export default function Page() {
  return (
    <Hero83
      heading="Ship products your customers will love"
      description="The all-in-one platform for building, testing, and deploying modern web apps."
      buttons={[
        { label: "Start Building", href: "/signup" },
        { label: "Watch Demo", href: "/demo", variant: "outline", icon: Play },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1546012112-142c81b59a42?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" },
      ]}
      invertColor
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href: string;
  variant?: "default" | "outline";
  icon?: LucideIcon;
};

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

Behavior notes

• The section uses flex min-h-screen flex-col justify-end, so all content is pinned to the bottom of the viewport rather than centered or top-aligned; text and quickLinks sit side by side only from lg up (lg:flex-row lg:items-end lg:justify-between), stacking vertically below that.
• The overlay gradient runs bottom-to-top (bg-gradient-to-t from-black/90 via-black/40 to-transparent), so it is darkest directly behind the text at the bottom of the frame and fades to fully transparent toward the top.
• Buttons render their icon before the label ({Icon}{button.label}), the reverse order used by most other heroes in this set that put the icon after the label.
• quickLinks are a vertical column (flex flex-col gap-3) capped at lg:max-w-xs, not a grid; each card still uses the same backdrop-blur-md glass styling and hover-translating arrow (group/hero83) as the grid version in hero81.