{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-4",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/stats-4.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useState } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  ArrowUpRight,\n  Activity,\n  Zap,\n  ShieldCheck,\n  ChevronRight,\n  Sparkles,\n} from \"lucide-react\";\n\nfunction GlowingBorderCard({\n  children,\n  className,\n  glowColor,\n  repeatingGradient,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  glowColor: string;\n  repeatingGradient: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const [opacity, setOpacity] = useState(0);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!ref.current) return;\n    const rect = ref.current.getBoundingClientRect();\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n  };\n\n  return (\n    <div\n      ref={ref}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setOpacity(1)}\n      onMouseLeave={() => setOpacity(0)}\n      className={`bg-border/40 relative rounded-2xl p-[2px] ${className || \"\"}`}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300\"\n        style={{\n          opacity,\n          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${glowColor}, transparent 40%)`,\n        }}\n      />\n\n      <div className=\"bg-background relative z-10 h-full overflow-hidden rounded-2xl\">\n        <div\n          className=\"pointer-events-none absolute inset-0 opacity-30 dark:opacity-50\"\n          style={{ background: repeatingGradient }}\n        />\n\n        <div className=\"to-background/80 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent\" />\n\n        <div className=\"relative z-20 flex h-full flex-col justify-between p-8\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function FinanceSplitSection() {\n  return (\n    <section className=\"theme-injected bg-background relative w-full px-4 py-24 md:px-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid grid-cols-1 items-center gap-16 lg:grid-cols-12\">\n          <div className=\"flex flex-col gap-8 lg:col-span-5\">\n            <div className=\"inline-flex\">\n              <Badge\n                variant=\"secondary\"\n                className=\"flex w-fit items-center gap-2 rounded-full px-4 py-1.5 text-sm\"\n              >\n                <Sparkles className=\"text-foreground h-4 w-4\" />\n                <span className=\"text-foreground font-medium\">\n                  Next-Gen Fintech\n                </span>\n              </Badge>\n            </div>\n\n            <h2 className=\"text-foreground text-5xl leading-[1.05] font-bold tracking-tight md:text-6xl lg:text-7xl\">\n              Elevate your <br className=\"hidden md:block\" />\n              financial ops\n            </h2>\n\n            <p className=\"text-muted-foreground max-w-md text-lg leading-relaxed\">\n              Harness real-time data to automate reconciliation, forecast with\n              precision, and empower your organization to move at the speed of\n              thought.\n            </p>\n\n            <div className=\"flex flex-wrap items-center gap-4 pt-2\">\n              <button className=\"bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center justify-center gap-2 rounded-lg px-6 py-3 text-sm font-semibold transition-colors\">\n                Start building\n              </button>\n              <button className=\"border-border bg-background text-foreground hover:bg-muted inline-flex items-center justify-center gap-2 rounded-lg border px-6 py-3 text-sm font-semibold transition-colors\">\n                View demo\n                <ArrowUpRight className=\"h-4 w-4\" />\n              </button>\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:col-span-7\">\n            <GlowingBorderCard\n              glowColor=\"rgba(59, 130, 246, 0.8)\"\n              repeatingGradient=\"repeating-linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.15) 15px, transparent 15px, transparent 30px)\"\n            >\n              <div>\n                <div className=\"bg-background text-foreground border-border/50 mb-6 flex h-10 w-10 items-center justify-center rounded-lg border shadow-sm\">\n                  <Activity className=\"h-5 w-5 text-blue-500\" />\n                </div>\n                <div className=\"text-foreground mb-2 text-5xl font-bold tracking-tight\">\n                  99.9\n                  <span className=\"text-muted-foreground ml-1 text-2xl\">%</span>\n                </div>\n                <h3 className=\"text-foreground mb-2 text-base font-semibold\">\n                  Automated Accuracy\n                </h3>\n              </div>\n              <p className=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n                Eliminate manual entry errors with AI-driven reconciliation that\n                categorizes transactions instantly.\n              </p>\n            </GlowingBorderCard>\n\n            <GlowingBorderCard\n              glowColor=\"rgba(168, 85, 247, 0.8)\"\n              repeatingGradient=\"repeating-linear-gradient(-45deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.15) 15px, transparent 15px, transparent 30px)\"\n            >\n              <div>\n                <div className=\"bg-background text-foreground border-border/50 mb-6 flex h-10 w-10 items-center justify-center rounded-lg border shadow-sm\">\n                  <Zap className=\"h-5 w-5 text-purple-500\" />\n                </div>\n                <div className=\"text-foreground mb-2 text-5xl font-bold tracking-tight\">\n                  10\n                  <span className=\"text-muted-foreground ml-1 text-2xl\">x</span>\n                </div>\n                <h3 className=\"text-foreground mb-2 text-base font-semibold\">\n                  Faster Audits\n                </h3>\n              </div>\n              <p className=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n                Prepare for audits in hours, not weeks. All documents are\n                cross-linked and cryptographically verified.\n              </p>\n            </GlowingBorderCard>\n\n            <GlowingBorderCard\n              className=\"sm:col-span-2\"\n              glowColor=\"rgba(16, 185, 129, 0.8)\"\n              repeatingGradient=\"repeating-linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.15) 15px, transparent 15px, transparent 30px)\"\n            >\n              <div className=\"flex w-full flex-col items-start gap-8 sm:flex-row sm:items-center\">\n                <div className=\"flex-1\">\n                  <div className=\"bg-background text-foreground border-border/50 mb-6 flex h-10 w-10 items-center justify-center rounded-lg border shadow-sm\">\n                    <ShieldCheck className=\"h-5 w-5 text-emerald-500\" />\n                  </div>\n                  <div className=\"text-foreground mb-2 text-5xl font-bold tracking-tight md:text-6xl\">\n                    $500\n                    <span className=\"text-muted-foreground ml-1 text-3xl\">\n                      k+\n                    </span>\n                  </div>\n                  <h3 className=\"text-foreground text-base font-semibold\">\n                    Average Annual Savings\n                  </h3>\n                </div>\n                <div className=\"flex-1\">\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    By catching duplicate invoices, predicting cashflow\n                    bottlenecks, and enforcing smart policies, our average\n                    enterprise customer saves over half a million dollars in\n                    their first year alone.\n                  </p>\n\n                  <div className=\"text-foreground mt-6 inline-flex cursor-pointer items-center gap-1.5 text-sm font-medium hover:underline\">\n                    Read the case study <ChevronRight className=\"h-4 w-4\" />\n                  </div>\n                </div>\n              </div>\n            </GlowingBorderCard>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/stats-4.tsx"
    }
  ],
  "type": "registry:ui"
}