{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-gradient-mesh",
  "type": "registry:component",
  "title": "Hero gradient mesh",
  "description": "A dark hero on a layered radial gradient mesh with a scale in headline, supporting copy and high contrast launch and docs buttons for launch pages.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-gradient-mesh.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-gradient-mesh.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction HeroGradientMesh({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-gradient-mesh\"\n      data-tier=\"premium\"\n      className={cn(\"relative overflow-hidden rounded-2xl border border-border\", className)}\n      style={{ backgroundColor: \"oklch(0.14 0.02 285)\" }}\n    >\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          background:\n            \"radial-gradient(ellipse at top, color-mix(in oklch, var(--accent) 45%, transparent), transparent 55%), radial-gradient(ellipse at bottom right, oklch(0.55 0.12 250 / 0.3), transparent 50%)\",\n        }}\n        aria-hidden\n      />\n      <div className=\"relative px-4 py-16 text-center sm:px-6 sm:py-28\" style={{ color: \"oklch(0.98 0.005 250)\" }}>\n        <motion.h1\n          initial={reduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"text-[clamp(1.75rem,3.5vw+1rem,3rem)] font-medium tracking-[-0.028em]\"\n          style={{ color: \"oklch(0.99 0.002 250)\" }}\n        >\n          Dark-mode first. Accent that sings.\n        </motion.h1>\n        <p\n          className=\"mx-auto mt-4 max-w-lg text-sm\"\n          style={{ color: \"oklch(0.90 0.01 250)\" }}\n        >\n          A launch hero with depth. Motion is optional and respects reduced-motion settings.\n        </p>\n        <div className=\"mx-auto mt-7 flex w-full max-w-sm flex-col gap-3 sm:mt-8 sm:max-w-none sm:flex-row sm:justify-center\">\n          <Button\n            className=\"w-full border-transparent sm:w-auto\"\n            style={{ backgroundColor: \"oklch(0.98 0.005 250)\", color: \"oklch(0.18 0.01 250)\" }}\n          >\n            Launch\n          </Button>\n          <Button\n            variant=\"outline\"\n            className=\"w-full hover:bg-white/10 sm:w-auto\"\n            style={{ borderColor: \"oklch(0.85 0.01 250)\", color: \"oklch(0.98 0.005 250)\", backgroundColor: \"transparent\" }}\n          >\n            Docs\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport { HeroGradientMesh }\n"
    }
  ]
}