{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-aurora",
  "type": "registry:component",
  "title": "Hero aurora",
  "description": "A React hero with slow drifting aurora gradient blobs behind an eyebrow, headline, description and two action buttons that fade up in sequence.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-aurora.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-aurora.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 HeroAurora({\n  eyebrow = \"Now in public beta\",\n  title = \"Interfaces that feel composed\",\n  description = \"Plan, ship and measure in one calm workspace, built for teams who care about the details.\",\n  primaryLabel = \"Start free trial\",\n  secondaryLabel = \"View free kit\",\n  onPrimary,\n  onSecondary,\n  className,\n}: {\n  eyebrow?: string\n  title?: string\n  description?: string\n  primaryLabel?: string\n  secondaryLabel?: string\n  onPrimary?: () => void\n  onSecondary?: () => void\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-aurora\"\n      data-tier=\"premium\"\n      className={cn(\"relative overflow-hidden rounded-2xl border border-border bg-sunken\", className)}\n    >\n      <div className=\"pointer-events-none absolute inset-0\" aria-hidden>\n        <motion.div\n          className=\"absolute -top-24 left-1/4 size-[min(28rem,90vw)] rounded-full bg-[radial-gradient(circle,color-mix(in_oklch,var(--accent)_28%,transparent),transparent_70%)]\"\n          animate={reduce ? undefined : { x: [0, 40, -20, 0], y: [0, 20, -10, 0] }}\n          transition={{ duration: 18, repeat: Infinity, ease: \"linear\" }}\n        />\n        <motion.div\n          className=\"absolute -bottom-32 right-0 size-[min(24rem,80vw)] rounded-full bg-[radial-gradient(circle,color-mix(in_oklch,var(--accent)_18%,transparent),transparent_70%)]\"\n          animate={reduce ? undefined : { x: [0, -30, 10, 0], y: [0, -25, 15, 0] }}\n          transition={{ duration: 22, repeat: Infinity, ease: \"linear\" }}\n        />\n        <div className=\"absolute inset-0 bg-[linear-gradient(to_bottom,var(--highlight),transparent_40%)]\" />\n      </div>\n      <div className=\"relative mx-auto flex max-w-3xl flex-col items-center px-4 py-16 text-center sm:px-6 sm:py-32\">\n        <motion.p\n          initial={reduce ? false : { opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.4 }}\n          className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\"\n        >\n          {eyebrow}\n        </motion.p>\n        <motion.h1\n          initial={reduce ? false : { opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.05 }}\n          className=\"mt-3 text-[clamp(1.75rem,3.5vw+1rem,3rem)] font-medium tracking-[-0.028em] text-fg\"\n        >\n          {title}\n        </motion.h1>\n        <motion.p\n          initial={reduce ? false : { opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.1 }}\n          className=\"mt-4 max-w-xl text-sm leading-[1.55] text-fg-muted sm:text-base\"\n        >\n          {description}\n        </motion.p>\n        <motion.div\n          initial={reduce ? false : { opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.16 }}\n          className=\"mt-7 flex w-full max-w-sm flex-col items-stretch gap-3 sm:mt-8 sm:max-w-none sm:flex-row sm:flex-wrap sm:items-center sm:justify-center\"\n        >\n          <Button className=\"w-full sm:w-auto\" onClick={onPrimary}>{primaryLabel}</Button>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\" onClick={onSecondary}>{secondaryLabel}</Button>\n        </motion.div>\n      </div>\n    </section>\n  )\n}\nexport { HeroAurora }\n"
    }
  ]
}