{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/stats-3.tsx",
      "content": "'use client';\n\n\nimport { FaStar, FaBolt, FaServer, FaRocket } from 'react-icons/fa';\nimport { SiVercel, SiProducthunt } from 'react-icons/si';\n\nconst metrics = [\n  {\n    icon: FaServer,\n    iconColor: 'text-emerald-500',\n    value: '99.99%',\n    label: 'uptime SLA',\n  },\n  {\n    icon: FaRocket,\n    iconColor: 'text-blue-500',\n    value: '2.4M',\n    label: 'deployments',\n  },\n  {\n    icon: FaBolt,\n    iconColor: 'text-amber-500',\n    value: '<50ms',\n    label: 'avg latency',\n  },\n];\n\nconst endorsements = [\n  {\n    icon: SiProducthunt,\n    iconClass: 'text-orange-500',\n    score: '#1',\n    name: 'Product Hunt',\n  },\n  {\n    icon: FaStar,\n    iconClass: 'text-amber-400',\n    score: '4.8',\n    name: 'G2 Reviews',\n  },\n  { icon: SiVercel, iconClass: '', score: 'Featured', name: 'Vercel' },\n];\n\nexport default function Stats3() {\n  return (\n    <div className=\"flex h-full w-full items-center justify-center\">\n      <section className=\"group/section w-full px-4 py-16 md:px-8\">\n        <div className=\"mx-auto max-w-5xl text-center\">\n          <h2 className=\"text-foreground mt-4 text-4xl leading-[1.1] font-semibold tracking-tight md:text-5xl\">\n            Infrastructure that{' '}\n            <span className=\"relative z-10 inline font-bold after:absolute after:bottom-1 after:left-0 after:z-0 after:h-1.5 after:w-full after:origin-left after:scale-x-0 after:rounded-full after:bg-gradient-to-r after:from-indigo-500/20 after:to-purple-500/20 after:transition-transform after:duration-500 after:ease-out group-hover/section:after:scale-x-100 dark:after:from-indigo-500/50 dark:after:to-purple-500/50\">\n              scales with you\n            </span>\n          </h2>\n\n          <p className=\"text-muted-foreground mx-auto mt-3 max-w-lg text-base leading-relaxed\">\n            Battle-tested by engineering teams shipping to millions of users\n            every single day.\n          </p>\n\n          <div className=\"mt-10 flex flex-wrap justify-center gap-3\">\n            {metrics.map((m) => (\n              <div\n                key={m.label}\n                className=\"group from-muted to-muted/60 text-foreground relative flex cursor-default items-center gap-3 overflow-hidden rounded-2xl bg-gradient-to-b px-7 py-4 shadow-[inset_0_1px_0_0.5px_rgba(0,0,0,0.08),0px_0px_0px_1px_rgba(0,0,0,0),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)] transition-all duration-300 ease-out dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15)]\"\n              >\n                <div className=\"absolute inset-0 -translate-x-[200%] bg-gradient-to-r from-transparent via-white/50 to-transparent transition-transform duration-1500 group-hover:translate-x-[200%] dark:via-white/10\" />\n                <m.icon\n                  className={`size-6 transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3 ${m.iconColor}`}\n                />\n                <span className=\"text-2xl font-bold tracking-tight transition-all duration-500 ease-out group-hover:tracking-normal md:text-3xl\">\n                  {m.value}\n                </span>\n                <span className=\"text-muted-foreground text-sm font-medium\">\n                  {m.label}\n                </span>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"text-muted-foreground mt-8 flex flex-wrap items-center justify-center gap-2\">\n            {endorsements.map((e, index) => (\n              <div key={e.name} className=\"flex items-center\">\n                <div className=\"group hover:bg-muted/60 hover:text-foreground flex cursor-default items-center gap-2 rounded-lg px-3 py-1.5 text-sm transition-colors duration-300\">\n                  <e.icon\n                    className={`size-4 shrink-0 transition-transform duration-300 ease-out group-hover:scale-110 group-hover:-rotate-6 ${e.iconClass}`}\n                  />\n                  <span className=\"font-medium\">{e.score}</span>\n                  <span>{e.name}</span>\n                </div>\n                {index < endorsements.length - 1 && (\n                  <div className=\"bg-border mx-1 h-4 w-px\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/stats-3.tsx"
    }
  ],
  "type": "registry:ui"
}