// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 12 * @description A 3D layered hero with stacked, rotated panels creating depth. * Features overlapping cards with content on front, image behind, and floating * accent cards for a dynamic, modern feel. * * @slots hero, hero-container, hero-stack, hero-layer-back, hero-layer-middle, * hero-layer-front, hero-content, hero-badge, hero-heading, * hero-description, hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-floating-card, hero-floating-stat * @variant stacked-layers * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, TrendingUp, Users } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface FloatingStatConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: React.ReactNode /** Stat value */ value: string /** Stat label */ label: string } interface Hero12Props { /** Optional badge displayed above heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Floating stat cards */ floatingStats?: FloatingStatConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "Learn More", href: "#", } const DEFAULT_FLOATING_STATS: FloatingStatConfig[] = [ { id: "stat-growth", icon: , value: "150%", label: "Growth", }, { id: "stat-users", icon: , value: "50k+", label: "Users", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero12({ badge = "Now in Public Beta", heading = "Accelerate Your Growth", description = "Track metrics that matter, automate workflows, and scale your business with confidence. See results in weeks, not months.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, floatingStats = DEFAULT_FLOATING_STATS, className, idBase, }: Hero12Props) { const headingId = `${idBase ?? "hero-12"}-heading` return (

{/* Stacked Layers Container */}

{/* Back Layer - Decorative */}

{/* Middle Layer - Accent */}

{/* Front Layer - Main Content */}

{/* Badge */} {badge && ( {badge} )} {/* Heading */}

{heading}

{/* Description */} {description && (

{description}

)} {/* CTAs */}

{primaryCta && ( {primaryCta.text} )} {secondaryCta && ( {secondaryCta.text} )}

{/* Floating Stat Cards */} {floatingStats && floatingStats.length > 0 && ( <> {/* Top-right floating card */} {floatingStats[0] && (

{floatingStats[0].icon}

{floatingStats[0].value}

{floatingStats[0].label}

)} {/* Bottom-left floating card */} {floatingStats[1] && (

{floatingStats[1].icon}

{floatingStats[1].value}

{floatingStats[1].label}

)} )}

) } export default Hero12 export { Hero12, type Hero12Props, type CtaConfig, type FloatingStatConfig }