// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 10 * @description A modern bento-box grid hero with asymmetric cells containing * heading, description, stats, and image. Creates visual interest through * varied cell sizes and content types. * * @slots hero, hero-container, hero-grid, hero-heading-cell, hero-heading, * hero-description-cell, hero-description, hero-cta-group, * hero-primary-cta, hero-secondary-cta, hero-stats-cell, * hero-stat, hero-stat-value, hero-stat-label, * hero-image-cell, hero-image-wrapper, hero-image * @variant bento-grid * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface StatConfig { /** Unique identifier for list key */ id: string /** Stat value (e.g., "99%", "10k+") */ value: string /** Stat label */ label: string } interface ImageConfig { /** Image source URL */ src: string /** Alt text for accessibility */ alt: string } interface Hero10Props { /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Stats displayed in grid cells */ stats?: StatConfig[] /** Hero image configuration */ image?: ImageConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatConfig[] = [ { id: "stat-uptime", value: "99%", label: "Uptime" }, { id: "stat-users", value: "10k+", label: "Users" }, { id: "stat-features", value: "50+", label: "Features" }, { id: "stat-support", value: "24/7", label: "Support" }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "Learn More", href: "#", } const DEFAULT_IMAGE: ImageConfig = { src: "/assets/placeholders/placeholder-1x1.svg", alt: "Product screenshot", } // ============================================================================ // COMPONENT // ============================================================================ function Hero10({ heading = "Build Better Software, Faster", description = "The modern platform for teams who want to build, ship, and scale their products with confidence and efficiency.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, stats = DEFAULT_STATS, image = DEFAULT_IMAGE, className, idBase, }: Hero10Props) { const headingId = `${idBase ?? "hero-10"}-heading` return (

{/* Bento Grid */}

{/* Heading Cell - Large, spans 2 cols on mobile, 2 cols + 2 rows on desktop */}

{heading}

{/* Image Cell - Spans 2 cols on mobile, 2 cols + 2 rows on desktop */}

{/* Description & CTA Cell */}

{description}

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

{/* Stats Cells - 4 individual cells */} {stats.slice(0, 4).map((stat) => (

{stat.value} {stat.label}

))}

) } export default Hero10 export { Hero10, type Hero10Props, type CtaConfig, type StatConfig, type ImageConfig, }