{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-4",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-4.tsx",
      "content": "\nimport { useState, type ReactNode } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\nimport {\n  FaArrowTrendUp,\n  FaShieldHalved,\n  FaEarthAmericas,\n  FaPlay,\n  FaStar,\n  FaBars,\n  FaXmark,\n  FaChevronDown,\n} from 'react-icons/fa6';\nimport LogoIcon from '@/assets/logo-icon';\n\nexport interface Hero4NavItem {\n  label: string;\n  href: string;\n  hasDropdown?: boolean;\n}\n\nexport interface Hero4Stat {\n  value: string;\n  label: string;\n  icon?: ReactNode;\n}\n\nexport interface Hero4SocialLink {\n  label: string;\n  href: string;\n}\n\nexport interface Hero4Props {\n  /** Brand logo icon */\n  logo?: ReactNode;\n  /** Brand logo text */\n  logoText?: string;\n  /** Navigation items */\n  navItems?: Hero4NavItem[];\n  /** Sign in button text */\n  signInText?: string;\n  /** Sign in button URL */\n  signInHref?: string;\n  /** Get started button text */\n  getStartedText?: string;\n  /** Get started button URL */\n  getStartedHref?: string;\n  /** Badge text above the headline */\n  badgeText?: string;\n  /** Headline line 1 */\n  titleLine1?: string;\n  /** Headline line 2 (start — regular color) */\n  titleLine2Start?: string;\n  /** Headline line 2 (end — gradient accent) */\n  titleLine2Accent?: string;\n  /** Body description paragraph */\n  description?: string;\n  /** Primary CTA text */\n  primaryCtaText?: string;\n  /** Primary CTA URL */\n  primaryCtaHref?: string;\n  /** Secondary CTA text */\n  secondaryCtaText?: string;\n  /** Secondary CTA URL */\n  secondaryCtaHref?: string;\n  /** Background image URL */\n  backgroundImage?: string;\n  /** Stats displayed in the bottom bar */\n  stats?: Hero4Stat[];\n  /** Social links in the bottom bar */\n  socialLinks?: Hero4SocialLink[];\n}\n\nconst container: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.2,\n      staggerChildren: 0.15,\n    },\n  },\n};\n\nconst item: Variants = {\n  hidden: { opacity: 0, x: -30, filter: 'blur(5px)' },\n  visible: {\n    opacity: 1,\n    x: 0,\n    filter: 'blur(0px)',\n    transition: { type: 'spring', stiffness: 70, damping: 20 },\n  },\n};\n\nexport function Hero4({\n  logo,\n  logoText = 'Luminary',\n  navItems = [\n    { label: 'Products', href: '#', hasDropdown: false },\n    { label: 'Solutions', href: '#', hasDropdown: false },\n    { label: 'Pricing', href: '#', hasDropdown: false },\n    { label: 'Resources', href: '#', hasDropdown: false },\n  ],\n  signInText = 'Sign in',\n  signInHref = '#',\n  getStartedText = 'Get Started',\n  getStartedHref = '#',\n  badgeText = 'CRAFTED FOR TOMORROW',\n  titleLine1 = 'Where Creativity',\n  titleLine2Start = 'Meets ',\n  titleLine2Accent = 'Brilliance',\n  description = 'Luminary helps teams design, prototype, and ship with cutting-edge tools that turn bold ideas into lasting digital experiences.',\n  primaryCtaText = 'Get Started',\n  primaryCtaHref = '#',\n  secondaryCtaText = 'Watch Demo',\n  secondaryCtaHref = '#',\n  backgroundImage = 'https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?q=80&w=1920',\n  stats = [\n    {\n      value: '10K+',\n      label: 'Active Teams',\n      icon: <FaArrowTrendUp className=\"h-4 w-4 fill-current\" />,\n    },\n    {\n      value: '99.9%',\n      label: 'Uptime',\n      icon: <FaShieldHalved className=\"h-4 w-4 fill-current\" />,\n    },\n    {\n      value: '150+',\n      label: 'Countries',\n      icon: <FaEarthAmericas className=\"h-4 w-4 fill-current\" />,\n    },\n  ],\n  socialLinks = [\n    { label: 'Linkedin', href: '#' },\n    { label: 'Instagram', href: '#' },\n    { label: 'Behance', href: '#' },\n  ],\n}: Hero4Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden bg-slate-950 font-sans text-white\">\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-70 select-none\"\n          />\n        </div>\n      )}\n\n      <motion.header\n        initial={{ opacity: 0, y: -20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.8, ease: 'easeOut' }}\n        className=\"relative z-30 w-full\"\n      >\n        <div className=\"mx-auto flex max-w-full items-center justify-between px-8 py-5 sm:px-12 md:px-16 lg:px-20\">\n          <a\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-medium tracking-tight text-white\"\n          >\n            <span className=\"flex items-center justify-center text-white\">\n              {logo || <LogoIcon className=\"size-8 fill-current\" />}\n            </span>\n            <span className=\"text-md font-light tracking-wide\">{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 flex items-center gap-1 text-sm font-normal text-zinc-300 transition-colors duration-200 hover:text-white\"\n              >\n                <span>{item.label}</span>\n                {item.hasDropdown && (\n                  <FaChevronDown className=\"h-2.5 w-2.5 fill-current transition-transform duration-200 group-hover:translate-y-0.5\" />\n                )}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"hidden items-center gap-3 md:flex\">\n            <a\n              href={signInHref}\n              className=\"flex items-center justify-center rounded-[12px] border border-zinc-700 bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] p-[1px]\"\n            >\n              <div className=\"rounded-lg bg-black px-5 py-2 text-sm font-light text-white transition-all duration-200\">\n                {signInText}\n              </div>\n            </a>\n            <a\n              href={getStartedHref}\n              className=\"rounded-lg bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] px-5 py-2 text-sm font-medium text-white outline-2 -outline-offset-2 outline-white/20 transition-all duration-200 hover:bg-amber-500\"\n            >\n              {getStartedText}\n            </a>\n          </div>\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-800 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>\n        {mobileMenuOpen && (\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 z-50 flex flex-col bg-slate-950/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-lg font-semibold tracking-tight text-white\"\n              onClick={() => setMobileMenuOpen(false)}\n            >\n              <span className=\"flex items-center justify-center text-white\">\n                {logo || <LogoIcon className=\"size-8 fill-current\" />}\n              </span>\n              <span className=\"text-xl font-light tracking-wide uppercase\">\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-800\"\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 flex flex-col gap-3\">\n            <a\n              href={signInHref}\n              className=\"flex items-center justify-center rounded-[12px] border border-zinc-700 bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] p-[1px]\"\n            >\n              <div className=\"w-full rounded-lg bg-black px-5 py-3 text-center text-sm font-light text-white transition-all duration-200\">\n                {signInText}\n              </div>\n            </a>\n            <a\n              href={getStartedHref}\n              onClick={() => setMobileMenuOpen(false)}\n              className=\"flex w-full items-center justify-center rounded-lg bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] py-3 text-base font-medium text-white outline-2 -outline-offset-2 outline-white/20 transition-colors\"\n            >\n              {getStartedText}\n            </a>\n          </div>\n        </motion.div>\n        )}\n      </AnimatePresence>\n\n      <div className=\"relative z-10 flex min-h-screen flex-col justify-between px-8 pt-3 pb-8 sm:px-12 md:px-16 md:pt-24 lg:px-20 lg:pt-32\">\n        <motion.div\n          variants={container}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.3 }}\n          className=\"flex flex-1 flex-col justify-center\"\n        >\n          <div className=\"max-w-3xl\">\n            {badgeText && (\n              <motion.div variants={item} className=\"mb-8\">\n                <span className=\"inline-flex items-center gap-2 rounded-full border border-amber-800/50 bg-amber-950/40 px-4 py-1.5 text-xs font-medium tracking-wider text-amber-400\">\n                  <FaStar className=\"h-3 w-3 fill-amber-400\" />\n                  {badgeText}\n                </span>\n              </motion.div>\n            )}\n\n            <motion.h1 variants={item} className=\"mb-6 text-4xl leading-tight font-normal tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl\">\n              {titleLine1 && <span className=\"block\">{titleLine1}</span>}\n              {(titleLine2Start || titleLine2Accent) && (\n                <span className=\"block\">\n                  {titleLine2Start}\n                  {titleLine2Accent && (\n                    <span className=\"bg-gradient-to-r from-amber-400 via-orange-400 to-rose-400 bg-clip-text text-transparent\">\n                      {titleLine2Accent}\n                    </span>\n                  )}\n                </span>\n              )}\n            </motion.h1>\n\n            {description && (\n              <motion.p variants={item} className=\"sm:text-md mb-8 max-w-lg text-base leading-relaxed font-light text-zinc-200\">\n                {description}\n              </motion.p>\n            )}\n\n            <motion.div variants={item} className=\"flex flex-wrap items-center gap-4\">\n              {primaryCtaText && (\n                <a\n                  href={primaryCtaHref}\n                  className=\"rounded-lg bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] px-7 py-3 text-sm font-medium text-white shadow-lg shadow-amber-600/20 outline-2 -outline-offset-2 outline-white/20 transition-all duration-200 hover:bg-amber-500 hover:shadow-amber-500/30\"\n                >\n                  {primaryCtaText}\n                </a>\n              )}\n              {secondaryCtaText && (\n                <a\n                  href={secondaryCtaHref}\n                  className=\"flex items-center justify-center rounded-[12px] border border-zinc-700 bg-gradient-to-r from-[#4514C1] via-[#E8522D] to-[#F59E45] p-[1px]\"\n                >\n                  <div className=\"flex items-center justify-center rounded-lg bg-black px-5 py-3 text-sm font-light text-white transition-all duration-200\">\n                    {secondaryCtaText}\n                    <FaPlay className=\"ml-2 h-3 w-3 fill-current\" />\n                  </div>\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.4 }}\n          className=\"mt-12 mb-12 sm:mt-12 md:mt-30\"\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-wrap items-center gap-8 sm:gap-12\">\n                {stats.map((stat) => (\n                  <motion.div variants={item} key={stat.label} className=\"flex items-center gap-3\">\n                    {stat.icon && (\n                      <div className=\"flex size-12 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-zinc-200 backdrop-blur-sm\">\n                        {stat.icon}\n                      </div>\n                    )}\n                    <div className=\"flex flex-col\">\n                      <span className=\"text-xl font-light tracking-tight text-white sm:text-3xl\">\n                        {stat.value}\n                      </span>\n                      <span className=\"text-sm font-normal text-zinc-300\">\n                        {stat.label}\n                      </span>\n                    </div>\n                  </motion.div>\n                ))}\n              </div>\n            )}\n\n            {socialLinks.length > 0 && (\n              <div className=\"flex items-center gap-8\">\n                {socialLinks.map((link) => (\n                  <motion.a\n                    variants={item}\n                    key={link.label}\n                    href={link.href}\n                    className=\"text-sm font-normal text-zinc-300 transition-colors duration-200 hover:text-white\"\n                  >\n                    {link.label}\n                  </motion.a>\n                ))}\n              </div>\n            )}\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-4.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"
}