// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 15 * @description A split hero with content on left, metrics dashboard card on right, * and three feature cards below. Perfect for SaaS and analytics products. * * @slots hero, hero-container, hero-content, hero-heading, hero-description, * hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-metrics, hero-metric-item, hero-features, hero-feature-card * @variant split-metrics-features * * @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 { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface MetricItem { /** Unique identifier for list key */ id: string /** Large display value (e.g., "12K+", "99.9%", "$2.4M") */ value: string /** Descriptive label below value */ label: string /** Optional trend indicator (e.g., "+24%") */ trend?: string } interface FeatureCard { /** Unique identifier for list key */ id: string /** Feature title */ title: string /** Feature description */ description: string } interface Hero15Props { /** Main heading text - supports line breaks with \n */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button - filled style */ primaryCta?: CtaConfig /** Secondary CTA button - outline style */ secondaryCta?: CtaConfig /** Metrics panel title */ metricsTitle?: string /** Metrics data */ metrics?: MetricItem[] /** Feature cards displayed below */ features?: FeatureCard[] /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "Learn More", href: "#", } const DEFAULT_METRICS: MetricItem[] = [ { id: "metric-1", value: "12K+", label: "Teams building", trend: "+24%" }, { id: "metric-2", value: "99.9%", label: "Uptime SLA" }, { id: "metric-3", value: "3.2M", label: "Hours saved", trend: "+18%" }, { id: "metric-4", value: "47%", label: "Faster deploys" }, ] const DEFAULT_FEATURES: FeatureCard[] = [ { id: "feature-1", title: "From Idea to Launch: Ship Products That Matter", description: "Transform your vision into reality with tools designed for modern teams who value speed and quality.", }, { id: "feature-2", title: "Every Detail Counts: Build with Precision", description: "Create polished experiences with components that work together seamlessly out of the box.", }, { id: "feature-3", title: "Scale Without Limits: Grow with Confidence", description: "Built on a foundation that handles growth effortlessly—from MVP to enterprise scale.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero15({ heading = "Ship products\nwith confidence", description = "The modern platform for teams who want to build, iterate, and scale their products with speed and reliability.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, metricsTitle = "BY THE NUMBERS", metrics = DEFAULT_METRICS, features = DEFAULT_FEATURES, className, idBase, }: Hero15Props) { const headingId = `${idBase ?? "hero-15"}-heading` return (

{/* Top Section: Content + Metrics */}

{/* Left: Content */}

{/* Heading */}

{heading.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}

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

{description}

)} {/* CTAs */}

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

{/* Right: Metrics Card */}

{/* Metrics Title */}

{metricsTitle}

{/* Metrics Grid */}

{metrics.map((metric) => (

{metric.value} {metric.trend && ( {metric.trend} )}

{metric.label}

))}

{/* Bottom Section: Feature Cards */} {features.length > 0 && (

{features.map((feature) => (

{feature.title}

{feature.description}

))}

)}

) } export default Hero15 export { Hero15, type Hero15Props, type CtaConfig, type MetricItem, type FeatureCard, }

{heading.split("\n").map((line, i) => ( {i > 0 && } {line} ))}

{feature.title}

{heading.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}