{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-9",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-9.tsx",
      "content": "import { useState, type ReactNode } from \"react\";\nimport { AnimatePresence, motion, type Variants } from \"motion/react\";\nimport { FaArrowRight, FaChevronDown, FaXmark } from \"react-icons/fa6\";\nimport LogoIcon from \"@/assets/logo-icon\";\n\nexport interface Hero9NavItem {\n  label: string;\n  href: string;\n  hasMenu?: boolean;\n}\n\nexport interface Hero9Avatar {\n  src: string;\n  alt: string;\n}\n\nexport interface Hero9Props {\n  logo?: ReactNode;\n  logoText?: string;\n  navItems?: Hero9NavItem[];\n  ctaText?: string;\n  ctaHref?: string;\n  eyebrowText?: string;\n  avatars?: Hero9Avatar[];\n  title?: string;\n  description?: string;\n  emailPlaceholder?: string;\n  formAction?: string;\n  submitText?: string;\n  backgroundImage?: string;\n}\n\nconst defaultNavItems: Hero9NavItem[] = [\n  { label: \"Features\", href: \"#\", hasMenu: true },\n  { label: \"Pricing\", href: \"#\", hasMenu: true },\n  { label: \"About\", href: \"#\" },\n  { label: \"Resources\", href: \"#\" },\n  { label: \"FAQs\", href: \"#\" },\n];\n\nconst defaultAvatars: Hero9Avatar[] = [\n  {\n    src: \"https://assets.watermelon.sh/wm_ben.png\",\n    alt: \"MistPeak user\",\n  },\n  {\n    src: \"https://assets.watermelon.sh/wm_alex.png\",\n    alt: \"MistPeak user\",\n  },\n  {\n    src: \"https://assets.watermelon.sh/wm_olivia.png\",\n    alt: \"MistPeak user\",\n  },\n];\n\nconst defaultBackground = \"https://assets.watermelon.sh/hero-9-bg.avif\";\n\nconst headerVariants: Variants = {\n  hidden: { opacity: 0, y: -18, filter: \"blur(8px)\" },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", duration: 0.68, bounce: 0, delay: 0.4 },\n  },\n};\n\nconst contentContainer: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.12,\n      staggerChildren: 0.1,\n      delay: 0.3,\n    },\n  },\n};\n\nconst contentItem: Variants = {\n  hidden: { opacity: 0, y: 18, filter: \"blur(8px)\" },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", duration: 0.72, bounce: 0 },\n  },\n};\n\nconst backgroundVariants: Variants = {\n  hidden: { opacity: 0, scale: 1.035, filter: \"blur(10px)\" },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", duration: 1.15, bounce: 0 },\n  },\n};\n\nexport function Hero9({\n  logo,\n  logoText = \"Watermelon\",\n  navItems = defaultNavItems,\n  ctaText = \"Book Demo\",\n  ctaHref = \"#\",\n  eyebrowText = \"Over 1k happy users\",\n  avatars = defaultAvatars,\n  title = \"Breathe In Peace\\nBreathe Out The world\",\n  description = \"Confidential, professional help tailored to your unique\\nneeds, available on your schedule.\",\n  emailPlaceholder = \"Enter your Email\",\n  formAction = \"#\",\n  submitText = \"Start for Free\",\n  backgroundImage = defaultBackground,\n}: Hero9Props) {\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  return (\n    <section className=\"relative isolate  w-full overflow-hidden bg-sky-300 font-sans text-slate-950 antialiased min-h-screen\">\n      <motion.div\n        variants={backgroundVariants}\n        initial=\"hidden\"\n        whileInView=\"visible\"\n        viewport={{ once: true, amount: 0.35 }}\n        className=\"absolute inset-0 will-change-transform\"\n        aria-hidden=\"true\"\n      >\n        <img\n          src={backgroundImage}\n          alt=\"\"\n          className=\"h-full w-full object-cover object-center  outline-1 outline-black/10\"\n        />\n      </motion.div>\n\n      <div className=\"relative z-10 mx-auto flex min-h-[760px] w-full max-w-[1440px] flex-col px-5 py-4 sm:min-h-screen sm:px-9 lg:px-[58px]\">\n        <motion.header\n          variants={headerVariants}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.8 }}\n          className=\"flex h-12 items-center justify-between\"\n        >\n          <a\n            href=\"#\"\n            className=\"inline-flex min-h-10 items-center gap-2.5 text-slate-950 transition-[opacity,transform] duration-200 ease-out hover:opacity-75 active:scale-[0.96]\"\n          >\n            {logo ?? <LogoIcon className=\"size-8 text-white\" />}\n            <span className=\"text-lg leading-none font-normal tracking-[-0.02em]\">\n              {logoText}\n            </span>\n          </a>\n\n          <nav className=\"hidden items-center gap-[42px] lg:flex\">\n            {navItems.map((item) => (\n              <a\n                key={item.label}\n                href={item.href}\n                className=\"group inline-flex min-h-10 items-center gap-1.5 text-sm leading-none font-medium text-slate-900 transition-colors duration-200 ease-out hover:text-slate-600\"\n              >\n                <span>{item.label}</span>\n                {item.hasMenu ? (\n                  <FaChevronDown className=\"size-2.5 transition-transform duration-200 group-hover:translate-y-px\" />\n                ) : null}\n              </a>\n            ))}\n          </nav>\n\n          <motion.a\n            href={ctaHref}\n            whileTap={{ scale: 0.96 }}\n            className=\"group hidden min-h-10 items-center gap-2 rounded-full bg-white/92 px-5 text-sm leading-none font-medium text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08),0_12px_30px_rgba(255,255,255,0.18)] backdrop-blur-md transition-[background-color,box-shadow,transform] duration-200 ease-out hover:bg-white hover:shadow-[0_2px_4px_rgba(15,23,42,0.1),0_16px_36px_rgba(255,255,255,0.26)] sm:inline-flex\"\n          >\n            <span>{ctaText}</span>\n            <FaArrowRight className=\"size-3 transition-transform duration-200 group-hover:translate-x-1\" />\n          </motion.a>\n\n          <button\n            type=\"button\"\n            aria-label=\"Open navigation menu\"\n            onClick={() => setMobileOpen(true)}\n            className=\"inline-flex size-10 items-center justify-center rounded-full bg-white/90 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] backdrop-blur-md transition-[background-color,transform] duration-200 ease-out hover:bg-white active:scale-[0.96] lg:hidden\"\n          >\n            <span className=\"h-3.5 w-4 bg-[linear-gradient(to_bottom,currentColor_0_2px,transparent_2px_6px,currentColor_6px_8px,transparent_8px_12px,currentColor_12px_14px)]\" />\n          </button>\n        </motion.header>\n\n        <AnimatePresence initial={false}>\n          {mobileOpen ? (\n            <motion.div\n              initial={{ opacity: 0, y: -10, filter: \"blur(8px)\" }}\n              animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n              exit={{ opacity: 0, y: -6, filter: \"blur(5px)\" }}\n              transition={{ type: \"spring\", duration: 0.3, bounce: 0 }}\n              className=\"fixed inset-x-4 top-4 z-50 rounded-[28px] bg-white/90 p-4 text-slate-950 shadow-[0_24px_80px_rgba(15,23,42,0.22)] outline outline-1 outline-white/70 backdrop-blur-xl lg:hidden\"\n            >\n              <div className=\"flex items-center justify-between pl-3\">\n                <a href=\"#\" className=\"inline-flex items-center gap-2.5\">\n                  {logo ?? <LogoIcon className=\"size-8 text-zinc-200\" />}\n                  <span className=\"text-base font-semibold tracking-[-0.02em]\">\n                    {logoText}\n                  </span>\n                </a>\n                <button\n                  type=\"button\"\n                  aria-label=\"Close navigation menu\"\n                  onClick={() => setMobileOpen(false)}\n                  className=\"inline-flex size-10 items-center justify-center rounded-full text-slate-950 transition-[background-color,transform] duration-200 ease-out hover:bg-slate-950/5 active:scale-[0.96]\"\n                >\n                  <FaXmark className=\"size-4\" />\n                </button>\n              </div>\n\n              <nav className=\"mt-5 grid gap-1\">\n                {navItems.map((item) => (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    onClick={() => setMobileOpen(false)}\n                    className=\"inline-flex min-h-11 items-center justify-between rounded-2xl px-3 text-sm font-medium text-slate-900 transition-colors duration-200 ease-out hover:bg-slate-950/5\"\n                  >\n                    <span>{item.label}</span>\n                    {item.hasMenu ? <FaChevronDown className=\"size-3\" /> : null}\n                  </a>\n                ))}\n              </nav>\n\n              <motion.a\n                href={ctaHref}\n                whileTap={{ scale: 0.96 }}\n                className=\"mt-4 inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-full bg-slate-950 px-5 text-sm font-medium text-white transition-[background-color,transform] duration-200 ease-out hover:bg-slate-800\"\n              >\n                {ctaText}\n                <FaArrowRight className=\"size-3\" />\n              </motion.a>\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n\n        <motion.div\n          variants={contentContainer}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.42 }}\n          className=\"mx-auto flex w-full max-w-[760px] flex-1 flex-col items-center pt-[92px] text-center sm:pt-[112px] lg:pt-[102px]\"\n        >\n          <motion.div\n            variants={contentItem}\n            className=\"inline-flex min-h-7 items-center gap-2 rounded-full bg-white/30 px-1 pr-5 text-xs leading-none font-semibold text-slate-700 shadow-[0_1px_1px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.55)] backdrop-blur-md\"\n          >\n            <span className=\"flex -space-x-2\">\n              {avatars.map((avatar) => (\n                <img\n                  key={avatar.src}\n                  src={avatar.src}\n                  alt={avatar.alt}\n                  className=\"size-5 rounded-full object-cover shadow-xs outline-1 -outline-offset-1 outline-white/10\"\n                />\n              ))}\n              <span className=\"grid size-5 -rotate-45 place-items-center rounded-full bg-white text-slate-800\">\n                <FaArrowRight className=\"size-2.5\" />\n              </span>\n            </span>\n            <span>{eyebrowText}</span>\n          </motion.div>\n\n          <motion.h1\n            variants={contentItem}\n            className=\"mt-5 max-w-[735px] text-[clamp(3.05rem,6.1vw,4.75rem)] leading-[0.91] font-medium tracking-[-0.055em] text-balance whitespace-pre-line text-slate-950\"\n          >\n            {title}\n          </motion.h1>\n\n          <motion.p\n            variants={contentItem}\n            className=\"mt-5 max-w-[510px] text-[clamp(0.95rem,1.45vw,1.12rem)] leading-[1.34] font-normal text-pretty whitespace-pre-line text-slate-700\"\n          >\n            {description}\n          </motion.p>\n\n          <motion.form\n            variants={contentItem}\n            action={formAction}\n            className=\"mt-6 flex w-full max-w-md flex-col gap-1.5 rounded-[28px] bg-white/26 p-1.5 shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_50px_rgba(255,255,255,0.34),inset_0_1px_0_rgba(255,255,255,0.55)] outline-1 outline-white/45 backdrop-blur-[1px] min-[430px]:flex-row min-[430px]:rounded-full\"\n          >\n            <label htmlFor=\"hero9-email\" className=\"sr-only\">\n              Email\n            </label>\n            <input\n              id=\"hero9-email\"\n              type=\"email\"\n              placeholder={emailPlaceholder}\n              className=\"min-h-10 w-full min-w-0 flex-1 bg-transparent px-5 text-center text-sm font-medium text-slate-900 outline-none placeholder:text-slate-700/80 min-[430px]:text-left\"\n            />\n            <motion.button\n              type=\"submit\"\n              whileTap={{ scale: 0.96 }}\n              className=\"group inline-flex min-h-10 w-full shrink-0 items-center justify-center gap-1.5 rounded-full bg-white px-4 text-sm font-medium text-slate-900 shadow-[0_1px_2px_rgba(15,23,42,0.08)] transition-[background-color,box-shadow,transform] duration-200 ease-out hover:bg-slate-50 hover:shadow-[0_2px_6px_rgba(15,23,42,0.09)] min-[430px]:w-auto\"\n            >\n              <span>{submitText}</span>\n              <FaArrowRight className=\"size-3 duration-200 group-hover:translate-x-0.5\" />\n            </motion.button>\n          </motion.form>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-9.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"
}