{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-39",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-39.tsx",
      "content": "import LogoIcon from \"@/assets/logo-icon\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { Search } from \"lucide-react\";\n\n\n\nexport default function Hero39() {\n\n\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  // Content Container for stagger\n  const contentContainerVariants: Variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: { staggerChildren: 0.12, 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  // Logos stagger up from the bottom\n  const logosContainerVariants: Variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: { staggerChildren: 0.1, delayChildren: 1.0 },\n    },\n  };\n\n  const logoItemVariants: Variants = {\n    hidden: { opacity: 0, y: 15, filter: \"blur(4px)\" },\n    show: {\n      opacity: 1,\n      y: 0,\n      filter: \"blur(0px)\",\n      transition: { type: \"spring\", damping: 20, stiffness: 100 },\n    },\n  };\n\n  return (\n    <div className=\"relative min-h-screen w-full overflow-hidden bg-[#7aa3c6] font-sans antialiased selection:bg-white/30 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-39.avif\"\n          alt=\"Peaceful nature landscape painting\"\n          className=\"h-full w-full object-cover object-bottom\"\n        />\n\n        <div className=\"absolute inset-x-0 top-0 h-64 bg-gradient-to-b from-[#5a86ae]/30 to-transparent mix-blend-multiply\" />\n        <div className=\"absolute inset-0 bg-black/5\" />\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\">Retreats</span>\n          </div>\n\n          {/* Links */}\n          <div className=\"hidden items-center gap-10 md:flex\">\n            {['Products', 'About', 'Features', 'Support'].map((link) => (\n              <a\n                key={link}\n                href={`#${link.toLowerCase()}`}\n                className=\"flex min-h-[40px] items-center text-[14.5px] font-medium text-white/90 transition-colors duration-200 hover:text-white\"\n              >\n                {link}\n              </a>\n            ))}\n          </div>\n\n          {/* CTA */}\n          <button className=\"flex min-h-[40px] items-center justify-center rounded-full bg-white px-6 py-2 text-[14.5px] font-medium text-black transition-[transform,background-color] duration-150 ease-out hover:bg-white/90 active:scale-[0.96]\">\n            Book a call\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 w-full max-w-4xl flex-col items-center pt-12\"\n          >\n            <motion.div\n              variants={itemVariants}\n              className=\"will-change-transform\"\n            >\n              <div className=\"flex items-center gap-2.5 rounded-full border border-white/25 bg-white/10 px-4 py-1 backdrop-blur-sm\">\n                <span className=\"size-1.5 rounded-full bg-white/90 shadow-[0_0_8px_rgba(255,255,255,0.8)]\" />\n                <span className=\"text-xs font-medium tracking-wide text-white\">\n                  A peaceful place to disconnect\n                </span>\n              </div>\n            </motion.div>\n\n            <motion.h1 className=\"mt-4 text-[3rem] leading-[1.05] font-normal tracking-tight text-balance text-white sm:text-[4rem] md:text-[5rem] lg:text-[5.5rem]\">\n              <motion.span\n                variants={titleLineVariants}\n                className=\"block will-change-transform\"\n              >\n                The best place to find\n              </motion.span>\n              <motion.span\n                variants={titleLineVariants}\n                className=\"block will-change-transform\"\n              >\n                your{' '}\n                <span className=\"font-serif text-[1.05em] tracking-normal text-white/95 italic\">\n                  Inner Stillness\n                </span>\n              </motion.span>\n            </motion.h1>\n\n            {/* Subtitle */}\n            <motion.p\n              variants={itemVariants}\n              className=\"text-md mt-3 max-w-[500px] leading-[1.6] font-normal text-pretty text-white will-change-transform\"\n            >\n              Find an escape to reconnect with nature and your inner self. Your\n              moment of clarity is waiting.\n            </motion.p>\n\n            {/* Search Input Bar */}\n            <motion.div\n              variants={itemVariants}\n              className=\"mt-6 w-full max-w-[580px] will-change-transform\"\n            >\n              {/* Outer semi-transparent ring */}\n              <div className=\"rounded-full bg-white/20 p-1 shadow-[0_8px_32px_rgba(0,0,0,0.1)] backdrop-blur-md\">\n                {/* Inner white input area */}\n                <div className=\"flex h-[54px] w-full items-center justify-between rounded-full bg-white pr-2 pl-5 shadow-inner\">\n                  <div className=\"flex flex-1 items-center gap-3\">\n                    <Search className=\"h-5 w-5 text-slate-400\" />\n                    <input\n                      type=\"text\"\n                      placeholder=\"Enter a nature retreat name...\"\n                      className=\"w-full bg-transparent text-[15px] font-medium text-slate-800 placeholder:text-slate-400 focus:outline-none\"\n                    />\n                  </div>\n                  {/* Search Button */}\n                  <button className=\"text-md flex h-[40px] min-h-[40px] items-center justify-center rounded-full bg-[#6B96C3] px-6 font-medium text-white shadow-[inset_0px_2px_4px_1px_rgba(255,255,255,0.3),inset_0px_-2px_4px_1px_rgba(0,0,0,0.06)] transition-[transform,background-color] duration-150 ease-out text-shadow-2xs hover:bg-[#5a86b3] active:scale-[0.96]\">\n                    Find Peace\n                  </button>\n                </div>\n              </div>\n            </motion.div>\n          </motion.div>\n        </main>\n\n        {/* ── Bottom Logos ────────────────────────────────────────────────── */}\n        <div className=\"absolute right-0 bottom-8 left-0 flex w-full flex-col items-center justify-center px-6 sm:bottom-12\">\n          <motion.p\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 1.0, duration: 0.8 }}\n            className=\"mb-4 text-[13px] font-medium text-white/70\"\n          >\n            Trusted by seekers of calm\n          </motion.p>\n\n          <motion.div\n            variants={logosContainerVariants}\n            initial=\"hidden\"\n            animate=\"show\"\n            className=\"flex flex-wrap items-center justify-center gap-8 opacity-90 sm:gap-12 md:gap-16 lg:gap-20\"\n          >\n            {/* Forbes */}\n            <motion.div\n              variants={logoItemVariants}\n              className=\"will-change-transform\"\n            >\n              <span className=\"font-serif text-[24px] font-bold tracking-tight text-white/90\">\n                Forbes\n              </span>\n            </motion.div>\n\n            {/* healthline */}\n            <motion.div\n              variants={logoItemVariants}\n              className=\"will-change-transform\"\n            >\n              <span className=\"font-sans text-[24px] font-bold tracking-tighter text-white/90\">\n                healthline\n              </span>\n            </motion.div>\n\n            {/* Bloomberg */}\n            <motion.div\n              variants={logoItemVariants}\n              className=\"will-change-transform\"\n            >\n              <span className=\"font-sans text-[22px] font-bold tracking-tight text-white/90\">\n                Bloomberg\n              </span>\n            </motion.div>\n\n            {/* The Washington Post */}\n            <motion.div\n              variants={logoItemVariants}\n              className=\"will-change-transform\"\n            >\n              <span\n                className=\"font-serif text-[22px] font-bold tracking-tight text-white/90\"\n                style={{ fontFamily: \"'Georgia', 'Times New Roman', serif\" }}\n              >\n                The Washington Post\n              </span>\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-39.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"
}