{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-7",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-7.tsx",
      "content": "import { useState, type ReactNode } from \"react\";\nimport { AnimatePresence, motion, type Variants } from \"motion/react\";\nimport { FaArrowDown, FaArrowRight, FaBars, FaXmark } from \"react-icons/fa6\";\nimport { ChevronDown } from \"lucide-react\";\nimport LogoIcon from \"@/assets/logo-icon\";\n\nexport interface Hero7NavItem {\n  label: string;\n  href: string;\n  active?: boolean;\n}\n\nexport interface Hero7Props {\n  logo?: ReactNode;\n  logoText?: string;\n  navItems?: Hero7NavItem[];\n  signupText?: string;\n  signupHref?: string;\n  languageLabel?: string;\n  title?: string;\n  titleAccent?: string;\n  description?: string;\n  primaryCtaText?: string;\n  primaryCtaHref?: string;\n  secondaryCtaText?: string;\n  secondaryCtaHref?: string;\n  scrollText?: string;\n  backgroundImage?: string;\n}\n\nconst navItemsDefault: Hero7NavItem[] = [\n  { label: \"Home\", href: \"#\", active: true },\n  { label: \"Products\", href: \"#\" },\n  { label: \"About us\", href: \"#\" },\n  { label: \"Features\", href: \"#\" },\n  { label: \"Services\", 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,delay:0.2 },\n  },\n};\n\nconst copyContainer: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      delayChildren: 0.12,\n      staggerChildren: 0.25,\n    },\n  },\n};\n\nconst copyItem: Variants = {\n  hidden: { opacity: 0, x: -34, filter: \"blur(10px)\" },\n  visible: {\n    opacity: 1,\n    x: 0,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", duration: 0.72, bounce: 0,delay:0.7 },\n  },\n};\n\nconst imageVariants: Variants = {\n  hidden: { opacity: 0, y: 86, scale: 1.04, filter: \"blur(12px)\" },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    filter: \"blur(0px)\",\n    transition: { type: \"spring\", duration: 1.5, bounce: 0 },\n  },\n};\n\n\nfunction FlagIcon() {\n  return (\n    <span\n      className=\"grid h-4 w-5 shrink-0 overflow-hidden rounded-[2px] shadow-[0_0_0_1px_rgba(0,0,0,0.1)]\"\n      aria-hidden=\"true\"\n    >\n      <span className=\"bg-red-600\" />\n      <span className=\"bg-white\" />\n      <span className=\"bg-red-600\" />\n    </span>\n  );\n}\n\nexport function Hero7({\n  logo,\n  logoText = \"Watermelon\",\n  navItems = navItemsDefault,\n  signupText = \"Sign up\",\n  signupHref = \"#\",\n  languageLabel = \"EN\",\n  title = \"Building Bold Ideas\",\n  titleAccent = \"Into Reality.\",\n  description = \"Experiences that stand strong, scale fast, and look exceptional. We help brands and businesses design meaningful digital\",\n  primaryCtaText = \"View work\",\n  primaryCtaHref = \"#\",\n  secondaryCtaText = \"Start Journey\",\n  secondaryCtaHref = \"#\",\n  scrollText = \"Scroll to Discover\",\n  backgroundImage = \"https://assets.watermelon.sh/hero-7-bg.avif\",\n}: Hero7Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <section className=\"relative isolate flex  w-full overflow-hidden bg-sky-200 text-blue-950 antialiased min-h-screen font-sans\">\n      <div className=\"absolute inset-0 bg-sky-200\" />\n      <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_31%_22%,rgba(255,255,255,0.42),transparent_34%),linear-gradient(180deg,rgba(191,219,254,0.96)_0%,rgba(219,234,254,0.86)_42%,rgba(239,246,255,0.42)_100%)]\" />\n\n      <motion.div\n        variants={imageVariants}\n        initial=\"hidden\"\n        whileInView=\"visible\"\n        viewport={{ once: true, amount: 0.35 }}\n        className=\"absolute inset-0\"\n      >\n        <img\n          src={backgroundImage}\n          alt=\"\"\n          aria-hidden=\"true\"\n          className=\"h-full w-full object-cover  outline outline-1 outline-black/10\"\n        />\n        <div className=\"absolute inset-0 bg-gradient-to-t from-white/0 via-sky-100/0 to-sky-200/10\" />\n      </motion.div>\n\n      <div className=\"relative z-10 flex min-h-[720px] w-full flex-col px-7 py-4 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-2\">\n            {logo ?? <LogoIcon className=\"size-8 text-white\" />}\n            <span className=\"text-2xl leading-none font-normal tracking-normal text-blue-950\">\n              {logoText}\n            </span>\n          </a>\n\n          <nav className=\"hidden items-center gap-2 rounded-full md:flex\">\n            {navItems.map((item) => (\n              <a\n                key={item.label}\n                href={item.href}\n                className={\n                  item.active\n                    ? \"inline-flex min-h-10 items-center rounded-full bg-blue-100 px-6 text-md font-medium text-blue-950 shadow-[0_1px_0_0.5px_rgba(255,255,255,0.15)_inset,0_8px_18px_rgba(30,64,175,0.1)] transition-[background-color,transform] duration-200 active:scale-[0.96]\"\n                    : \"inline-flex min-h-8 items-center px-2 text-md font-medium text-blue-950/90 transition-colors duration-200 hover:text-sky-700\"\n                }\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"hidden items-center gap-5 md:flex\">\n            <motion.a\n              href={signupHref}\n              whileTap={{ scale: 0.96 }}\n              className=\"inline-flex min-h-10 items-center rounded-[10px] bg-blue-100 px-6 text-base font-medium text-blue-950 shadow-[0_1px_0_0.5px_rgba(255,255,255,0.7)_inset,0_10px_24px_rgba(30,64,175,0.08)] transition-[background-color,transform,box-shadow] duration-200 hover:bg-sky-50\"\n            >\n              {signupText}\n            </motion.a>\n            <button\n              type=\"button\"\n              className=\"inline-flex min-h-10 items-center gap-2 text-sm font-medium text-blue-950 transition-colors duration-200 hover:text-blue-800\"\n            >\n              <FlagIcon />\n              <span>{languageLabel}</span>\n               <ChevronDown className=\"h-4 w-4\" />\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-[10px] bg-white text-blue-950 shadow-[0_8px_18px_rgba(30,64,175,0.08)] transition-transform duration-200 active:scale-[0.96] md:hidden\"\n          >\n            <FaBars className=\"h-4 w-4\" />\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-white/92 p-4 shadow-2xl shadow-blue-950/10  outline-1 outline-black/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-2 text-blue-950\">\n                  {logo ?? <LogoIcon className=\"text-blue-200 size-8\" />}\n                  <span className=\"text-2xl font-normal\">{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-[10px] text-blue-950 transition-[background-color,transform] duration-200 hover:bg-sky-100 active:scale-[0.96]\"\n                >\n                  <FaXmark className=\"h-5 w-5\" />\n                </button>\n              </div>\n\n              <nav className=\"mt-6 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-blue-950 transition-colors duration-200 hover:bg-sky-100\"\n                  >\n                    {item.label}\n                  </a>\n                ))}\n              </nav>\n\n              <motion.a\n                href={signupHref}\n                whileTap={{ scale: 0.96 }}\n                className=\"mt-5 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-blue-950 px-5 text-sm font-semibold text-white transition-[background-color,transform] duration-200 hover:bg-blue-900\"\n              >\n                {signupText}\n              </motion.a>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <div className=\"relative flex flex-1 items-start pt-16 sm:pt-24 lg:pt-28\">\n          <motion.div\n            variants={copyContainer}\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, amount: 0.42 }}\n            className=\"\"\n          >\n            <motion.h1\n              variants={copyItem}\n              className=\"text-[clamp(3.3rem,8vw,5.15rem)] max-w-7xl w-full  leading-[0.96] font-normal tracking-normal  text-blue-950 \"\n            >\n              <span className=\"block tracking-tight\">{title}</span>\n              <span className=\"mt-1 block font-serif text-[0.88em] leading-[0.95] font-normal italic\">\n                {titleAccent}\n              </span>\n            </motion.h1>\n\n            <motion.p\n              variants={copyItem}\n              className=\"mt-6 max-w-xl w-full text-md leading-[1.55] font-medium text-pretty text-blue-950/90 \"\n            >\n              {description}\n            </motion.p>\n\n            <motion.div\n              variants={copyItem}\n              className=\"mt-6 flex flex-wrap items-center gap-6\"\n            >\n              <motion.a\n                href={primaryCtaHref}\n                whileTap={{ scale: 0.96 }}\n                className=\"inline-flex min-h-12 items-center justify-center rounded-[10px] bg-linear-to-b from-blue-900 to-blue-950 px-9 text-base font-normal text-white shadow-[0_12px_30px_rgba(30,58,138,0.1),inset_0_-0.5px_2px_1px_rgba(0,0,0,0.5),inset_0_0px_0_2px_var(--color-blue-800)] transition-[background-color,transform,box-shadow] duration-200 hover:bg-blue-950/90\"\n              >\n                {primaryCtaText}\n              </motion.a>\n\n              <motion.a\n                href={secondaryCtaHref}\n                whileTap={{ scale: 0.96 }}\n                className=\"group inline-flex min-h-10 items-center gap-2 text-base font-medium text-blue-950 transition-colors duration-200 hover:text-blue-900\"\n              >\n                <span>{secondaryCtaText}</span>\n                <FaArrowRight className=\"h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1\" />\n              </motion.a>\n            </motion.div>\n          </motion.div>\n\n          <motion.a\n            href=\"#\"\n            variants={copyItem}\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, amount: 0.4 }}\n            className=\"absolute right-0 bottom-[24%] hidden min-h-10 items-center gap-3 text-sm font-medium text-blue-950 transition-colors duration-200 hover:text-blue-800 lg:inline-flex\"\n          >\n            <span>{scrollText}</span>\n            <FaArrowDown className=\"h-3 w-3\" />\n          </motion.a>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hero-7.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"
}