import type { ReactNode } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" type HeroAction = { label: string href: string } type HeroStat = { label: string value: string } type HeroProps = { title?: string description?: string eyebrow?: string primaryAction?: HeroAction secondaryAction?: HeroAction stats?: HeroStat[] media?: ReactNode className?: string } const DEFAULT_STATS: HeroStat[] = [ { label: "Components", value: "60+" }, { label: "Themes", value: "8 vibes" }, { label: "Setup", value: "<5 min" }, ] export default function Hero({ title = "Build brutalist interfaces without the busywork.", description = "BrutalUI is a copy-paste component kit for bold, fast, and wildly customizable UIs. Start with strong defaults and make it yours.", eyebrow = "BrutalUI", primaryAction = { label: "Read the docs", href: "/docs" }, secondaryAction = { label: "Browse components", href: "/docs/accordion" }, stats = DEFAULT_STATS, media, className, }: HeroProps) { return (

{eyebrow}

{title}

{description}

{stats.map((stat) => (

{stat.label}

{stat.value}

))}

{media ?? (

Launch-ready

Brutal design, softer setup.

Drag, drop, copy, and ship. No fluff, just brutal clarity.

)}

) }

Hero

Ship bold marketing in hours.

Installation

Usage