{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/stats-2.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { FaBolt, FaRocket, FaShieldAlt } from \"react-icons/fa\";\n\nconst stats = [\n  {\n    icon: FaBolt,\n    gradientFrom: \"from-amber-400\",\n    gradientTo: \"to-orange-500\",\n    pillBg: \"bg-amber-500/10\",\n    pillText: \"text-amber-600\",\n    glowColor: \"rgba(245,158,11,0.15)\",\n    accentGradient: \"from-amber-400 via-orange-400 to-rose-400\",\n    label: \"Lines shipped per sprint\",\n    metric: \"2.4M\",\n    subLabel: \"Across all repos\",\n    description:\n      \"Engineering teams push more high-quality code with automated reviews and instant CI feedback loops.\",\n  },\n  {\n    icon: FaRocket,\n    gradientFrom: \"from-cyan-400\",\n    gradientTo: \"to-blue-500\",\n    pillBg: \"bg-cyan-500/10\",\n    pillText: \"text-cyan-600\",\n    glowColor: \"rgba(6,182,212,0.15)\",\n    accentGradient: \"from-cyan-400 via-blue-400 to-indigo-400\",\n    label: \"Deploys per day on average\",\n    metric: \"12x\",\n    subLabel: \"Faster releases\",\n    description:\n      \"Zero-downtime deploys with canary rollouts mean your team ships confidently, every single day.\",\n  },\n  {\n    icon: FaShieldAlt,\n    gradientFrom: \"from-emerald-400\",\n    gradientTo: \"to-teal-500\",\n    pillBg: \"bg-emerald-500/10\",\n    pillText: \"text-emerald-600\",\n    glowColor: \"rgba(16,185,129,0.15)\",\n    accentGradient: \"from-emerald-400 via-teal-400 to-cyan-400\",\n    label: \"Platform uptime guaranteed\",\n    metric: \"99.9%\",\n    subLabel: \"Reliability score\",\n    description:\n      \"Built on geo-distributed infrastructure with automatic failover — trusted by teams who never sleep.\",\n  },\n];\n\nexport default function Stats2() {\n  return (\n    <>\n      <style>{`\n        @keyframes shimmer {\n          0% { background-position: -200% 0; }\n          100% { background-position: 200% 0; }\n        }\n        @keyframes float {\n          0%, 100% { transform: translateY(0px); }\n          50% { transform: translateY(-4px); }\n        }\n        @keyframes pulse-glow {\n          0%, 100% { opacity: 0; }\n          50% { opacity: 1; }\n        }\n        @keyframes gradient-shift {\n          0% { background-position: 0% 50%; }\n          50% { background-position: 100% 50%; }\n          100% { background-position: 0% 50%; }\n        }\n        @keyframes metric-in {\n          0% { opacity: 0; transform: translateY(12px) scale(0.96); }\n          100% { opacity: 1; transform: translateY(0) scale(1); }\n        }\n        .stat-card {\n          transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card:hover .accent-bar {\n          height: 100% !important;\n          top: 0 !important;\n          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card .accent-bar {\n          transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card:hover .card-glow {\n          opacity: 1;\n        }\n        .card-glow {\n          transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card:hover .metric-value {\n          animation: float 3s ease-in-out infinite;\n        }\n        .stat-card:hover .pill-badge {\n          transform: scale(1.03);\n          box-shadow: 0 0 0 1px currentColor;\n        }\n        .pill-badge {\n          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card:hover .shimmer-line {\n          animation: shimmer 2s linear infinite;\n          background-size: 200% 100%;\n        }\n        .stat-card:hover .stat-icon {\n          transform: rotate(-8deg) scale(1.15);\n        }\n        .stat-icon {\n          transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n        }\n        .stat-card:hover .desc-text {\n          color: var(--foreground);\n        }\n        .desc-text {\n          transition: color 0.4s ease;\n        }\n      `}</style>\n\n      <section className=\"theme-injected w-full px-4 py-16 md:px-8\">\n        <div className=\"mx-auto max-w-6xl text-center\">\n          <h2 className=\"text-foreground mt-8 text-4xl leading-[1.1] font-bold tracking-tight md:text-5xl lg:text-[3.5rem]\">\n            Built for teams that\n            <span className=\"block bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 bg-clip-text text-transparent\">\n              ship relentlessly\n            </span>\n          </h2>\n\n          <p className=\"text-muted-foreground mx-auto mt-5 max-w-xl text-base leading-relaxed md:text-lg\">\n            Stop drowning in tooling overhead. One platform to code, deploy, and\n            monitor — so engineers can focus on building.\n          </p>\n\n          <div className=\"mt-16 grid grid-cols-1 gap-5 md:grid-cols-3\">\n            {stats.map((stat) => (\n              <Card\n                key={stat.label}\n                className=\"stat-card group bg-background relative overflow-hidden rounded-none p-0 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)] ring-0 transition-shadow duration-300 hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_4px_4px_0px_rgba(0,0,0,0.1)]\"\n              >\n                <div\n                  className=\"card-glow pointer-events-none absolute inset-0 rounded-none opacity-0\"\n                  style={{\n                    background: `radial-gradient(600px circle at 50% 0%, ${stat.glowColor}, transparent 60%)`,\n                  }}\n                />\n\n                <div\n                  className={`accent-bar absolute top-[20%] left-0 h-[60%] w-[3px] rounded-full bg-gradient-to-b ${stat.accentGradient}`}\n                />\n\n                <CardContent className=\"relative flex h-full flex-col p-7 text-left\">\n                  <div className=\"flex items-center\">\n                    <span\n                      className={`pill-badge inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-semibold tracking-wide uppercase ${stat.pillBg} ${stat.pillText}`}\n                    >\n                      <stat.icon className=\"stat-icon size-3\" />\n                      {stat.label}\n                    </span>\n                  </div>\n\n                  <div className=\"mt-8 flex items-baseline gap-1\">\n                    <span className=\"metric-value text-foreground text-6xl font-bold tracking-tighter\">\n                      {stat.metric}\n                    </span>\n                  </div>\n\n                  <div className=\"mt-4 flex items-center gap-2\">\n                    <div\n                      className={`shimmer-line h-[2px] w-8 rounded-full bg-gradient-to-r ${stat.accentGradient}`}\n                      style={{\n                        backgroundImage: `linear-gradient(90deg, transparent, currentColor, transparent)`,\n                      }}\n                    />\n                    <p className=\"text-foreground text-sm font-medium\">\n                      {stat.subLabel}\n                    </p>\n                  </div>\n\n                  <p className=\"desc-text text-muted-foreground mt-6 text-sm leading-relaxed\">\n                    {stat.description}\n                  </p>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </div>\n      </section>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/stats-2.tsx"
    }
  ],
  "type": "registry:ui"
}