{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-counter-block-shadcnui",
  "type": "registry:block",
  "title": "Stats Counter Block",
  "description": "Animated statistics counters with icons and gradient backgrounds",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/stats-counter-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion, useInView } from \"framer-motion\";\nimport { Award, Globe, TrendingUp, Users } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst stats = [\n  {\n    icon: Users,\n    value: 50000,\n    suffix: \"+\",\n    label: \"Active Users\",\n    description: \"Growing community worldwide\",\n    bgColor: \"bg-blue-500/10\",\n    iconColor: \"text-blue-500\",\n  },\n  {\n    icon: Globe,\n    value: 120,\n    suffix: \"+\",\n    label: \"Countries\",\n    description: \"Global reach and presence\",\n    bgColor: \"bg-green-500/10\",\n    iconColor: \"text-green-500\",\n  },\n  {\n    icon: TrendingUp,\n    value: 98,\n    suffix: \"%\",\n    label: \"Satisfaction Rate\",\n    description: \"Customer happiness score\",\n    bgColor: \"bg-purple-500/10\",\n    iconColor: \"text-purple-500\",\n  },\n  {\n    icon: Award,\n    value: 25,\n    suffix: \"+\",\n    label: \"Awards Won\",\n    description: \"Industry recognition\",\n    bgColor: \"bg-orange-500/10\",\n    iconColor: \"text-orange-500\",\n  },\n];\n\nfunction Counter({ value, suffix }: { value: number; suffix: string }) {\n  const [count, setCount] = useState(0);\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n\n  useEffect(() => {\n    if (isInView) {\n      let start = 0;\n      const end = value;\n      const duration = 2000;\n      const increment = end / (duration / 16);\n\n      const timer = setInterval(() => {\n        start += increment;\n        if (start >= end) {\n          setCount(end);\n          clearInterval(timer);\n        } else {\n          setCount(Math.floor(start));\n        }\n      }, 16);\n\n      return () => clearInterval(timer);\n    }\n  }, [isInView, value]);\n\n  return (\n    <span ref={ref}>\n      {count.toLocaleString()}\n      {suffix}\n    </span>\n  );\n}\n\nexport function StatsCounterBlock() {\n  return (\n    <section className=\"w-full bg-gradient-to-b from-background to-primary/5 px-4 py-16 md:py-24\">\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center md:mb-16\"\n        >\n          <Badge className=\"mb-4\" variant=\"secondary\">\n            Our Impact\n          </Badge>\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n            Numbers That Speak{\" \"}\n            <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\n              For Themselves\n            </span>\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-base text-muted-foreground md:text-lg\">\n            We&apos;re proud of the impact we&apos;ve made and the trust our\n            users place in us\n          </p>\n        </motion.div>\n\n        {/* Stats Grid */}\n        <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-2\">\n          {stats.map((stat, index) => {\n            const Icon = stat.icon;\n\n            return (\n              <motion.div\n                key={stat.label}\n                initial={{ opacity: 0, y: 30, scale: 0.9 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                transition={{\n                  delay: index * 0.1,\n                  duration: 0.5,\n                  type: \"spring\",\n                  stiffness: 100,\n                }}\n              >\n                <Card className=\"group relative overflow-hidden border-border/50 bg-card p-6 transition-all hover:border-primary/50 hover:shadow-2xl md:p-8\">\n                  {/* Gradient overlay */}\n                  <motion.div\n                    className={`absolute inset-0 ${stat.bgColor} opacity-50`}\n                    initial={{ opacity: 0 }}\n                    whileHover={{ opacity: 1 }}\n                    transition={{ duration: 0.3 }}\n                  />\n\n                  {/* Animated background circle */}\n                  <motion.div\n                    className={`absolute -right-8 -top-8 h-32 w-32 rounded-full ${stat.bgColor} opacity-50 blur-2xl`}\n                    animate={{\n                      scale: [1, 1.2, 1],\n                      rotate: [0, 90, 0],\n                    }}\n                    transition={{\n                      duration: 4,\n                      repeat: Infinity,\n                      ease: \"easeInOut\",\n                    }}\n                  />\n\n                  <div className=\"relative z-10\">\n                    {/* Icon */}\n                    <motion.div transition={{ duration: 0.6 }} className=\"mb-4\">\n                      <div className={`w-fit rounded-xl ${stat.bgColor} p-3`}>\n                        <Icon\n                          className={`h-6 w-6 ${stat.iconColor} md:h-8 md:w-8`}\n                        />\n                      </div>\n                    </motion.div>\n\n                    {/* Counter */}\n                    <motion.div\n                      className=\"mb-2 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\"\n                      initial={{ scale: 1 }}\n                      whileInView={{ scale: [1, 1.05, 1] }}\n                      transition={{ duration: 0.5 }}\n                      viewport={{ once: true }}\n                    >\n                      <Counter value={stat.value} suffix={stat.suffix} />\n                    </motion.div>\n\n                    {/* Label */}\n                    <h3 className=\"mb-1 text-base font-semibold md:text-lg\">\n                      {stat.label}\n                    </h3>\n\n                    {/* Description */}\n                    <p className=\"text-xs text-muted-foreground md:text-sm\">\n                      {stat.description}\n                    </p>\n                  </div>\n\n                  {/* Hover effect line */}\n                  <motion.div\n                    className={`absolute bottom-0 left-0 h-1 ${stat.iconColor.replace(\"text-\", \"bg-\")}`}\n                    initial={{ width: 0 }}\n                    whileHover={{ width: \"100%\" }}\n                    transition={{ duration: 0.3 }}\n                  />\n                </Card>\n              </motion.div>\n            );\n          })}\n        </div>\n\n        {/* Bottom Quote */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.8, duration: 0.5 }}\n          className=\"mt-12 text-center md:mt-16\"\n        >\n          <blockquote className=\"mx-auto max-w-2xl\">\n            <p className=\"mb-4 text-lg font-medium italic text-muted-foreground md:text-xl\">\n              &quot;These numbers represent real people, real businesses, and\n              real success stories. We&apos;re just getting started.&quot;\n            </p>\n            <footer className=\"text-sm font-semibold\">- Our CEO</footer>\n          </blockquote>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/stats-counter-block-shadcnui.tsx"
    }
  ]
}