{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-8",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-8.tsx",
      "content": "import { useState, type ReactNode } from 'react';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\nimport { FaBars, FaChevronDown, FaPlay, FaXmark } from 'react-icons/fa6';\nimport LogoIcon from '@/assets/logo-icon';\n\nexport interface Hero8NavItem {\n  label: string;\n  href: string;\n}\n\nexport interface Hero8Props {\n  logo?: ReactNode;\n  logoText?: string;\n  navItems?: Hero8NavItem[];\n  loginText?: string;\n  loginHref?: string;\n  badgeText?: string;\n  title?: string;\n  titleAccent?: string;\n  description?: string;\n  videoText?: string;\n  videoHref?: string;\n  scrollText?: string;\n  backgroundImage?: string;\n}\n\nconst navItemsDefault: Hero8NavItem[] = [\n  { label: 'Pricing', href: '#' },\n  { label: 'Products', href: '#' },\n  { label: 'About', href: '#' },\n  { label: 'Features', href: '#' },\n  { label: 'Support', href: '#' },\n];\n\nconst navVariants: Variants = {\n  hidden: { opacity: 0, y: -22, filter: 'blur(10px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { type: 'spring', duration: 0.65, bounce: 0 },\n  },\n};\n\nconst contentContainer: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.15,\n      staggerChildren: 0.1,\n    },\n  },\n};\n\nconst contentItem: Variants = {\n  hidden: { opacity: 0, y: 22, filter: 'blur(12px)' },\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.05, filter: 'blur(12px)' },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    filter: 'blur(0px)',\n    transition: { type: 'spring', duration: 1.05, bounce: 0 },\n  },\n};\n\n\n\nexport function Hero8({\n  logo,\n  logoText = 'Watermelon',\n  navItems = navItemsDefault,\n  loginText = 'Login',\n  loginHref = '#',\n  badgeText = 'Introduce our advance hosting',\n  title = 'Shape A Better World',\n  titleAccent = 'Through New Moments',\n  description = 'Elevate the way people interact with your brand. Launch and scale experiential with Way.',\n  videoText = 'Watch Video',\n  videoHref = '#',\n  scrollText = 'Scroll to Discover',\n  backgroundImage = 'https://assets.watermelon.sh/hero-8-bg.avif',\n}: Hero8Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <section className=\"relative isolate flex w-full overflow-hidden bg-cyan-950 font-sans text-white 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      >\n        <img\n          src={backgroundImage}\n          alt=\"\"\n          aria-hidden=\"true\"\n          className=\"h-full w-full object-cover object-center opacity-75 outline outline-1 outline-white/10\"\n        />\n      </motion.div>\n\n      <div className=\"relative z-10 flex min-h-[720px] w-full flex-col px-7 py-5 sm:min-h-screen sm:px-10 lg:px-12\">\n        <motion.header\n          variants={navVariants}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.8 }}\n          className=\"flex items-center justify-between\"\n        >\n          <a href=\"#\" className=\"flex min-h-10 items-center gap-3\">\n            {logo ?? <LogoIcon className='size-8 ' />}\n            <span className=\"text-xl leading-none font-medium tracking-normal text-white\">\n              {logoText}\n            </span>\n          </a>\n\n          <nav className=\"hidden items-center gap-14 md:flex\">\n            {navItems.map((item) => (\n              <a\n                key={item.label}\n                href={item.href}\n                className=\"hover:text-blue- inline-flex min-h-10 items-center text-base font-medium text-white/95 transition-colors duration-200\"\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"hidden items-center gap-7 md:flex\">\n            <motion.a\n              href={loginHref}\n              whileTap={{ scale: 0.96 }}\n              className=\"inline-flex min-h-11 items-center justify-center rounded-full border border-white/90 px-8 text-base font-medium text-white shadow-[0_1px_0_rgba(255,255,255,0.18)_inset] backdrop-blur-sm transition-[background-color,border-color,transform] duration-200 hover:bg-white/10\"\n            >\n              {loginText}\n            </motion.a>\n            <button\n              type=\"button\"\n              aria-label=\"Open menu\"\n              onClick={() => setMobileMenuOpen(true)}\n              className=\"flex min-h-10 min-w-10 items-center justify-center text-white transition-transform duration-200 active:scale-[0.96]\"\n            >\n              <FaBars className=\"h-6 w-6\" />\n            </button>\n          </div>\n\n          <button\n            type=\"button\"\n            aria-label=\"Open navigation menu\"\n            onClick={() => setMobileMenuOpen(true)}\n            className=\"flex min-h-10 min-w-10 items-center justify-center rounded-full border border-white/60 text-white backdrop-blur-sm transition-[background-color,transform] duration-200 active:scale-[0.96] md:hidden\"\n          >\n            <FaBars className=\"h-5 w-5\" />\n          </button>\n        </motion.header>\n\n        <AnimatePresence initial={false}>\n          {mobileMenuOpen && (\n            <motion.div\n              initial={{ opacity: 0, y: -12, filter: 'blur(8px)' }}\n              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, y: -8, filter: 'blur(6px)' }}\n              transition={{ type: 'spring', duration: 0.3, bounce: 0 }}\n              className=\"fixed inset-x-4 top-4 z-50 rounded-2xl bg-cyan-950/88 p-4 shadow-2xl shadow-cyan-950/50 outline outline-1 outline-white/10 backdrop-blur-xl md:hidden\"\n            >\n              <div className=\"flex items-center justify-between pl-3\">\n                <a href=\"#\" className=\"flex items-center gap-3\">\n                  {logo ?? <LogoIcon className='size-8' />}\n                  <span className=\"text-xl font-medium\">{logoText}</span>\n                </a>\n                <button\n                  type=\"button\"\n                  aria-label=\"Close navigation menu\"\n                  onClick={() => setMobileMenuOpen(false)}\n                  className=\"flex min-h-10 min-w-10 items-center justify-center rounded-full text-white transition-[background-color,transform] duration-200 hover:bg-white/10 active:scale-[0.96]\"\n                >\n                  <FaXmark className=\"h-5 w-5\" />\n                </button>\n              </div>\n\n              <nav className=\"mt-7 grid gap-1\">\n                {navItems.map((item) => (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    onClick={() => setMobileMenuOpen(false)}\n                    className=\"rounded-xl px-3 py-3 text-base font-medium text-white transition-colors duration-200 hover:bg-white/10\"\n                  >\n                    {item.label}\n                  </a>\n                ))}\n              </nav>\n\n              <motion.a\n                href={loginHref}\n                whileTap={{ scale: 0.96 }}\n                className=\"mt-5 inline-flex min-h-11 w-full items-center justify-center rounded-full border border-white/80 text-sm font-semibold text-white transition-[background-color,transform] duration-200 hover:bg-white/10\"\n              >\n                {loginText}\n              </motion.a>\n            </motion.div>\n          )}\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-5xl flex-1 flex-col items-center justify-center pt-16 pb-16 text-center sm:pt-20 lg:pt-24\"\n        >\n          <motion.div\n            variants={contentItem}\n            className=\"inline-flex min-h-7 items-center gap-2 rounded-full border border-white/90 px-3.5 text-[11px] font-medium text-white shadow-[0_1px_0_rgba(255,255,255,0.18)_inset] backdrop-blur-sm\"\n          >\n            <span\n              className=\"h-2.5 w-2.5 rounded-full bg-white shadow-[0_0_12px_rgba(255,255,255,0.65)]\"\n              aria-hidden=\"true\"\n            />\n            {badgeText}\n          </motion.div>\n\n          <motion.h1\n            variants={contentItem}\n            className=\"mt-8 max-w-[960px] text-[clamp(3.25rem,7.6vw,5.65rem)] leading-[0.95] font-normal tracking-normal text-balance text-white\"\n          >\n            <span className=\"block\">{title}</span>\n            <span className=\"mt-3 block font-serif text-[0.78em] leading-[0.92] font-normal italic\">\n              {titleAccent}\n            </span>\n          </motion.h1>\n\n          <motion.p\n            variants={contentItem}\n            className=\"mt-8 max-w-[630px] text-xl leading-[1.35] font-normal text-pretty text-white/95\"\n          >\n            {description}\n          </motion.p>\n\n          <motion.a\n            href={videoHref}\n            variants={contentItem}\n            whileTap={{ scale: 0.96 }}\n            className=\"group mt-14 inline-flex min-h-12 items-center gap-3 text-xl font-medium text-white transition-colors duration-200 hover:text-cyan-100\"\n          >\n            <span className=\"flex h-10 w-10 items-center justify-center rounded-full border border-white shadow-[0_1px_0_rgba(255,255,255,0.22)_inset] transition-[background-color,transform] duration-200 group-hover:bg-white/10\">\n              <FaPlay className=\"ml-0.5 h-3.5 w-3.5\" />\n            </span>\n            <span>{videoText}</span>\n          </motion.a>\n        </motion.div>\n\n        <motion.a\n          href=\"#\"\n          initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}\n          whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n          viewport={{ once: true, amount: 0.8 }}\n          transition={{\n            type: 'spring',\n            duration: 0.65,\n            bounce: 0,\n            delay: 0.45,\n          }}\n          className=\"mx-auto mb-5 inline-flex min-h-12 flex-col items-center justify-center gap-2 text-base font-normal text-white/90 transition-colors duration-200 hover:text-white sm:mb-7\"\n        >\n          <span>{scrollText}</span>\n          <FaChevronDown className=\"h-4 w-4 text-cyan-100\" />\n        </motion.a>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-8.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"
}