{"name":"spotlight-hero","title":"Spotlight Hero","description":"","type":"section","dependencies":["framer-motion","lucide-react"],"registryDependencies":[],"files":[{"path":"components/ui/spotlight-hero.tsx","type":"component","content":"import { motion } from \"framer-motion\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\n\nexport interface SpotlightHeroProps {\n  /** Small label above the title. */\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n  primaryLabel?: string;\n  secondaryLabel?: string;\n}\n\nexport default function SpotlightHero({\n  eyebrow = \"New release\",\n  title = \"Build your interface faster\",\n  description = \"A library of components you can paste, preview and publish in minutes.\",\n  primaryLabel = \"Get started\",\n  secondaryLabel = \"Learn more\",\n}: SpotlightHeroProps) {\n  return (\n    <section className=\"relative w-full overflow-hidden bg-zinc-950 px-6 py-24 text-center sm:py-32\">\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-1/2 top-0 h-80 w-[40rem] -translate-x-1/2 rounded-full bg-violet-600/25 blur-3xl\"\n      />\n\n      <motion.div\n        initial={{ opacity: 0, y: 16 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.6, ease: \"easeOut\" }}\n        className=\"relative mx-auto max-w-3xl\"\n      >\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-300\">\n          <Sparkles className=\"h-3.5 w-3.5 text-violet-300\" aria-hidden=\"true\" />\n          {eyebrow}\n        </span>\n\n        <h1 className=\"mt-6 text-4xl font-semibold tracking-tight text-white sm:text-6xl\">{title}</h1>\n        <p className=\"mx-auto mt-5 max-w-xl text-base leading-7 text-zinc-400 sm:text-lg\">{description}</p>\n\n        <div className=\"mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n          <motion.a\n            href=\"#\"\n            whileHover={{ scale: 1.03 }}\n            whileTap={{ scale: 0.97 }}\n            className=\"inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-zinc-950\"\n          >\n            {primaryLabel}\n            <ArrowRight className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </motion.a>\n          <a\n            href=\"#\"\n            className=\"inline-flex items-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/5\"\n          >\n            {secondaryLabel}\n          </a>\n        </div>\n      </motion.div>\n    </section>\n  );\n}\n"}],"examples":[],"cssRequirements":[],"tailwindRequirements":[],"meta":{"componentName":"SpotlightHero","importPath":"@/components/ui/spotlight-hero","tags":["animated","interactive","dark","responsive","hover","icons","marketing"],"sourceUrl":null,"sourceName":null,"author":null,"license":null,"publishedAt":"2026-10-12T12:52:16.801Z","updatedAt":"2026-10-12T13:22:43.673Z"}}