{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-3",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-3.tsx",
      "content": "\nimport { useState, type ReactNode } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\nimport {\n  FaChevronDown,\n  FaArrowRight,\n  FaArrowDown,\n  FaBars,\n  FaXmark,\n} from 'react-icons/fa6';\nimport LogoIcon from '@/assets/logo-icon';\n\nexport interface Hero3NavItem {\n  label: string;\n  href: string;\n  hasDropdown?: boolean;\n}\n\nexport interface Hero3Stat {\n  value: string;\n  label: string;\n}\n\nexport interface Hero3Props {\n  /** Brand logo icon */\n  logo?: ReactNode;\n  /** Brand logo text */\n  logoText?: string;\n  /** List of navigation items for the header */\n  navItems?: Hero3NavItem[];\n  /** Sign in button text */\n  signInText?: string;\n  /** Sign in button URL */\n  signInHref?: string;\n  /** Top tagline text above headline */\n  tagline?: string;\n  /** Headline line 1 */\n  titleLine1?: string;\n  /** Headline line 2 */\n  titleLine2?: string;\n  /** Body description paragraph */\n  description?: string;\n  /** Primary solid button CTA text */\n  primaryCtaText?: string;\n  /** Primary solid button CTA URL */\n  primaryCtaHref?: string;\n  /** Secondary arrow CTA text */\n  secondaryCtaText?: string;\n  /** Secondary arrow CTA URL */\n  secondaryCtaHref?: string;\n  /** Background image URL */\n  backgroundImage?: string;\n  /** Array of stat items for bottom row */\n  stats?: Hero3Stat[];\n  /** Scroll to discover CTA text */\n  scrollText?: string;\n  /** Scroll to discover CTA URL */\n  scrollHref?: string;\n}\n\nconst container: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.12,\n      staggerChildren: 0.1,\n    },\n  },\n};\n\nconst item: Variants = {\n  hidden: { opacity: 0, y: 18, 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\nexport function Hero3({\n  logo,\n  logoText = 'Watermelon',\n  navItems = [\n    { label: 'Solutions', href: '#', hasDropdown: true },\n    { label: 'Technology', href: '#', hasDropdown: true },\n    { label: 'Documentation', href: '#' },\n    { label: 'Community', href: '#' },\n  ],\n  signInText = 'Sign in',\n  signInHref = '#',\n  tagline = 'Quantum-powered. Designed for scale.',\n  titleLine1 = 'Unleashing Potential',\n  titleLine2 = 'Across The Cosmos.',\n  description = 'We engineer decentralized infrastructure and quantum applications that accelerate compute speeds and unlock next-generation solutions.',\n  primaryCtaText = 'Explore Platform',\n  primaryCtaHref = '#',\n  secondaryCtaText = 'Request Access',\n  secondaryCtaHref = '#',\n  backgroundImage = 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1920',\n  stats = [\n    { value: '250+', label: 'Nodes Deployed' },\n    { value: '1.2B', label: 'Queries Processed' },\n    { value: '99.9%', label: 'Uptime Guaranteed' },\n  ],\n  scrollText = 'Scroll to Discover',\n  scrollHref = '#',\n}: Hero3Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <section className=\"dark bg-background text-foreground relative min-h-screen w-full overflow-hidden font-sans\">\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 brightness-40 select-none\"\n          />\n        </div>\n      )}\n\n      <motion.header\n        initial={{ opacity: 0, y: -14, filter: \"blur(8px)\" }}\n        whileInView={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n        viewport={{ once: true, amount: 0.6 }}\n        transition={{ type: \"spring\", duration: 0.6, bounce: 0 }}\n        className=\"absolute top-0 left-0 z-30 w-full\"\n      >\n        <div className=\"flex max-w-full items-center justify-between px-6 py-6 sm:px-10 md:px-16 lg:px-20\">\n          <a\n            href=\"#\"\n            className=\"text-foreground flex items-center gap-2.5 text-2xl font-light tracking-tight sm:text-xl\"\n          >\n            <span className=\"text-primary flex items-center justify-center\">\n              {logo || <LogoIcon className=\"size-8 text-white\" />}\n            </span>\n            <span>{logoText}</span>\n          </a>\n\n          <nav className=\"hidden items-center gap-8 md:flex\">\n            {navItems.map((item) => (\n              <a\n                key={item.label}\n                href={item.href}\n                className=\"group text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm font-medium transition-colors duration-200\"\n              >\n                <span>{item.label}</span>\n                {item.hasDropdown && (\n                  <FaChevronDown className=\"text-muted-foreground h-3 w-3 fill-current transition-transform duration-200 group-hover:translate-y-0.5\" />\n                )}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"hidden md:block\">\n            <a\n              href={signInHref}\n              className=\"border-border/80 bg-background/20 text-foreground hover:bg-accent hover:text-accent-foreground rounded-full border px-6 py-2 text-sm font-medium backdrop-blur-sm transition-all duration-200\"\n            >\n              {signInText}\n            </a>\n          </div>\n\n          <button\n            onClick={() => setMobileMenuOpen(true)}\n            className=\"text-foreground hover:bg-accent flex items-center justify-center rounded-full p-2 transition-colors 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      <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=\"bg-background/95 fixed inset-0 z-50 flex flex-col p-6 backdrop-blur-md md:hidden\"\n          >\n          <div className=\"flex items-center justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-foreground flex items-center gap-2.5 text-lg font-semibold tracking-tight\"\n              onClick={() => setMobileMenuOpen(false)}\n            >\n              <span className=\"text-primary flex items-center justify-center\">\n                {logo || <LogoIcon className=\"size-8 fill-current\" />}\n              </span>\n              <span>{logoText}</span>\n            </a>\n            <button\n              onClick={() => setMobileMenuOpen(false)}\n              className=\"text-foreground hover:bg-accent flex items-center justify-center rounded-full p-2 transition-colors\"\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=\"border-border/40 text-foreground hover:text-primary flex items-center justify-between border-b pb-3 text-lg font-medium transition-colors\"\n                onClick={() => setMobileMenuOpen(false)}\n              >\n                <span>{item.label}</span>\n                {item.hasDropdown && (\n                  <FaChevronDown className=\"text-muted-foreground h-4 w-4 fill-current\" />\n                )}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"mt-auto\">\n            <a\n              href={signInHref}\n              onClick={() => setMobileMenuOpen(false)}\n              className=\"border-border bg-background text-foreground hover:bg-accent flex w-full items-center justify-center rounded-full border py-3 text-base font-medium transition-colors\"\n            >\n              {signInText}\n            </a>\n          </div>\n        </motion.div>\n        )}\n      </AnimatePresence>\n\n      <div className=\"relative z-10 flex min-h-screen max-w-7xl flex-col justify-between px-6 pt-32 pb-12 sm:px-10 md:px-16 md:pt-40 lg:px-20 lg:pt-48\">\n        <motion.div\n          variants={container}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.38 }}\n          className=\"flex flex-1 flex-col justify-center\"\n        >\n          <div className=\"max-w-4xl\">\n            {tagline && (\n              <motion.p\n                variants={item}\n                className=\"sm:text-md mb-4 font-light tracking-wide text-white/90\"\n              >\n                {tagline}\n              </motion.p>\n            )}\n\n            <motion.h1\n              variants={item}\n              className=\"text-foreground mb-6 text-4xl font-light tracking-tight sm:text-5xl md:text-6xl lg:text-7xl \"\n            >\n              {titleLine1 && <span className=\"block\">{titleLine1}</span>}\n              {titleLine2 && <span className=\"block\">{titleLine2}</span>}\n            </motion.h1>\n\n            {description && (\n              <motion.p\n                variants={item}\n                className=\"sm:text-md md:text-md leading-wide mb-4 max-w-2xl text-base text-zinc-300\"\n              >\n                {description}\n              </motion.p>\n            )}\n\n            <motion.div\n              variants={item}\n              className=\"mt-6 flex flex-wrap items-center gap-4 sm:gap-6\"\n            >\n              {primaryCtaText && (\n                <a\n                  href={primaryCtaHref}\n                  className=\"rounded-full bg-white px-8 py-3.5 text-sm font-normal text-black shadow-lg transition-all duration-200 sm:text-base\"\n                >\n                  {primaryCtaText}\n                </a>\n              )}\n              {secondaryCtaText && (\n                <a\n                  href={secondaryCtaHref}\n                  className=\"group inline-flex items-center gap-2 text-sm font-light text-zinc-100 transition-colors duration-200 hover:text-zinc-300 sm:text-base\"\n                >\n                  <span>{secondaryCtaText}</span>\n                  <FaArrowRight className=\"h-4 w-4 fill-current transition-transform duration-200 group-hover:translate-x-1\" />\n                </a>\n              )}\n            </motion.div>\n          </div>\n        </motion.div>\n\n        <motion.div\n          variants={container}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.6 }}\n          className=\"border-border/20 mt-12 border-t pt-8 sm:mt-16\"\n        >\n          <div className=\"flex flex-col justify-between gap-8 md:flex-row md:items-center\">\n            {stats.length > 0 && (\n              <div className=\"flex flex-col divide-y divide-white/50 md:flex-row md:items-center md:divide-x md:divide-y-0\">\n                {stats.map((stat) => (\n                  <motion.div\n                    variants={item}\n                    key={stat.label}\n                    className=\"flex flex-col gap-1.5 py-4 first:pt-0 last:pb-0 md:px-6 md:py-0 md:first:pl-0 md:last:pr-0\"\n                  >\n                    <span className=\"text-foreground text-3xl font-light tracking-tight sm:text-4xl\">\n                      {stat.value}\n                    </span>\n\n                    <span className=\"text-xs text-zinc-300 sm:text-sm\">\n                      {stat.label}\n                    </span>\n                  </motion.div>\n                ))}\n              </div>\n            )}\n\n            {scrollText && (\n              <motion.a\n                variants={item}\n                href={scrollHref}\n                className=\"text-muted-foreground/80 hover:text-foreground flex items-center gap-2 self-start text-xs font-semibold transition-colors sm:text-sm md:self-auto\"\n              >\n                <span>{scrollText}</span>\n                <FaArrowDown className=\"h-4 w-4 fill-current\" />\n              </motion.a>\n            )}\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-3.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"
}