// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 08 * @description A gradient background hero with headline and floating stat card. * Features subtle gradient background, top-left headline with CTA, and glassmorphism stat card. * * @slots hero, hero-content, hero-heading, hero-cta, * hero-stat-card, hero-stat-card-image, hero-stat-card-avatars, * hero-stat-card-avatar, hero-stat-card-value, hero-stat-card-description * @variant gradient-stat-card * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Plus } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface AvatarItem { /** Unique identifier for list key */ id: string /** Avatar image URL */ image: string /** Person name for alt text */ name: string } interface StatCard { /** Thumbnail image URL */ image: string /** Avatars to display */ avatars: AvatarItem[] /** Main stat value (e.g., "2.3M+") */ statValue: string /** Description text below stat */ description: string } interface Hero08Props { /** Main headline text */ headline?: string /** CTA button text */ ctaText?: string /** CTA button link */ ctaHref?: string /** Floating stat card data */ statCard?: StatCard /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STAT_CARD: StatCard = { image: "/assets/placeholders/placeholder-1x1.svg", avatars: [ { id: "avatar-1", image: "/assets/placeholders/avatar-placeholder.svg", name: "Team member" }, { id: "avatar-2", image: "/assets/placeholders/avatar-placeholder.svg", name: "Team member" }, ], statValue: "10K+", description: "Teams building better products with our platform.", } // ============================================================================ // COMPONENT // ============================================================================ function Hero08({ headline = "Build Products That Scale", ctaText = "Start Free Trial", ctaHref = "#", statCard = DEFAULT_STAT_CARD, className, idBase, }: Hero08Props) { const headingId = `${idBase ?? "hero-08"}-heading` return (

{/* Top Gradient */}

{/* Content */}

{/* Left: Headline + CTA */}

{headline}

{ctaText}

{/* Right: Stat Card */} {statCard && (

{/* Thumbnail */}

{/* Stats Content */}

{/* Avatars + Badge */} {statCard.avatars.length > 0 && (

{statCard.avatars.map((avatar) => (

))}

)} {/* Stat Value */}

{statCard.statValue}

{/* Description */}

{statCard.description}

)}

{/* Bottom Gradient */}

) } export default Hero08 export { Hero08, type Hero08Props, type StatCard, type AvatarItem }