{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-about-sections-animated-stats","type":"registry:block","title":"Animated Stats","files":[{"path":"components/blocks/marketing/about-sections/animated-stats.tsx","content":"import { useState, useEffect, useRef } from 'react';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Trophy, Users, FolderOpen, Calendar } from 'lucide-react';\n\nconst stats = [\n {\n icon: Calendar,\n value: 15,\n suffix: '+',\n label: 'Years Experience',\n description: 'Over a decade of industry leadership.',\n },\n {\n icon: FolderOpen,\n value: 2500,\n suffix: '+',\n label: 'Projects Completed',\n description: 'Successfully delivered worldwide.',\n },\n {\n icon: Users,\n value: 10000,\n suffix: '+',\n label: 'Happy Clients',\n description: 'From startups to Fortune 500 companies.',\n },\n {\n icon: Trophy,\n value: 150,\n suffix: '+',\n label: 'Industry Awards',\n description: 'Recognized for design and innovation excellence.',\n },\n];\n\nexport default function AboutSectionAnimatedStats() {\n const [isVisible, setIsVisible] = useState(false);\n const sectionRef = useRef(null);\n\n useEffect(() => {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry!.isIntersecting) {\n setIsVisible(true);\n observer.unobserve(entry!.target);\n }\n },\n { threshold: 0.2 }\n );\n\n if (sectionRef.current) {\n observer.observe(sectionRef.current);\n }\n\n return () => {\n if (sectionRef.current) {\n observer.unobserve(sectionRef.current);\n }\n };\n }, []);\n\n return (\n \n
\n
\n Our Achievements\n
\n

\n Milestones That Define Our Journey\n

\n

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

\n
\n\n
\n {stats.map((stat) => (\n \n \n
\n \n
\n

\n \n {stat.suffix}\n

\n
\n

{stat.label}

\n

\n {stat.description}\n

\n
\n \n \n ))}\n
\n\n
\n
\n
\n

Our Story Continues

\n

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

\n

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

\n
\n
\n
\n

Growing Team

\n

250+

\n

\n Talented professionals across the globe\n

\n
\n
\n

Global Reach

\n

30+

\n

\n Countries with active client projects\n

\n
\n
\n
\n
\n \n );\n}\n\n// Animated counter component\ninterface AnimatedCounterProps {\n value: number;\n isVisible: boolean;\n duration: number;\n}\n\nfunction AnimatedCounter({ value, isVisible, duration }: AnimatedCounterProps) {\n const [count, setCount] = useState(0);\n const stepRef = useRef(0);\n const countRef = useRef(0);\n\n useEffect(() => {\n if (!isVisible) return;\n\n const steps = 60;\n const increment = value / steps;\n const intervalTime = duration / steps;\n\n stepRef.current = 0;\n countRef.current = 0;\n\n const interval = setInterval(() => {\n stepRef.current += 1;\n const newCount = Math.min(Math.round(stepRef.current * increment), value);\n\n if (countRef.current !== newCount) {\n countRef.current = newCount;\n setCount(newCount);\n }\n\n if (stepRef.current >= steps || newCount >= value) {\n clearInterval(interval);\n setCount(value);\n }\n }, intervalTime);\n\n return () => clearInterval(interval);\n }, [isVisible, value, duration]);\n\n return {count};\n}\n","type":"registry:component","target":"components/blocks/marketing/about-sections/animated-stats.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n 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\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"}],"description":"Headline metrics that count up as they scroll into view. Drop it on an about page to make growth, users, and revenue feel alive and concrete.","dependencies":["lucide-react"]}