"use client" import { useRef, useEffect, useState } from "react" // third-party import { motion, useInView, useMotionValue, useSpring, type Variants, } from "framer-motion" // JSON Stats Data export interface StatItem { id: string value: number prefix?: string suffix?: string decimals?: number label: string } export const statsData: StatItem[] = [ { id: "uptime", value: 99.9, suffix: "%", decimals: 1, label: "Uptime Guaranteed", }, { id: "volume", prefix: "$", value: 2.5, suffix: "M+", decimals: 1, label: "Monthly Volume", }, { id: "integrations", value: 150, suffix: "+", decimals: 0, label: "Integrations", }, { id: "rating", value: 4.9, suffix: "/5", decimals: 1, label: "User Rating", }, ] // Animated Counter Component function AnimatedCounter({ value, prefix = "", suffix = "", decimals = 0, }: { value: number prefix?: string suffix?: string decimals?: number }) { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-40px" }) const motionValue = useMotionValue(0) const springValue = useSpring(motionValue, { damping: 35, stiffness: 90, }) const [displayValue, setDisplayValue] = useState( `${prefix}0${decimals > 0 ? "." + "0".repeat(decimals) : ""}${suffix}` ) useEffect(() => { if (isInView) { motionValue.set(value) } }, [isInView, value, motionValue]) useEffect(() => { return springValue.on("change", (latest) => { setDisplayValue(`${prefix}${latest.toFixed(decimals)}${suffix}`) }) }, [springValue, decimals, prefix, suffix]) return {displayValue} } const fadeIn: Variants = { hidden: { opacity: 0, y: 25 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" }, }, } const staggerContainer: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.12, }, }, } export default function Statistics11() { return (

{statsData.map((item) => (

{item.label}

))}

) }