{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-marketing",
  "type": "registry:component",
  "title": "Status marketing",
  "description": "A status marketing section with an incident banner, operational badge, gradient headline and uptime bars for showing off reliability on a public page.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/incident-banner.json",
    "https://ui.minidev.pro/r/masked-gradient-headline.json",
    "https://ui.minidev.pro/r/status-badge.json",
    "https://ui.minidev.pro/r/uptime-bar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/status-marketing.tsx",
      "type": "registry:ui",
      "target": "components/ui/status-marketing.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { UptimeBar } from \"@/components/ui/uptime-bar\"\nimport { IncidentBanner } from \"@/components/ui/incident-banner\"\nimport { StatusBadge } from \"@/components/ui/status-badge\"\nimport { MaskedGradientHeadline } from \"@/components/ui/masked-gradient-headline\"\n\nfunction StatusMarketing({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"status-marketing\" data-tier=\"premium\" className={cn(\"space-y-8\", className)}>\n      <IncidentBanner title=\"All systems nominal — demo banner\" severity=\"minor\" />\n      <div className=\"space-y-3 px-2\">\n        <StatusBadge tone=\"success\">Operational</StatusBadge>\n        <MaskedGradientHeadline>Uptime you can screenshot.</MaskedGradientHeadline>\n        <motion.p initial={reduce ? false : { y: 8 }} whileInView={{ y: 0 }} viewport={{ once: true }} className=\"max-w-lg text-sm text-fg-muted\">\n          Status marketing page kit with real uptime bars and Hairline incident chrome.\n        </motion.p>\n      </div>\n      <div className=\"grid gap-4 sm:grid-cols-2\">\n        <div className=\"rounded-xl border border-border bg-surface p-4\"><UptimeBar label=\"API\" /></div>\n        <div className=\"rounded-xl border border-border bg-surface p-4\"><UptimeBar label=\"Dashboard\" downtimes={[7]} /></div>\n        <div className=\"rounded-xl border border-border bg-surface p-4\"><UptimeBar label=\"Webhooks\" downtimes={[20, 21]} /></div>\n        <div className=\"rounded-xl border border-border bg-surface p-4\"><UptimeBar label=\"Realtime\" /></div>\n      </div>\n    </div>\n  )\n}\nexport { StatusMarketing }\n"
    }
  ]
}