// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name About 06 * @description A bold stats and impact metrics section with large numbers, * impact statements, and visual emphasis. Perfect for showcasing company scale. * * @slots about, about-container, about-header, about-badge, about-heading, * about-description, about-stats-grid, about-stat-card, about-stat-value, * about-stat-label, about-stat-description, about-impact-section, * about-impact-heading, about-impact-grid, about-impact-card, * about-impact-icon, about-impact-title, about-impact-text * @variant stats-bold * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Globe, Users, TrendingUp, Rocket, type LucideIcon } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface StatItemConfig { /** Unique identifier for list key */ id: string /** Large display value */ value: string /** Stat label */ label: string /** Optional description */ description?: string } interface ImpactItemConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: LucideIcon /** Impact title */ title: string /** Impact description */ description: string } interface About06Props { /** Optional badge displayed above heading */ badge?: string /** Main heading text */ heading?: string /** Description text */ description?: string /** Stats to display */ stats?: StatItemConfig[] /** Impact items */ impactItems?: ImpactItemConfig[] /** Impact section heading */ impactHeading?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-revenue", value: "$2.5B+", label: "Revenue Generated", description: "For our customers in 2024", }, { id: "stat-users", value: "10M+", label: "Users Worldwide", description: "Across 150+ countries", }, { id: "stat-uptime", value: "99.99%", label: "Platform Uptime", description: "Industry-leading reliability", }, { id: "stat-api", value: "500K+", label: "API Calls Daily", description: "Processing at scale", }, ] const DEFAULT_IMPACT_ITEMS: ImpactItemConfig[] = [ { id: "impact-global", icon: Globe, title: "Global Reach", description: "Serving customers in over 150 countries with localized support and multi-currency capabilities.", }, { id: "impact-community", icon: Users, title: "Community Impact", description: "Donated $5M to education initiatives and powered 10,000+ nonprofits at no cost.", }, { id: "impact-growth", icon: TrendingUp, title: "Customer Growth", description: "Our customers grow 3x faster on average compared to industry benchmarks.", }, { id: "impact-innovation", icon: Rocket, title: "Innovation Leader", description: "Launched 50+ new features in 2024, driven by customer feedback and cutting-edge research.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function About06({ badge = "Our Impact", heading = "Numbers that tell our story", description = "Behind every number is a story of innovation, dedication, and the trust our customers place in us every day.", stats = DEFAULT_STATS, impactItems = DEFAULT_IMPACT_ITEMS, impactHeading = "Making a Difference", className, idBase, }: About06Props) { const headingId = `${idBase ?? "about-06"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Stats Grid - Large Bold Numbers */} {stats && stats.length > 0 && (

{stats.map((stat) => (

{stat.value}

{stat.label}

{stat.description && (

{stat.description}

)}

))}

)} {/* Impact Section */} {impactItems && impactItems.length > 0 && (

{impactHeading && (

{impactHeading}

)}

{impactItems.map((item) => { const Icon = item.icon return (

{item.title}

{item.description}

) })}

)}

) } export default About06 export { About06, type About06Props, type StatItemConfig, type ImpactItemConfig, }