"use client" // required for: useState, useEffect (count-up animation) /** * @name Social Proof 04 * @description Animated stats counters with counting animation. * Great for showcasing impressive metrics with visual impact. * * @slots social-proof, social-proof-container, social-proof-header, * social-proof-heading, social-proof-description, social-proof-stats-grid, * social-proof-stat-item, social-proof-stat-icon, social-proof-stat-value, * social-proof-stat-label, social-proof-stat-description * @variant animated-stats * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Users, Globe, Rocket, Star } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatItemConfig { /** Unique identifier for list key */ id: string /** Stat value (number to count up to) */ value: number /** Suffix text (e.g., "+", "%") */ suffix?: string /** Prefix text (e.g., "$") */ prefix?: string /** Stat label */ label: string /** Stat description */ description?: string /** Icon component */ icon?: React.ReactNode } interface SocialProof04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Stats to display */ stats?: StatItemConfig[] /** 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: 50000, suffix: "+", label: "Active Users", description: "Trust our platform daily", icon: , }, { id: "stat-countries", value: 120, suffix: "+", label: "Countries", description: "Global reach worldwide", icon: , }, { id: "stat-uptime", value: 99.9, suffix: "%", label: "Uptime", description: "Enterprise reliability", icon: , }, { id: "stat-rating", value: 4.9, suffix: "/5", label: "Rating", description: "From 10,000+ reviews", icon: , }, ] // ============================================================================ // HOOKS // ============================================================================ function useCountUp(end: number, duration: number = 2000) { const [count, setCount] = React.useState(0) const [isVisible, setIsVisible] = React.useState(false) const ref = React.useRef(null) React.useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) if (ref.current) { observer.observe(ref.current) } return () => observer.disconnect() }, []) React.useEffect(() => { if (!isVisible) return let startTime: number | null = null const startValue = 0 const animate = (timestamp: number) => { if (!startTime) startTime = timestamp const progress = Math.min((timestamp - startTime) / duration, 1) // Easing function for smooth animation const easeOutQuart = 1 - Math.pow(1 - progress, 4) const current = startValue + (end - startValue) * easeOutQuart setCount(current) if (progress < 1) { requestAnimationFrame(animate) } } requestAnimationFrame(animate) }, [end, duration, isVisible]) return { count, ref } } // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface StatCounterProps { stat: StatItemConfig } function StatCounter({ stat }: StatCounterProps) { const { count, ref } = useCountUp(stat.value) const formatValue = (value: number) => { if (stat.value >= 1000) { return Math.round(value).toLocaleString() } if (stat.value % 1 !== 0) { return value.toFixed(1) } return Math.round(value).toString() } return (

{stat.icon && (

{stat.icon}

)}

{stat.prefix} {formatValue(count)} {stat.suffix}

{stat.label}

{stat.description && (

{stat.description}

)}

) } // ============================================================================ // COMPONENT // ============================================================================ function SocialProof04({ heading = "Numbers that speak for themselves", description = "Join the thousands of companies transforming their business with our platform", stats = DEFAULT_STATS, className, idBase, }: SocialProof04Props) { const headingId = `${idBase ?? "social-proof-04"}-heading` return (

{heading}

{description && (

{description}

)}

{stats.map((stat) => ( ))}

) } export default SocialProof04 export { SocialProof04, type SocialProof04Props, type StatItemConfig }