"use client" import { useEffect, useRef, useState } from "react" // shadcn import { Button } from "@/components/ui/button" // third-party import { animate, motion, useInView } from "framer-motion" // assets import { ArrowRight, Briefcase, Globe, Heart, Users } from "lucide-react" const steps = [ { value: 360, suffix: "+", description: "Well Trained Staff", colorClass: "text-pink-500", icon: Users, }, { value: 14, suffix: "+", description: "Offices Worldwide", colorClass: "text-cyan-500", icon: Globe, }, { value: 1440, suffix: "+", description: "Completed Projects", colorClass: "text-lime-500", icon: Briefcase, }, { value: 56, suffix: "+", description: "Loyal Clients", colorClass: "text-amber-500", icon: Heart, }, ] function CountUp({ value, suffix }: { value: number; suffix?: string }) { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) const [display, setDisplay] = useState(0) useEffect(() => { if (!isInView) return const controls = animate(0, value, { duration: 2, ease: "easeOut", onUpdate: (latest) => setDisplay(Math.floor(latest)), }) return () => controls.stop() }, [isInView, value]) return ( {display.toLocaleString()} {suffix} ) } // ------------------------------ | STATISTICS 1 | ------------------------------ // export default function Statistics1() { return (

{/* background gradient effects */}

Statistics What Numbers Say

Discover how simple it is to integrate, configure, monitor, and scale your business operations with our next-generation SaaS platform.

{steps.map((step, idx) => (

{step.description}

))}

{/* Primary fill — gradient slides in on hover (see hero-12) */}

) }