{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-section-shadcnui",
  "type": "registry:page",
  "title": "Stats Section",
  "description": "Animated statistics section with cards and counters",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/stats-section.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport {\n  motion,\n  useInView,\n  useReducedMotion,\n  type Variants,\n} from \"framer-motion\";\nimport { Award, TrendingUp, Users, Zap } from \"lucide-react\";\nimport { useId, useMemo, useRef } from \"react\";\n\nconst stats = [\n  {\n    icon: Users,\n    value: \"52K+\",\n    label: \"Active teams\",\n    description: \"Shipping motion-led products every month.\",\n  },\n  {\n    icon: TrendingUp,\n    value: \"99.97%\",\n    label: \"Realtime uptime\",\n    description: \"Glassmorphic dashboards without the downtime.\",\n  },\n  {\n    icon: Award,\n    value: \"162\",\n    label: \"Industry launches\",\n    description: \"Recognized experiences powered by our system.\",\n  },\n  {\n    icon: Zap,\n    value: \"1,240+\",\n    label: \"Reusable primitives\",\n    description: \"Motion-ready components ready for your stack.\",\n  },\n];\n\nexport function StatsSection() {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isInView = useInView(ref, { once: true, margin: \"-20% 0px\" });\n  const shouldReduceMotion = useReducedMotion();\n\n  const headingId = useId();\n  const descriptionId = useMemo(() => `${headingId}-description`, [headingId]);\n\n  const containerVariants: Variants = useMemo(\n    () => ({\n      hidden: {\n        opacity: shouldReduceMotion ? 1 : 0,\n        y: shouldReduceMotion ? 0 : 24,\n      },\n      visible: {\n        opacity: 1,\n        y: 0,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : {\n              duration: 0.6,\n              ease: \"easeOut\",\n              staggerChildren: 0.14,\n              delayChildren: 0.12,\n            },\n      },\n    }),\n    [shouldReduceMotion]\n  );\n\n  const cardVariants: Variants = useMemo(\n    () => ({\n      hidden: {\n        opacity: shouldReduceMotion ? 1 : 0,\n        y: shouldReduceMotion ? 0 : 28,\n        filter: shouldReduceMotion ? \"none\" : \"blur(6px)\",\n      },\n      visible: {\n        opacity: 1,\n        y: 0,\n        filter: \"none\",\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : { type: \"spring\", mass: 0.8, stiffness: 160, damping: 24 },\n      },\n    }),\n    [shouldReduceMotion]\n  );\n\n  const iconVariants: Variants = useMemo(\n    () => ({\n      hidden: {\n        scale: shouldReduceMotion ? 1 : 0.6,\n        opacity: shouldReduceMotion ? 1 : 0,\n      },\n      visible: {\n        scale: 1,\n        opacity: 1,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : { duration: 0.45, ease: [0.18, 0.89, 0.32, 1.28] },\n      },\n    }),\n    [shouldReduceMotion]\n  );\n\n  return (\n    <section\n      ref={ref}\n      aria-labelledby={headingId}\n      aria-describedby={descriptionId}\n      className=\"relative overflow-hidden bg-background px-6 py-24 sm:px-8 lg:px-16\"\n    >\n      <div className=\"pointer-events-none absolute inset-0 -z-10\">\n        <motion.div\n          className=\"absolute left-1/2 top-10 h-[420px] w-[420px] -translate-x-1/2 rounded-full bg-foreground/[0.04] blur-[160px]\"\n          {...(shouldReduceMotion\n            ? {}\n            : {\n                animate: {\n                  opacity: [0.25, 0.55, 0.25],\n                  scale: [0.92, 1.08, 0.95],\n                },\n                transition: {\n                  duration: 10,\n                  repeat: Infinity,\n                  ease: \"easeInOut\",\n                },\n              })}\n        />\n        <motion.div\n          className=\"absolute bottom-[-12%] right-[-8%] h-[380px] w-[380px] rounded-full bg-primary/[0.04] blur-[150px]\"\n          {...(shouldReduceMotion\n            ? {}\n            : {\n                animate: { opacity: [0.2, 0.45, 0.2], rotate: [0, 10, 0] },\n                transition: { duration: 12, repeat: Infinity, ease: \"linear\" },\n              })}\n        />\n      </div>\n\n      <motion.div\n        variants={containerVariants}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        className=\"mx-auto flex w-full max-w-6xl flex-col items-center text-center\"\n      >\n        <motion.div className=\"space-y-5\">\n          <motion.span className=\"inline-flex items-center gap-3 rounded-full border border-border/40 bg-background/50 px-5 py-2 text-xs uppercase tracking-[0.25em] text-foreground/70 backdrop-blur\">\n            Proof in metrics\n            <span\n              className=\"h-1.5 w-1.5 rounded-full bg-primary\"\n              aria-hidden=\"true\"\n            />\n          </motion.span>\n          <motion.h2\n            id={headingId}\n            className=\"text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl\"\n          >\n            Trusted glassmorphism at product scale\n          </motion.h2>\n          <motion.p\n            id={descriptionId}\n            className=\"mx-auto max-w-3xl text-sm text-foreground/70 sm:text-base md:text-lg\"\n          >\n            Teams ship faster when motion, accessibility, and theming live in\n            the same toolkit. Here are the signals that matter.\n          </motion.p>\n        </motion.div>\n\n        <motion.ul\n          variants={containerVariants}\n          role=\"list\"\n          className=\"mt-14 grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2\"\n        >\n          {stats.map((stat, index) => {\n            const Icon = stat.icon;\n            return (\n              <motion.li\n                key={stat.label}\n                variants={cardVariants}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : {\n                        delay: index * 0.08,\n                        type: \"spring\",\n                        stiffness: 150,\n                        damping: 20,\n                      }\n                }\n                className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg focus-within:border-border/60\"\n              >\n                <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100\" />\n                <Card className=\"relative h-full border-0 bg-transparent p-6 text-left sm:p-7\">\n                  <motion.span\n                    variants={iconVariants}\n                    className=\"inline-flex h-12 w-12 items-center justify-center rounded-xl border border-primary/30 bg-primary/20 text-primary\"\n                    aria-hidden=\"true\"\n                  >\n                    <Icon className=\"h-5 w-5\" />\n                  </motion.span>\n                  <dl className=\"mt-6 space-y-3\">\n                    <div>\n                      <dt className=\"sr-only\">{stat.label}</dt>\n                      <dd className=\"text-3xl font-semibold text-foreground sm:text-4xl\">\n                        {stat.value}\n                      </dd>\n                    </div>\n                    <div className=\"space-y-1\">\n                      <dd className=\"text-xs font-semibold uppercase tracking-[0.3em] text-foreground/70\">\n                        {stat.label}\n                      </dd>\n                      <dd className=\"text-sm leading-relaxed text-foreground/70\">\n                        {stat.description}\n                      </dd>\n                    </div>\n                  </dl>\n                </Card>\n              </motion.li>\n            );\n          })}\n        </motion.ul>\n      </motion.div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/stats-section-shadcnui.tsx"
    }
  ]
}