Centered Hero with Announcement Pill

Hero50: Centered Hero with Announcement Pill

Minimal centered hero led by a clickable announcement pill (a sparkle-badged "New" label plus a short line of text) sitting above the heading, description, and CTA row.

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

Base UI flavor

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

This installs the block to components/beste/block/hero50.tsx and its shadcn/ui dependencies: Badge, Button.

Quick start

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

import { Hero50, hero50Demo } from "@/components/beste/block/hero50";

export default function Page() {
  return <Hero50 {...hero50Demo} />;
}

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

import { Hero50 } from "@/components/beste/block/hero50";

export default function Page() {
  return (
    <Hero50
      announcement={{ label: "New", text: "Introducing AI-powered workflows", href: "/changelog" }}
      heading="Build products your customers will love"
      description="The modern platform for creating exceptional digital experiences."
      buttons={[
        { label: "Get Started Free", href: "https://beste.co", icon: "arrow-right" },
        { label: "Schedule Demo", href: "https://beste.co", variant: "outline" },
      ]}
    />
  );
}

Props

type Announcement = { label: string; text: string; href?: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost";
  icon?: "arrow-right" | "chevron-right" | "external-link";
};

Behavior notes

• The announcement pill is a single next/link wrapping a small Badge (with a Sparkles icon and announcement.label), the announcement.text, and a trailing arrow; the whole pill is one hit target, and the arrow nudges right on hover via group-hover:translate-x-0.5.
• Each button's icon is a string key ("arrow-right" | "chevron-right" | "external-link"), resolved through a local buttonIconMap to the matching Lucide component; omitting icon renders the button with no trailing glyph regardless of position.
• There is no image or media slot in this hero: it is a single centered text column capped at max-w-5xl (heading max-w-4xl, description max-w-2xl).
• announcement is fully optional; without it the hero starts directly at the heading.