{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-38",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-38.tsx",
      "content": "import LogoIcon from \"@/assets/logo-icon\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { ArrowRight, ChevronDown } from \"lucide-react\";\n\n\n\nexport default function Hero38() {\n  // Nav: drops from top with blur\n  const navVariants: Variants = {\n    hidden: { opacity: 0, y: -20, filter: 'blur(8px)' },\n    show: {\n      opacity: 1,\n      y: 0,\n      filter: 'blur(0px)',\n      transition: { type: 'spring', damping: 22, stiffness: 180, delay: 0.05 },\n    },\n  };\n\n  // Background: slow fade in with scale down\n  const bgVariants: Variants = {\n    hidden: { opacity: 0, scale: 1.05 },\n    show: {\n      opacity: 1,\n      scale: 1,\n      transition: { duration: 1.8, ease: [0.22, 1, 0.36, 1], delay: 0 },\n    },\n  };\n\n  // Container for stagger\n  const contentContainerVariants: Variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: { staggerChildren: 0.15, delayChildren: 0.3 },\n    },\n  };\n\n  // General item rise up\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 20, filter: 'blur(8px)' },\n    show: {\n      opacity: 1,\n      y: 0,\n      filter: 'blur(0px)',\n      transition: { type: 'spring', damping: 24, stiffness: 100 },\n    },\n  };\n\n  // Title lines: more dramatic rise up\n  const titleLineVariants: Variants = {\n    hidden: { opacity: 0, y: 40, filter: 'blur(12px)' },\n    show: {\n      opacity: 1,\n      y: 0,\n      filter: 'blur(0px)',\n      transition: { type: 'spring', damping: 28, stiffness: 80, mass: 1.2 },\n    },\n  };\n\n  return (\n    <div className=\"relative min-h-screen w-full overflow-hidden font-sans antialiased selection:bg-white/20 selection:text-white\">\n      {/* ── Background Image ──────────────────────────────────────────────── */}\n      <motion.div\n        variants={bgVariants}\n        initial=\"hidden\"\n        animate=\"show\"\n        className=\"pointer-events-none absolute inset-0 z-0 will-change-transform select-none\"\n      >\n        <img\n          src=\"https://assets.watermelon.sh/bg-hero-38.avif\"\n          alt=\"Astronaut looking at a glowing planet\"\n          className=\"h-full w-full translate-y-20 object-cover object-bottom\"\n        />\n      </motion.div>\n\n      <div className=\"relative z-10 flex min-h-screen flex-col\">\n        {/* ── Navigation ──────────────────────────────────────────────────── */}\n        <motion.nav\n          variants={navVariants}\n          initial=\"hidden\"\n          animate=\"show\"\n          className=\"flex w-full items-center justify-between px-6 py-5 sm:px-8 md:px-12 lg:px-16\"\n        >\n          {/* Logo */}\n          <div className=\"flex items-center gap-2.5 text-white\">\n            <LogoIcon className=\"size-8\" />\n            <span className=\"text-lg font-medium tracking-wide\">\n              Watermelon\n            </span>\n          </div>\n\n          {/* Links */}\n          <div className=\"hidden items-center gap-8 md:flex\">\n            {[\n              { name: 'Features', dropdown: true },\n              { name: 'Pricing', dropdown: true },\n              { name: 'Resources', dropdown: false },\n              { name: 'FAQs', dropdown: false },\n            ].map((link) => (\n              <a\n                key={link.name}\n                href={`#${link.name.toLowerCase()}`}\n                className=\"group flex min-h-[40px] items-center gap-1.5 text-[14px] font-medium text-white/80 transition-colors duration-200 hover:text-white\"\n              >\n                {link.name}\n                {link.dropdown && (\n                  <ChevronDown className=\"h-3.5 w-3.5 opacity-70 transition-transform duration-200 group-hover:rotate-180\" />\n                )}\n              </a>\n            ))}\n          </div>\n\n          {/* CTA */}\n          <button className=\"group flex min-h-10 items-center gap-2 rounded-lg bg-zinc-200 px-5 py-2 text-base font-medium text-black shadow-[inset_0_2px_0_1px_rgba(255,255,255,0.5),inset_0px_-2px_0px_1px_rgba(0,0,0,0.3)] transition-[transform,background-color] duration-150 ease-out hover:bg-white/90 active:scale-[0.96]\">\n            Book Demo\n            <ArrowRight className=\"h-4 w-4 text-black/80 transition-transform duration-150 ease-out group-hover:translate-x-0.5\" />\n          </button>\n        </motion.nav>\n\n        {/* ── Main Content ────────────────────────────────────────────────── */}\n        <main className=\"flex flex-1 flex-col items-center justify-start px-6 text-center\">\n          <motion.div\n            variants={contentContainerVariants}\n            initial=\"hidden\"\n            animate=\"show\"\n            className=\"flex max-w-[800px] flex-col items-center pt-12 xl:pt-20\"\n          >\n            {/* Trusted Badge */}\n            <motion.div\n              variants={itemVariants}\n              className=\"will-change-transform\"\n            >\n              <div className=\"flex items-center gap-2 rounded-full bg-white px-4 py-1 shadow-[0_2px_8px_rgba(0,0,0,0.15)]\">\n                <span className=\"size-1.5 rounded-full bg-black/80\" />\n                <span className=\"text-xs font-medium text-black\">\n                  Trusted by 500+ Innovations\n                </span>\n              </div>\n            </motion.div>\n\n            {/* Headline */}\n            <motion.h1 className=\"mt-2 text-[2.75rem] leading-[1.1] font-normal tracking-[-0.02em] text-balance text-white sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5rem]\">\n              <motion.span\n                variants={titleLineVariants}\n                className=\"block will-change-transform\"\n              >\n                Turn Your Data Into\n              </motion.span>\n              <motion.span\n                variants={titleLineVariants}\n                className=\"block will-change-transform\"\n              >\n                Intelligent Decisions\n              </motion.span>\n            </motion.h1>\n\n            {/* Subtitle */}\n            <motion.p\n              variants={itemVariants}\n              className=\"mt-2 max-w-[580px] text-sm leading-[1.6] font-normal text-pretty text-zinc-200 will-change-transform sm:text-[18px]\"\n            >\n              Discover patterns, fuel growth, and build smarter systems with AI\n              powered insights crafted for you.\n            </motion.p>\n\n            {/* Buttons */}\n            <motion.div\n              variants={itemVariants}\n              className=\"mt-10 flex w-full flex-col gap-4 will-change-transform sm:w-auto sm:flex-row\"\n            >\n              <button className=\"text-md flex min-h-[48px] items-center justify-center rounded-lg bg-white px-8 py-3 font-medium text-black shadow-[inset_0_2px_2px_1px_rgba(255,255,255,0.3),inset_0px_-2px_2px_1px_rgba(0,0,0,0.1)] transition-[transform,background-color] duration-150 ease-out hover:bg-white/90 active:scale-[0.96] sm:w-auto\">\n                Get Started\n              </button>\n              <button className=\"text-md flex min-h-[48px] items-center justify-center rounded-lg border-2 border-white/50 bg-white/5 px-8 py-3 font-medium text-white backdrop-blur-md transition-[transform,background-color,border-color] duration-150 ease-out hover:border-white/40 hover:bg-white/5 active:scale-[0.96] sm:w-auto\">\n                Learn More\n              </button>\n            </motion.div>\n          </motion.div>\n        </main>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-38.tsx"
    },
    {
      "path": "src/assets/logo-icon.tsx",
      "content": "export default function LogoIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"785\"\n      height=\"506\"\n      viewBox=\"0 0 785 506\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M392.688 104.141C299.504 104.141 291.288 234.316 261.147 234.316C231.007 234.316 230.996 0 121.38 0C-30.726 0 -49.9098 505.63 121.38 505.63C196.742 505.63 218.672 442.598 252.926 442.598C287.179 442.598 322.801 505.63 392.688 505.63C462.575 505.63 496.832 442.598 531.085 442.598C565.339 442.598 587.269 505.63 662.631 505.63C833.921 505.63 814.737 0 662.631 0C553.015 0 553.004 234.316 522.864 234.316C492.723 234.316 485.872 104.141 392.688 104.141Z\"\n        fill=\"currentColor\"\n      />\n      <circle cx=\"515.226\" cy=\"332.977\" r=\"46.5892\" fill=\"black\" />\n      <circle cx=\"268.575\" cy=\"332.976\" r=\"46.5892\" fill=\"black\" />\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "assets/logo-icon.tsx"
    }
  ],
  "type": "registry:ui"
}