{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-saas-metrics-dashboard",
  "title": "Hero Saas Metrics Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-saas-metrics-dashboard/HeroSaasMetricsDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, CheckCircle2, Play, ShieldCheck, TrendingUp } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\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\nconst activeTimeframe = ref<Timeframe>('live')\nconst activeMetric = computed(() => metricsByTimeframe[activeTimeframe.value])\n\nconst chartSvgPath = computed(() => {\n  const points = activeMetric.value.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})\n\nconst chartAreaPath = computed(() => {\n  return `${chartSvgPath.value} L 500 120 L 0 120 Z`\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-saas-metrics-dashboard\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Radial Glow Background -->\n    <div\n      class=\"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\n    <div class=\"mx-auto max-w-6xl space-y-12 text-center\">\n      <!-- Header Copy -->\n      <div class=\"mx-auto max-w-3xl space-y-5\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <TrendingUp class=\"text-primary size-3.5\" />\n          Enterprise Revenue & Event Intelligence\n        </Badge>\n\n        <h1 class=\"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 class=\"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 class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button as=\"a\" href=\"#start\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\">\n            <span>Start Free Sandbox</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n\n          <Button as=\"a\" href=\"#demo\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <Play class=\"size-3.5 fill-current\" />\n            <span>Interactive Demo</span>\n          </Button>\n        </div>\n\n        <div class=\"text-muted-foreground flex items-center justify-center gap-6 pt-2 font-mono text-xs\">\n          <span class=\"inline-flex items-center gap-1.5\">\n            <ShieldCheck class=\"text-success size-4\" /> SOC2 Type II Certified\n          </span>\n          <span class=\"inline-flex items-center gap-1.5\">\n            <CheckCircle2 class=\"text-primary size-4\" /> 99.95% SLA Uptime\n          </span>\n        </div>\n      </div>\n\n      <!-- Interactive SaaS Dashboard Preview Card -->\n      <div class=\"relative mx-auto max-w-5xl\">\n        <Card class=\"border-border bg-card overflow-hidden rounded-2xl text-left shadow-sm\">\n          <!-- Mock Window Top Bar -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"flex gap-1.5\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\" />\n                <div class=\"bg-warning/80 size-3 rounded-full\" />\n                <div class=\"bg-success/80 size-3 rounded-full\" />\n              </div>\n              <span class=\"text-foreground font-mono text-xs font-medium\">console.uipkge.dev/production</span>\n            </div>\n\n            <!-- Timeframe Filter Tabs -->\n            <div class=\"bg-background border-border flex items-center gap-1 rounded-lg border p-0.5\">\n              <button\n                v-for=\"tf in ['live', '24h', '7d', '30d'] as Timeframe[]\"\n                :key=\"tf\"\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-1 font-mono text-xs uppercase transition-[color,background-color,transform] duration-150 active:scale-95\"\n                :class=\"\n                  activeTimeframe === tf\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeTimeframe = tf\"\n              >\n                {{ tf }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Dashboard Metric Cards Grid -->\n          <div class=\"space-y-6 p-6 sm:p-8\">\n            <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n              <!-- MRR Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Recurring Revenue</span>\n                  <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                    {{ activeMetric.growth }}\n                  </Badge>\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.mrr }}</p>\n                <p class=\"text-muted-foreground text-xs\">Calculated across active subscriptions</p>\n              </div>\n\n              <!-- Active Workloads Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Active Nodes & Pods</span>\n                  <span class=\"bg-success size-2 rounded-full\" />\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.activeUsers }}</p>\n                <p class=\"text-muted-foreground text-xs\">Distributed across 8 global regions</p>\n              </div>\n\n              <!-- Request Throughput Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Throughput</span>\n                  <TrendingUp class=\"text-primary size-3.5\" />\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.requests }}</p>\n                <p class=\"text-muted-foreground text-xs\">Edge cached queries & websocket streams</p>\n              </div>\n            </div>\n\n            <!-- Interactive Area Trend Chart -->\n            <div class=\"border-border bg-background/30 space-y-3 rounded-xl border p-5\">\n              <div class=\"flex items-center justify-between\">\n                <div>\n                  <p class=\"text-muted-foreground font-mono text-xs uppercase\">Transaction Velocity & Event Stream</p>\n                  <p class=\"text-foreground text-sm font-semibold\">Global Ingestion Rate</p>\n                </div>\n                <span class=\"text-success font-mono text-xs font-medium\">99.998% Success</span>\n              </div>\n\n              <!-- SVG Area Chart -->\n              <div class=\"relative h-28 w-full overflow-hidden\">\n                <svg class=\"h-full w-full\" viewBox=\"0 0 500 120\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"chartGlow\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stop-color=\"var(--primary)\" stop-opacity=\"0.35\" />\n                      <stop offset=\"100%\" stop-color=\"var(--primary)\" stop-opacity=\"0.0\" />\n                    </linearGradient>\n                  </defs>\n                  <!-- Gradient Area -->\n                  <path :d=\"chartAreaPath\" fill=\"url(#chartGlow)\" />\n                  <!-- Stroke Line -->\n                  <path\n                    :d=\"chartSvgPath\"\n                    fill=\"none\"\n                    stroke=\"var(--primary)\"\n                    stroke-width=\"2.5\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeroSaasMetricsDashboard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
}