{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-5",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-5.tsx",
      "content": "import { useState, type ReactNode } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\nimport { FaChevronDown, FaBars, FaXmark, FaArrowRight } from 'react-icons/fa6';\nimport LogoIcon from '@/assets/logo-icon';\n\nexport interface Hero5NavItem {\n  label: string;\n  href: string;\n  hasDropdown?: boolean;\n}\n\nexport interface Hero5TrustedBrand {\n  name: string;\n  logo?: ReactNode;\n}\n\nexport interface Hero5Props {\n  /** Brand logo icon */\n  logo?: ReactNode;\n  /** Brand logo text */\n  logoText?: string;\n  /** Navigation items */\n  navItems?: Hero5NavItem[];\n  /** Login button text */\n  loginText?: string;\n  /** Login button URL */\n  loginHref?: string;\n  /** Headline line 1 (regular weight) */\n  titleLine1?: string;\n  /** Headline line 2 (italic accent) */\n  titleLine2Accent?: string;\n  /** Body description paragraph */\n  description?: string;\n  /** Primary CTA text (outlined button) */\n  primaryCtaText?: string;\n  /** Primary CTA URL */\n  primaryCtaHref?: string;\n  /** Secondary CTA text (filled button with arrow) */\n  secondaryCtaText?: string;\n  /** Secondary CTA URL */\n  secondaryCtaHref?: string;\n  /** Background image URL */\n  backgroundImage?: string;\n  /** Trusted brands section title */\n  trustedTitle?: string;\n  /** Trusted brand items */\n  trustedBrands?: Hero5TrustedBrand[];\n}\n\nconst container: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.1,\n      staggerChildren: 0.2,\n    },\n  },\n};\n\nconst item: Variants = {\n  hidden: { opacity: 0, scale: 0.85, y: 20 },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    transition: { type: 'spring', stiffness: 100, damping: 15 },\n  },\n};\n\nexport function Hero5({\n  logo,\n  logoText = 'Apex Creative',\n  navItems = [\n    { label: 'Services', href: '#', hasDropdown: true },\n    { label: 'Plans', href: '#', hasDropdown: true },\n    { label: 'Company', href: '#' },\n    { label: 'Insights', href: '#' },\n    { label: 'Help', href: '#' },\n  ],\n  loginText = 'Login',\n  loginHref = '#',\n  titleLine1 = 'Where Vision Shapes',\n  titleLine2Accent = 'Lasting Impressions',\n  description = 'Crafting digital experiences through bold innovation that captivates audiences, elevates brands, and drives meaningful results.',\n  primaryCtaText = 'Discover More',\n  primaryCtaHref = '#',\n  secondaryCtaText = 'Begin Now',\n  secondaryCtaHref = '#',\n  backgroundImage = 'https://assets.watermelon.sh/hero-5-bg.avif',\n  trustedTitle = 'Trusted By Leading Brands',\n  trustedBrands = [\n    { name: 'Google' },\n    { name: 'Adobe' },\n    { name: 'Microsoft' },\n    { name: 'Stripe' },\n  ],\n}: Hero5Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden bg-black\">\n      {backgroundImage && (\n        <div className=\"absolute inset-0 z-0\">\n          <img\n            src={backgroundImage}\n            alt=\"\"\n            aria-hidden=\"true\"\n            className=\"pointer-events-none h-full w-full object-cover select-none\"\n          />\n        </div>\n      )}\n\n      <motion.header\n        initial={{ opacity: 0, y: -30 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}\n        className=\"relative z-30 w-full\"\n      >\n        <div className=\"mx-auto flex max-w-7xl items-center justify-between px-6 py-5 sm:px-10 lg:px-16\">\n          <a href=\"#\" className=\"flex items-center gap-2 text-white\">\n            <span className=\"flex items-center justify-center\">\n              {logo || (\n                <LogoIcon className='size-6' />\n              )}\n            </span>\n            <span className=\"text-md font-light tracking-wide\">\n              {logoText}\n            </span>\n          </a>\n\n          <nav className=\"hidden items-center gap-7 md:flex\">\n            {navItems.map((item) => (\n              <a\n                key={item.label}\n                href={item.href}\n                className=\"group flex items-center gap-1 text-sm font-normal text-zinc-200 transition-colors duration-200 hover:text-white\"\n              >\n                <span>{item.label}</span>\n                {item.hasDropdown && (\n                  <FaChevronDown className=\"h-2 w-2 fill-current transition-transform duration-200 group-hover:translate-y-px\" />\n                )}\n              </a>\n            ))}\n          </nav>\n\n      \n          <div className=\"hidden md:flex\">\n            <a\n              href={loginHref}\n              className=\"rounded-lg border border-zinc-700 bg-transparent px-6 py-2 text-sm font-medium text-white transition-all duration-200 hover:border-zinc-500 hover:bg-zinc-900\"\n            >\n              {loginText}\n            </a>\n          </div>\n\n          \n          <button\n            onClick={() => setMobileMenuOpen(true)}\n            className=\"flex items-center justify-center rounded-lg p-2 text-white transition-colors hover:bg-zinc-900 md:hidden\"\n            aria-label=\"Toggle navigation menu\"\n          >\n            <FaBars className=\"h-5 w-5 fill-current\" />\n          </button>\n        </div>\n      </motion.header>\n\n   \n      <AnimatePresence>\n        {mobileMenuOpen && (\n          <motion.div\n            initial={{ opacity: 0, x: '100%' }}\n            animate={{ opacity: 1, x: 0 }}\n            exit={{ opacity: 0, x: '100%' }}\n            transition={{ type: 'spring', bounce: 0, duration: 0.4 }}\n            className=\"fixed inset-0 z-50 flex flex-col bg-black/95 p-6 backdrop-blur-md md:hidden\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <a\n                href=\"#\"\n                className=\"flex items-center gap-2 text-white\"\n                onClick={() => setMobileMenuOpen(false)}\n              >\n                <span className=\"flex items-center justify-center\">\n                  {logo || (\n                   <LogoIcon className='size-8'/>\n                  )}\n                </span>\n                <span className=\"text-sm font-semibold tracking-wide\">\n                  {logoText}\n                </span>\n              </a>\n              <button\n                onClick={() => setMobileMenuOpen(false)}\n                className=\"flex items-center justify-center rounded-lg p-2 text-white transition-colors hover:bg-zinc-900\"\n                aria-label=\"Close menu\"\n              >\n                <FaXmark className=\"h-5 w-5 fill-current\" />\n              </button>\n            </div>\n\n            <nav className=\"mt-12 flex flex-col gap-6\">\n              {navItems.map((item) => (\n                <a\n                  key={item.label}\n                  href={item.href}\n                  className=\"flex items-center justify-between border-b border-zinc-800 pb-3 text-lg font-medium text-white transition-colors hover:text-amber-400\"\n                  onClick={() => setMobileMenuOpen(false)}\n                >\n                  <span>{item.label}</span>\n                  {item.hasDropdown && (\n                    <FaChevronDown className=\"h-4 w-4 fill-current text-zinc-500\" />\n                  )}\n                </a>\n              ))}\n            </nav>\n\n            <div className=\"mt-auto\">\n              <a\n                href={loginHref}\n                onClick={() => setMobileMenuOpen(false)}\n                className=\"flex w-full items-center justify-center rounded-full border border-zinc-700 py-3 text-base font-medium text-white transition-colors hover:bg-zinc-900\"\n              >\n                {loginText}\n              </a>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <motion.div\n        variants={container}\n        initial=\"hidden\"\n        whileInView=\"visible\"\n        viewport={{ once: true, amount: 0.2 }}\n        className=\"relative z-10 mt-30 mb-40 flex min-h-full flex-col items-center justify-center px-6 text-center sm:px-10 lg:px-16\"\n      >\n        <div className=\"flex flex-col items-center\">\n          <motion.h1 variants={item} className=\"mb-6 max-w-3xl\">\n            <span className=\"block bg-gradient-to-r from-white to-indigo-200 bg-clip-text text-4xl leading-tight font-light tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl\">\n              {titleLine1}\n            </span>\n            <span className=\"block bg-gradient-to-r from-white to-indigo-200 bg-clip-text font-serif text-4xl leading-tight font-light tracking-tight text-transparent italic sm:text-5xl md:text-6xl lg:text-7xl\">\n              {titleLine2Accent}\n            </span>\n          </motion.h1>\n\n          {description && (\n            <motion.p\n              variants={item}\n              className=\"mb-10 max-w-xl text-sm leading-relaxed font-light text-zinc-200 sm:text-base\"\n            >\n              {description}\n            </motion.p>\n          )}\n\n          <motion.div\n            variants={item}\n            className=\"flex flex-wrap items-center justify-center gap-4\"\n          >\n            {primaryCtaText && (\n              <a\n                href={primaryCtaHref}\n                className=\"rounded-lg border border-zinc-700 bg-transparent bg-white px-7 py-3 text-sm font-medium text-black transition-all duration-200\"\n              >\n                {primaryCtaText}\n              </a>\n            )}\n            {secondaryCtaText && (\n              <a\n                href={secondaryCtaHref}\n                className=\"group inline-flex items-center gap-2.5 rounded-lg bg-white/10 px-7 py-3 text-sm font-medium text-white shadow-sm outline -outline-offset-1 outline-white/20 backdrop-blur-sm\"\n              >\n                <span>{secondaryCtaText}</span>\n                <FaArrowRight className=\"h-3 w-3 fill-current transition-transform duration-200 group-hover:translate-x-0.5\" />\n              </a>\n            )}\n          </motion.div>\n        </div>\n\n        <div className=\"mt-auto pt-20 pb-10 sm:pt-32 sm:pb-14\">\n          {trustedTitle && (\n            <motion.p\n              variants={item}\n              className=\"sm:text-md mb-6 text-sm font-light tracking-wide text-zinc-100 sm:mb-8\"\n            >\n              {trustedTitle}\n            </motion.p>\n          )}\n          {trustedBrands.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-center gap-8 sm:gap-12 md:gap-16\">\n              {trustedBrands.map((brand) => (\n                <motion.span\n                  variants={item}\n                  key={brand.name}\n                  className=\"text-lg font-normal tracking-wide text-white/80 sm:text-xl\"\n                >\n                  {brand.logo || brand.name}\n                </motion.span>\n              ))}\n            </div>\n          )}\n        </div>\n      </motion.div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-5.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"
}