{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-spotlight",
  "type": "registry:component",
  "title": "Hero spotlight",
  "description": "A launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/hero-spotlight.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-spotlight.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { ArrowRightIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/*\n * HeroSpotlight: a launch hero. Staggered headline that settles in with a\n * blur, a lit second line that catches the cursor light, two actions, a\n * trust row, and a visual slot that rises last and tilts toward the light.\n */\n\ntype HeroSpotlightProps = {\n  eyebrow?: React.ReactNode\n  title?: React.ReactNode\n  /** Second line of the title, lit by the cursor. */\n  highlight?: React.ReactNode\n  description?: React.ReactNode\n  primary?: { label: string; href?: string; onClick?: () => void }\n  secondary?: { label: string; href?: string; onClick?: () => void }\n  /** Small proof line under the actions. */\n  proof?: React.ReactNode\n  /** Product visual (a DeviceFrame, a screenshot, anything). */\n  visual?: React.ReactNode\n  align?: \"center\" | \"left\"\n  className?: string\n}\n\nconst ease = [0.2, 0, 0, 1] as const\n\nfunction HeroSpotlight({\n  eyebrow = \"Now in public beta\",\n  title = \"Answers from your data,\",\n  highlight = \"before you ask.\",\n  description = \"Lumen watches revenue, churn and pipeline around the clock and tells your team what changed, why, and what to do next.\",\n  primary = { label: \"Start free\" },\n  secondary = { label: \"Watch the 2 min tour\" },\n  proof = \"Free for 14 days · No card · SOC 2 Type II\",\n  visual,\n  align = \"center\",\n  className,\n}: HeroSpotlightProps) {\n  const reduce = useReducedMotion()\n  const rise = (d: number) =>\n    reduce\n      ? {}\n      : { initial: { opacity: 0, y: 14, filter: \"blur(6px)\" }, animate: { opacity: 1, y: 0, filter: \"blur(0px)\" }, transition: { duration: 0.8, delay: d, ease } }\n  const center = align === \"center\"\n  const act = (a: HeroSpotlightProps[\"primary\"], variant: \"default\" | \"outline\") =>\n    a ? (\n      <Button size=\"lg\" variant={variant} onClick={a.onClick} render={a.href ? <a href={a.href} /> : undefined}>\n        {a.label}\n        {variant === \"default\" ? <ArrowRightIcon /> : null}\n      </Button>\n    ) : null\n\n  return (\n    <section data-slot=\"hero-spotlight\" className={cn(\"relative isolate overflow-hidden\", className)}>\n      <div aria-hidden className=\"light-spot absolute inset-0 -z-10\" />\n      <div aria-hidden className=\"absolute inset-0 -z-10 bg-grid [--grid-size:64px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black_10%,transparent_70%)]\" />\n      <div className={cn(\"mx-auto max-w-7xl px-4 pt-20 sm:px-6 sm:pt-28 lg:px-8\", center && \"text-center\")}>\n        <div className={cn(\"max-w-4xl\", center && \"mx-auto\")}>\n          {eyebrow ? (\n            <motion.p {...rise(0)} className={cn(\"inline-flex items-center gap-2 rounded-full border border-border bg-surface py-1 pr-3 pl-1.5 text-[12.5px] text-fg-muted shadow-xs\")}>\n              <span className=\"relative flex size-2 items-center justify-center\">\n                <span className=\"absolute inset-0 animate-ping rounded-full bg-accent/50\" />\n                <span className=\"relative size-1.5 rounded-full bg-accent\" />\n              </span>\n              {eyebrow}\n            </motion.p>\n          ) : null}\n          <motion.h1\n            {...rise(0.08)}\n            className=\"mt-6 text-[2.75rem] leading-[1.02] font-medium tracking-[-0.045em] text-balance text-fg sm:text-6xl lg:text-[5rem] lg:leading-[0.96] lg:tracking-[-0.055em]\"\n          >\n            {title}\n            {highlight ? (\n              <>\n                <br />\n                <span className=\"text-lit\">{highlight}</span>\n              </>\n            ) : null}\n          </motion.h1>\n          {description ? (\n            <motion.p {...rise(0.16)} className={cn(\"mt-6 max-w-2xl text-[1.0625rem] leading-[1.65] text-pretty text-fg-muted sm:text-lg\", center && \"mx-auto\")}>\n              {description}\n            </motion.p>\n          ) : null}\n          <motion.div {...rise(0.24)} className={cn(\"mt-9 flex flex-col gap-3 sm:flex-row\", center && \"justify-center\")}>\n            {act(primary, \"default\")}\n            {act(secondary, \"outline\")}\n          </motion.div>\n          {proof ? (\n            <motion.p {...rise(0.3)} className=\"mt-5 text-[12.5px] text-fg-subtle\">\n              {proof}\n            </motion.p>\n          ) : null}\n        </div>\n        {visual ? (\n          <motion.div\n            initial={reduce ? false : { opacity: 0, y: 60, rotateX: 18 }}\n            animate={{ opacity: 1, y: 0, rotateX: 0 }}\n            transition={{ duration: 1.2, delay: 0.35, ease }}\n            style={{ transformPerspective: 1600 }}\n            className=\"relative mt-16 sm:mt-20\"\n          >\n            <div style={{ transform: \"translate3d(calc(var(--sx) * -6px), calc(var(--sy) * -6px), 0)\" }}>{visual}</div>\n          </motion.div>\n        ) : null}\n      </div>\n    </section>\n  )\n}\n\nexport { HeroSpotlight }\nexport type { HeroSpotlightProps }\n"
    }
  ]
}