// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 04 * @description A stats-focused value proposition displaying impressive numbers * and metrics. Perfect for showcasing scale, reliability, and social proof. * * @slots value-prop, value-prop-container, value-prop-content, value-prop-header, * value-prop-heading, value-prop-description, value-prop-stats-grid, * value-prop-stat, value-prop-stat-value, value-prop-stat-label, * value-prop-cta-group, value-prop-primary-cta, value-prop-secondary-cta * @variant stats * * @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 StatItemConfig { /** Unique identifier for list key */ id: string /** Stat value (e.g., "10M+", "99.9%") */ value: string /** Stat label */ label: string /** Whether to highlight this stat */ highlighted?: boolean } interface ValueProp04Props { /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of stats to display */ stats?: StatItemConfig[] /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-users", value: "10M+", label: "Active users", highlighted: true }, { id: "stat-uptime", value: "99.9%", label: "Uptime SLA" }, { id: "stat-response", value: "50ms", label: "Avg response time" }, { id: "stat-countries", value: "150+", label: "Countries served" }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Start Free Trial", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "View Case Studies", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp04({ heading = "Trusted by millions worldwide", description = "Join thousands of companies using our platform to scale their business and delight their customers.", stats = DEFAULT_STATS, primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, className, idBase, }: ValueProp04Props) { const headingId = `${idBase ?? "value-prop-04"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Stats Grid */}

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

{/* CTAs */} {(primaryCta || secondaryCta) && (

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

)}

) } export default ValueProp04 export { ValueProp04, type ValueProp04Props, type StatItemConfig, type CtaConfig }