4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T1755,import { useState, useEffect, useRef } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Trophy, Users, FolderOpen, Calendar } from 'lucide-react'; const stats = [ { icon: Calendar, value: 15, suffix: '+', label: 'Years Experience', description: 'Over a decade of industry leadership.', }, { icon: FolderOpen, value: 2500, suffix: '+', label: 'Projects Completed', description: 'Successfully delivered worldwide.', }, { icon: Users, value: 10000, suffix: '+', label: 'Happy Clients', description: 'From startups to Fortune 500 companies.', }, { icon: Trophy, value: 150, suffix: '+', label: 'Industry Awards', description: 'Recognized for design and innovation excellence.', }, ]; export default function AboutSectionAnimatedStats() { const [isVisible, setIsVisible] = useState(false); const sectionRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry!.isIntersecting) { setIsVisible(true); observer.unobserve(entry!.target); } }, { threshold: 0.2 } ); if (sectionRef.current) { observer.observe(sectionRef.current); } return () => { if (sectionRef.current) { observer.unobserve(sectionRef.current); } }; }, []); return (

Our Achievements

Milestones That Define Our Journey

Over the years, we've achieved remarkable success by focusing on delivering exceptional value to our clients and building lasting relationships.

{stats.map((stat) => (

{stat.suffix}

{stat.label}

{stat.description}

))}

Our Story Continues

While we take pride in these achievements, our journey is ongoing. We remain dedicated to innovation, quality, and creating meaningful impact for our clients and communities worldwide.

Every day, we strive to exceed expectations and set new standards of excellence in everything we do.

Growing Team

250+

Talented professionals across the globe

Global Reach

30+

Countries with active client projects

); } // Animated counter component interface AnimatedCounterProps { value: number; isVisible: boolean; duration: number; } function AnimatedCounter({ value, isVisible, duration }: AnimatedCounterProps) { const [count, setCount] = useState(0); const stepRef = useRef(0); const countRef = useRef(0); useEffect(() => { if (!isVisible) return; const steps = 60; const increment = value / steps; const intervalTime = duration / steps; stepRef.current = 0; countRef.current = 0; const interval = setInterval(() => { stepRef.current += 1; const newCount = Math.min(Math.round(stepRef.current * increment), value); if (countRef.current !== newCount) { countRef.current = newCount; setCount(newCount); } if (stepRef.current >= steps || newCount >= value) { clearInterval(interval); setCount(value); } }, intervalTime); return () => clearInterval(interval); }, [isVisible, value, duration]); return {count}; } 52:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-about-sections-animated-stats.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-about-sections-animated-stats","itemId":"@shadcn-ui-blocks/marketing-about-sections-animated-stats"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/blocks/marketing/about-sections/animated-stats.tsx","content":"$51","type":"registry:component","target":"components/blocks/marketing/about-sections/animated-stats.tsx"},{"path":"components/ui/card.tsx","content":"$52","type":"registry:ui","target":"components/ui/card.tsx"}]}]]}],"$L53"]}]

Animated Stats

Installation

Files

components

Styles