When to use

Reach for PageHero as the top-of-page hero band on any landing or section: news landing, blog index, marketing page, docs site, app welcome screen. Composes a gradient background, accent badge chip, large title with optional highlight subline, description, and a flexible content slot.

Minimal example

import { PageHero } from "@/components/page-hero";

<PageHero
  badge="News & Updates"
  title="Latest Stories"
  titleHighlight="From Our Team"
  description="Insights and announcements."
/>;

With HeroStats

The HeroStats sub-component renders the typical icon-circle + bold value + small label triplet, designed for the white-on-gradient contrast inside the hero.

import { HeroStats, PageHero } from "@/components/page-hero";
import { Newspaper, TrendingUp, Clock } from "lucide-react";

<PageHero badge="News" title="Stories" description="Stay informed.">
  <HeroStats stats={[
    { icon: Newspaper, value: "500+", label: "Articles" },
    { icon: TrendingUp, value: "10K+", label: "Readers" },
    { icon: Clock, value: "Daily", label: "Updates" },
  ]} />
</PageHero>;

CTA cluster

<PageHero
  badge="New: v2.0"
  title="Build faster"
  titleHighlight="Ship sooner"
>
  <div className="flex justify-center gap-4">
    <Button size="lg" variant="secondary">Get started</Button>
    <Button size="lg" variant="outline">View docs</Button>
  </div>
</PageHero>;

Density variations

Three options via the density prop:

• compact — min-h-[40vh]. Sub-page heroes, section dividers.
• default — min-h-[70vh]. Most landing pages.
• full — min-h-screen. Splash / welcome screens.

Custom title rendering

For mixed-color or italic-word titles beyond the simple title + titleHighlight combo, pass titleSlot:

<PageHero
  title="" // unused when titleSlot is provided
  titleSlot={
    <h1 className="text-5xl font-bold text-primary-foreground">
      The <em className="italic text-primary-foreground">future</em> of news
    </h1>
  }
  description="..."
/>;

Animation

Reveal animation runs on mount via the project-wide reveal-up CSS keyframe with 60ms staggered delays (badge → title → description → children). Respects prefers-reduced-motion automatically (free via the existing keyframe). Disable entirely with disableReveal={true}.

Accessibility

• Section is a landmark with aria-labelledby pointing to the title id (auto-generated via useId).
• Badge icon is aria-hidden; badge text is the meaningful label.
• Heading semantic level configurable via headingAs={"h1" | "h2" | "h3"}. Default h1.
• Reduced-motion users see content instantly (no transitions).