{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-saas-metrics-dashboard",
  "title": "Hero Saas Metrics Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-saas-metrics-dashboard/HeroSaasMetricsDashboard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, CheckCircle2, Play, ShieldCheck, TrendingUp } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype Timeframe = 'live' | '24h' | '7d' | '30d'\n\ninterface MetricData {\n  mrr: string\n  growth: string\n  activeUsers: string\n  requests: string\n  chartPoints: number[]\n}\n\nconst metricsByTimeframe: Record<Timeframe, MetricData> = {\n  live: {\n    mrr: '$148,920',\n    growth: '+24.6%',\n    activeUsers: '14,280',\n    requests: '1.42M/min',\n    chartPoints: [28, 42, 36, 54, 48, 62, 78, 70, 85, 92, 88, 98],\n  },\n  '24h': {\n    mrr: '$146,800',\n    growth: '+18.2%',\n    activeUsers: '42,100',\n    requests: '84.6M',\n    chartPoints: [35, 38, 45, 52, 50, 68, 64, 75, 82, 80, 89, 94],\n  },\n  '7d': {\n    mrr: '$139,400',\n    growth: '+31.4%',\n    activeUsers: '185,400',\n    requests: '592M',\n    chartPoints: [20, 28, 35, 42, 55, 60, 72, 68, 80, 85, 90, 100],\n  },\n  '30d': {\n    mrr: '$124,100',\n    growth: '+44.1%',\n    activeUsers: '490,000',\n    requests: '2.4B',\n    chartPoints: [15, 22, 30, 38, 48, 58, 65, 74, 82, 88, 94, 105],\n  },\n}\n\nexport interface HeroSaasMetricsDashboardProps {\n  className?: string\n}\n\nexport function HeroSaasMetricsDashboard({ className }: HeroSaasMetricsDashboardProps) {\n  const [activeTimeframe, setActiveTimeframe] = React.useState<Timeframe>('live')\n  const activeMetric = metricsByTimeframe[activeTimeframe]\n\n  const chartSvgPath = React.useMemo(() => {\n    const points = activeMetric.chartPoints\n    const width = 500\n    const height = 120\n    const max = Math.max(...points)\n    const min = Math.min(...points)\n    const range = max - min || 1\n\n    return points\n      .map((val, idx) => {\n        const x = (idx / (points.length - 1)) * width\n        const y = height - ((val - min) / range) * (height - 20) - 10\n        return `${idx === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`\n      })\n      .join(' ')\n  }, [activeMetric.chartPoints])\n\n  const chartAreaPath = React.useMemo(() => {\n    return `${chartSvgPath} L 500 120 L 0 120 Z`\n  }, [chartSvgPath])\n\n  return (\n    <section\n      data-slot=\"hero-saas-metrics-dashboard\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      {/* Radial Glow Background */}\n      <div className=\"bg-primary/10 pointer-events-none absolute top-0 left-1/2 -z-10 h-80 w-full max-w-6xl -translate-x-1/2 rounded-full blur-xl\" />\n\n      <div className=\"mx-auto max-w-6xl space-y-12 text-center\">\n        {/* Header Copy */}\n        <div className=\"mx-auto max-w-3xl space-y-5\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <TrendingUp className=\"text-primary size-3.5\" />\n            Enterprise Revenue & Event Intelligence\n          </Badge>\n\n          <h1 className=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n            Real-time telemetry for modern engineering teams.\n          </h1>\n\n          <p className=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n            Monitor revenue acceleration, API transaction throughput, and compute workloads with sub-millisecond\n            precision.\n          </p>\n\n          {/* CTA Action Buttons */}\n          <div className=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n            <Button asChild size=\"lg\" className=\"gap-2 font-semibold shadow-xs\">\n              <a href=\"#start\">\n                <span>Start Free Sandbox</span>\n                <ArrowRight className=\"size-4\" />\n              </a>\n            </Button>\n\n            <Button asChild variant=\"outline\" size=\"lg\" className=\"gap-2 font-medium\">\n              <a href=\"#demo\">\n                <Play className=\"size-3.5 fill-current\" />\n                <span>Interactive Demo</span>\n              </a>\n            </Button>\n          </div>\n\n          <div className=\"text-muted-foreground flex items-center justify-center gap-6 pt-2 font-mono text-xs\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <ShieldCheck className=\"text-success size-4\" /> SOC2 Type II Certified\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <CheckCircle2 className=\"text-primary size-4\" /> 99.95% SLA Uptime\n            </span>\n          </div>\n        </div>\n\n        {/* Interactive SaaS Dashboard Preview Card */}\n        <div className=\"relative mx-auto max-w-5xl\">\n          <Card className=\"border-border bg-card overflow-hidden rounded-2xl text-left shadow-sm\">\n            {/* Mock Window Top Bar */}\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"flex gap-1.5\">\n                  <div className=\"bg-destructive/80 size-3 rounded-full\" />\n                  <div className=\"bg-warning/80 size-3 rounded-full\" />\n                  <div className=\"bg-success/80 size-3 rounded-full\" />\n                </div>\n                <span className=\"text-foreground font-mono text-xs font-medium\">console.uipkge.dev/production</span>\n              </div>\n\n              {/* Timeframe Filter Tabs */}\n              <div className=\"bg-background border-border flex items-center gap-1 rounded-lg border p-0.5\">\n                {(['live', '24h', '7d', '30d'] as Timeframe[]).map((tf) => (\n                  <button\n                    key={tf}\n                    type=\"button\"\n                    className={cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs uppercase transition-[color,background-color,transform] duration-150 active:scale-95',\n                      activeTimeframe === tf\n                        ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setActiveTimeframe(tf)}\n                  >\n                    {tf}\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            {/* Dashboard Metric Cards Grid */}\n            <div className=\"space-y-6 p-6 sm:p-8\">\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n                {/* MRR Card */}\n                <div className=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                  <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                    <span className=\"font-mono\">Recurring Revenue</span>\n                    <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                      {activeMetric.growth}\n                    </Badge>\n                  </div>\n                  <p className=\"text-foreground font-mono text-2xl font-bold\">{activeMetric.mrr}</p>\n                  <p className=\"text-muted-foreground text-xs\">Calculated across active subscriptions</p>\n                </div>\n\n                {/* Active Workloads Card */}\n                <div className=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                  <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                    <span className=\"font-mono\">Active Nodes & Pods</span>\n                    <span className=\"bg-success size-2 rounded-full\" />\n                  </div>\n                  <p className=\"text-foreground font-mono text-2xl font-bold\">{activeMetric.activeUsers}</p>\n                  <p className=\"text-muted-foreground text-xs\">Distributed across 8 global regions</p>\n                </div>\n\n                {/* Request Throughput Card */}\n                <div className=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                  <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                    <span className=\"font-mono\">Throughput</span>\n                    <TrendingUp className=\"text-primary size-3.5\" />\n                  </div>\n                  <p className=\"text-foreground font-mono text-2xl font-bold\">{activeMetric.requests}</p>\n                  <p className=\"text-muted-foreground text-xs\">Edge cached queries & websocket streams</p>\n                </div>\n              </div>\n\n              {/* Interactive Area Trend Chart */}\n              <div className=\"border-border bg-background/30 space-y-3 rounded-xl border p-5\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"text-muted-foreground font-mono text-xs uppercase\">\n                      Transaction Velocity & Event Stream\n                    </p>\n                    <p className=\"text-foreground text-sm font-semibold\">Global Ingestion Rate</p>\n                  </div>\n                  <span className=\"text-success font-mono text-xs font-medium\">99.998% Success</span>\n                </div>\n\n                {/* SVG Area Chart */}\n                <div className=\"relative h-28 w-full overflow-hidden\">\n                  <svg className=\"h-full w-full\" viewBox=\"0 0 500 120\" preserveAspectRatio=\"none\">\n                    <defs>\n                      <linearGradient id=\"chartGlowReact\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stopColor=\"var(--primary)\" stopOpacity=\"0.35\" />\n                        <stop offset=\"100%\" stopColor=\"var(--primary)\" stopOpacity=\"0.0\" />\n                      </linearGradient>\n                    </defs>\n                    {/* Gradient Area */}\n                    <path d={chartAreaPath} fill=\"url(#chartGlowReact)\" />\n                    {/* Stroke Line */}\n                    <path\n                      d={chartSvgPath}\n                      fill=\"none\"\n                      stroke=\"var(--primary)\"\n                      strokeWidth=\"2.5\"\n                      strokeLinecap=\"round\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default HeroSaasMetricsDashboard\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeroSaasMetricsDashboard.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "High-impact SaaS hero section with interactive timeframe filtering, live revenue and workload KPIs, and dynamic telemetry area chart.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}