{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-41",
  "dependencies": [
    "@hugeicons/react",
    "framer-motion",
    "hugeicons-react",
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-41.tsx",
      "content": "import { motion, type Variants } from \"framer-motion\";\nimport { ArrowRight, ChevronDown } from \"lucide-react\"; \nimport { FaGoogle } from \"react-icons/fa6\";\nimport { AdobeXdIcon, MicrosoftIcon, StripeIcon } from \"hugeicons-react\";\n\n// ─── Google Font import — Playfair Display for the serif heading ────────────\n// Injected once via a <style> tag inside the component so it's self-contained.\nconst fontStyle = `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,700;1,800&display=swap');`;\n\n// ─── Design tokens ─────────────────────────────────────────────────────────\n// Deep navy: matches #0d2850 — Tailwind blue-950 is a near-perfect equivalent\nconst NAVY = \"#0d2850\";\n\n// ─── Framer-Motion Variants ────────────────────────────────────────────────\n\n/** Nav: slides down from top, blurs clear */\nconst navVariants: Variants = {\n  hidden: { opacity: 0, y: -22, 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/** Illustration: slow pan-up reveal (scale down + fade) */\nconst bgVariants: Variants = {\n  hidden: { opacity: 0, scale: 1.04, y: 20 },\n  show: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    transition: { duration: 1.9, ease: [0.22, 1, 0.36, 1], delay: 0 },\n  },\n};\n\n/** Headline container: staggers each line */\nconst headlineContainerVariants: Variants = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: { staggerChildren: 0.18, delayChildren: 0.3 },\n  },\n};\n\n/** Each headline line: dramatic rise + blur clear */\nconst headlineLineVariants: Variants = {\n  hidden: { opacity: 0, y: 56, filter: \"blur(20px)\" },\n  show: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", damping: 30, stiffness: 72, mass: 1.4 },\n  },\n};\n\n/** Subtitle: gentler rise, fires after headline settles */\nconst subtitleVariants: 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: 26, stiffness: 90, delay: 0.92 },\n  },\n};\n\n/** CTA button: scale + fade in after subtitle */\nconst ctaVariants: Variants = {\n  hidden: { opacity: 0, y: 14, scale: 0.94 },\n  show: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: { type: \"spring\", damping: 24, stiffness: 110, delay: 1.12 },\n  },\n};\n\n/** Brand logos strip stagger container */\nconst logosContainerVariants: Variants = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: { staggerChildren: 0.1, delayChildren: 1.25 },\n  },\n};\n\nconst logoItemVariants: Variants = {\n  hidden: { opacity: 0, y: 12, filter: \"blur(4px)\" },\n  show: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", damping: 22, stiffness: 100 },\n  },\n};\n\n// ─── Component ─────────────────────────────────────────────────────────────\n\nexport default function Hero41() {\n  const navLinks = [\n    { name: \"Features\", dropdown: true },\n    { name: \"Pricing\", dropdown: true },\n    { name: \"Resources\", dropdown: false },\n    { name: \"FAQs\", dropdown: false },\n  ];\n\n\n  return (\n    <>\n      {/* Self-contained font import */}\n      <style>{fontStyle}</style>\n\n      <div\n        className=\"relative min-h-screen w-full overflow-hidden bg-white antialiased selection:bg-blue-950/20 selection:text-blue-950\"\n      >\n        <motion.div\n          variants={bgVariants}\n          initial=\"hidden\"\n          animate=\"show\"\n          className=\"pointer-events-none absolute inset-x-0 bottom-0 z-0 will-change-transform select-none\"\n          style={{ height: \"68%\" }}\n        >\n          <img\n            src=\"https://assets.watermelon.sh/bg-hero-41.avif\"\n            alt=\"Peaceful winter landscape with snowy pine trees, mountains, and a cozy cabin\"\n            className=\"h-full w-full object-cover object-top\"\n          />\n        \n          <div\n            className=\"pointer-events-none absolute inset-x-0 top-0 h-32\"\n            style={{\n              background: \"linear-gradient(to bottom, #ffffff 0%, transparent 100%)\",\n            }}\n          />\n        </motion.div>\n\n        {/* ── z-10 layout layer ────────────────────────────────────────── */}\n        <div className=\"relative z-10 flex min-h-screen flex-col\">\n\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-10 md:px-14 lg:px-16\"\n            aria-label=\"Primary navigation\"\n          >\n            {/* Wordmark — no icon, serif feel matches the brand */}\n            <span\n              className=\"text-lg font-semibold tracking-[-0.01em]\"\n              style={{ color: NAVY, fontFamily: \"'Playfair Display', Georgia, serif\" }}\n            >\n              Watermelon\n            </span>\n\n            {/* Center nav links — hidden below md */}\n            <nav\n              className=\"hidden items-center gap-7 md:flex lg:gap-9\"\n              aria-label=\"Site links\"\n            >\n              {navLinks.map((link) => (\n                <a\n                  key={link.name}\n                  href={`#${link.name.toLowerCase()}`}\n                  className=\"group flex min-h-[40px] items-center gap-1 text-sm font-normal transition-colors duration-200\"\n                  style={{ color: `${NAVY}cc` }}\n                >\n                  {link.name}\n                  {link.dropdown && (\n                    <ChevronDown\n                      className=\"h-3.5 w-3.5 transition-transform duration-200 group-hover:rotate-180\"\n                      style={{ color: `${NAVY}99` }}\n                    />\n                  )}\n                </a>\n              ))}\n            </nav>\n\n            {/* Sign up — pill-shaped outlined button */}\n            {/* Optical padding: pl-5 pr-4 to balance text + arrow asymmetry */}\n            <button\n              className=\"group flex min-h-[40px] items-center gap-2 rounded-full border pl-5 pr-4 py-2 text-sm font-normal transition-[transform,background-color,border-color] duration-150 ease-out hover:bg-blue-950/[0.04] active:scale-[0.96]\"\n              style={{\n                color: NAVY,\n                borderColor: `${NAVY}aa`,\n              }}\n            >\n              Sign up\n              <ArrowRight\n                className=\"h-3.5 w-3.5 shrink-0 transition-transform duration-150 ease-out group-hover:translate-x-0.5\"\n                style={{ color: NAVY }}\n              />\n            </button>\n          </motion.nav>\n\n          {/* ── Main hero content — centered ────────────────────────────── */}\n          <main className=\"flex flex-1 flex-col items-center justify-start px-6 text-center\">\n\n            {/* Headline — two lines stagger independently for cinematic feel */}\n            <motion.h1\n              variants={headlineContainerVariants}\n              initial=\"hidden\"\n              animate=\"show\"\n              className=\"mt-10 text-4xl leading-[1.1] text-balance sm:mt-12 sm:text-5xl md:text-6xl lg:mt-14 lg:text-7xl\"\n              style={{\n                fontFamily: \"'Playfair Display', Georgia, serif\",\n                fontWeight: 700,\n                color: NAVY,\n              }}\n            >\n              {/* Line 1 — upright bold */}\n              <motion.span\n                variants={headlineLineVariants}\n                className=\"block will-change-transform\"\n              >\n                Rediscover Your Strength\n              </motion.span>\n\n              {/* Line 2 — \"Peace\" in italic, same serif weight */}\n              <motion.span\n                variants={headlineLineVariants}\n                className=\"block will-change-transform\"\n              >\n                Reclaim Your{\" \"}\n                <em\n                  className=\"not-italic\"\n                  style={{ fontStyle: \"italic\" }}\n                >\n                  Peace\n                </em>\n              </motion.span>\n            </motion.h1>\n\n            {/* Subtitle */}\n            <motion.p\n              variants={subtitleVariants}\n              initial=\"hidden\"\n              animate=\"show\"\n              className=\"mt-5 max-w-[440px] text-sm leading-[1.65] font-normal text-pretty will-change-transform sm:text-base\"\n              style={{ color: `${NAVY}99` }}\n            >\n              Confidential, professional help tailored to your unique needs,\n              available on your schedule. Your privacy is our first priority.\n            </motion.p>\n\n            {/* CTA — dark navy filled pill button */}\n            <motion.div\n              variants={ctaVariants}\n              initial=\"hidden\"\n              animate=\"show\"\n              className=\"mt-8 will-change-transform\"\n            >\n              <button\n                className=\"group flex min-h-[48px] items-center gap-2.5 rounded-full pl-7 pr-6 py-3 text-base font-medium text-white shadow-[0_2px_8px_rgba(13,40,80,0.25),0_8px_24px_rgba(13,40,80,0.18),inset_0_1px_0_rgba(255,255,255,0.15)] transition-[transform,background-color,box-shadow] duration-150 ease-out hover:shadow-[0_4px_12px_rgba(13,40,80,0.30),0_12px_32px_rgba(13,40,80,0.22)] active:scale-[0.96]\"\n                style={{ backgroundColor: NAVY }}\n              >\n                Get Started\n                <ArrowRight\n                  className=\"h-4 w-4 shrink-0 transition-transform duration-150 ease-out group-hover:translate-x-0.5\"\n                  aria-hidden=\"true\"\n                />\n              </button>\n            </motion.div>\n          </main>\n\n          {/* ── Bottom brand strip ──────────────────────────────────────── */}\n          <div className=\"relative z-20 flex w-full flex-col items-center justify-center px-6 pb-10 pt-4 sm:pb-12\">\n\n            {/* \"Integrated with the best\" label */}\n            <motion.p\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 1.2, duration: 0.7, ease: \"easeOut\" }}\n              className=\"mb-5 text-sm font-normal\"\n              style={{ color: `${NAVY}99` }}\n            >\n              Integrated with the best\n            </motion.p>\n\n            {/* Brand logo marks — staggered */}\n            <motion.div\n              variants={logosContainerVariants}\n              initial=\"hidden\"\n              animate=\"show\"\n              className=\"flex flex-wrap items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20\"\n              style={{ color: NAVY }}\n            >\n              <motion.div\n                variants={logoItemVariants}\n                className=\"will-change-transform opacity-70 transition-opacity duration-200 hover:opacity-100\"\n              >\n                <div className=\"flex items-center gap-2\"><FaGoogle className=\"h-6 w-6\" /><span className=\"font-semibold text-lg\">Google</span></div>\n              </motion.div>\n\n              <motion.div\n                variants={logoItemVariants}\n                className=\"will-change-transform opacity-70 transition-opacity duration-200 hover:opacity-100\"\n              >\n                <div className=\"flex items-center gap-2\"><AdobeXdIcon className=\"h-6 w-6\" /><span className=\"font-semibold text-lg\">Adobe</span></div>\n              </motion.div>\n\n              <motion.div\n                variants={logoItemVariants}\n                className=\"will-change-transform opacity-70 transition-opacity duration-200 hover:opacity-100\"\n              >\n                <div className=\"flex items-center gap-2\"><MicrosoftIcon className=\"h-6 w-6\" /><span className=\"font-semibold text-lg\">Microsoft</span></div>\n              </motion.div>\n\n              <motion.div\n                variants={logoItemVariants}\n                className=\"will-change-transform opacity-70 transition-opacity duration-200 hover:opacity-100\"\n              >\n                <div className=\"flex items-center gap-2\"><StripeIcon className=\"h-6 w-6\" /><span className=\"font-semibold text-lg\">Stripe</span></div>\n              </motion.div>\n            </motion.div>\n          </div>\n\n        </div>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-41.tsx"
    }
  ],
  "type": "registry:ui"
}