{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar2",
  "title": "Navbar Exemple 2",
  "description": "Modern responsive navigation bar with animated interactions, customizable links, and mobile menu support.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/navbar/navbar2.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, ChevronDown, Languages, Menu, X } from \"lucide-react\";\nimport {\n  FaXTwitter, // X\n  FaInstagram, // Instagram\n  FaLinkedin, // LinkedIn\n  FaYoutube, // YouTube\n  FaThreads, // Threads\n  FaWhatsapp, // WhatsApp\n} from \"react-icons/fa6\";\n\ntype MegaColumn = {\n  eyebrow: string;\n  links: { label: string; href: string; active?: boolean; badge?: string }[];\n};\n\ntype MegaMenu = {\n  columns: MegaColumn[];\n  footerLinks?: { label: string; href: string }[];\n  showSocials?: boolean;\n  image: { src: string; alt: string };\n  imageCaption?: string;\n};\n\nconst SOLUTIONS_MENU: MegaMenu = {\n  columns: [\n    {\n      eyebrow: \"Our Solutions\",\n      links: [\n        { label: \"For employees\", href: \"/solutions/salaries\", active: true },\n        { label: \"For businesses\", href: \"/solutions/entreprises\" },\n      ],\n    },\n    {\n      eyebrow: \"Join us\",\n      links: [{ label: \"Become a partner\", href: \"/partenaire\" }],\n    },\n  ],\n  footerLinks: [\n    { label: \"Legal notice\", href: \"/mentions-legales\" },\n    { label: \"Privacy policy\", href: \"/confidentialite\" },\n    { label: \"Terms of use\", href: \"/cgu\" },\n  ],\n  showSocials: true,\n  image: {\n    src: \"https://picsum.photos/seed/solutions/1200/630\",\n    alt: \"Solution preview\",\n  },\n  imageCaption: \"See how teams use Bag\\\\Ui\",\n};\n\nconst PRICING_MENU: MegaMenu = {\n  columns: [\n    {\n      eyebrow: \"Plans\",\n      links: [\n        { label: \"Starter\", href: \"/pricing/starter\" },\n        { label: \"Pro\", href: \"/pricing/pro\", active: true, badge: \"Popular\" },\n        { label: \"Enterprise\", href: \"/pricing/enterprise\" },\n      ],\n    },\n    {\n      eyebrow: \"Details\",\n      links: [\n        { label: \"Compare all plans\", href: \"/pricing/compare\" },\n        { label: \"Billing FAQ\", href: \"/pricing/faq\" },\n        { label: \"Talk to sales\", href: \"/contact\" },\n      ],\n    },\n  ],\n  footerLinks: [\n    { label: \"Student & non-profit discounts\", href: \"/pricing/discounts\" },\n  ],\n  image: {\n    src: \"https://picsum.photos/seed/pricing/1200/630\",\n    alt: \"Pricing preview\",\n  },\n  imageCaption: \"Plans that grow with your team\",\n};\n\nconst RESOURCES_MENU: MegaMenu = {\n  columns: [\n    {\n      eyebrow: \"Learn\",\n      links: [\n        { label: \"Blog\", href: \"/resources/blog\" },\n        { label: \"Guides\", href: \"/resources/guides\" },\n        { label: \"Webinars\", href: \"/resources/webinars\", badge: \"New\" },\n      ],\n    },\n    {\n      eyebrow: \"Support\",\n      links: [\n        { label: \"Help center\", href: \"/resources/help\" },\n        { label: \"API documentation\", href: \"/resources/docs\" },\n        { label: \"Community\", href: \"/resources/community\" },\n      ],\n    },\n  ],\n  footerLinks: [{ label: \"Changelog\", href: \"/resources/changelog\" }],\n  image: {\n    src: \"https://picsum.photos/seed/resources/1200/630\",\n    alt: \"Resources preview\",\n  },\n  imageCaption: \"Everything you need to get started\",\n};\n\nconst MEGA_MENUS: Record<string, MegaMenu> = {\n  Solutions: SOLUTIONS_MENU,\n  Pricing: PRICING_MENU,\n  Resources: RESOURCES_MENU,\n};\n\nconst NAV_ITEMS = [\n  { label: \"Solutions\", hasMenu: true },\n  { label: \"Pricing\", hasMenu: true },\n  { label: \"Resources\", hasMenu: true },\n  { label: \"Contact\", hasMenu: false, href: \"/contact\" },\n] as const;\n\nconst LANGUAGES = [\n  { code: \"EN\", label: \"English\" },\n  { code: \"FR\", label: \"Français\" },\n  { code: \"ES\", label: \"Español\" },\n  { code: \"DE\", label: \"Deutsch\" },\n] as const;\n\nconst SOCIALS = [\n  { href: \"#\", label: \"X\", icon: FaXTwitter },\n  { href: \"#\", label: \"Instagram\", icon: FaInstagram },\n  { href: \"#\", label: \"LinkedIn\", icon: FaLinkedin },\n  { href: \"#\", label: \"YouTube\", icon: FaYoutube },\n  { href: \"#\", label: \"Threads\", icon: FaThreads },\n  { href: \"#\", label: \"WhatsApp\", icon: FaWhatsapp },\n];\n\nexport default function Navbar2() {\n  const [openMenu, setOpenMenu] = useState<string | null>(null);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [langOpen, setLangOpen] = useState(false);\n  const [language, setLanguage] = useState<(typeof LANGUAGES)[number]>(\n    LANGUAGES[0],\n  );\n  const langRef = useRef<HTMLDivElement>(null);\n\n  const toggleMenu = (label: string, hasMenu: boolean) => {\n    if (!hasMenu) {\n      setOpenMenu(null);\n      return;\n    }\n    setLangOpen(false);\n    setOpenMenu((current) => (current === label ? null : label));\n  };\n\n  // Close the language dropdown on outside click.\n  useEffect(() => {\n    if (!langOpen) return;\n    const handleClick = (e: MouseEvent) => {\n      if (langRef.current && !langRef.current.contains(e.target as Node)) {\n        setLangOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [langOpen]);\n\n  const activeMenu = openMenu ? MEGA_MENUS[openMenu] : null;\n\n  return (\n    <header className=\"relative flex justify-center px-4 py-4\">\n      <div className=\"w-full max-w-7xl\">\n        <motion.div\n          layout\n          transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}\n          className=\"overflow-hidden rounded-3xl border border-zinc-200/60 bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-8px_rgba(0,0,0,0.10)]\"\n        >\n          {/* Top row */}\n          <div className=\"flex items-center justify-between gap-4 px-6 py-4 sm:px-8\">\n            {/* Logo */}\n            <Link href=\"/\" className=\"flex shrink-0 items-center gap-2\">\n              <span className=\"text-[1.35rem] font-semibold tracking-tight text-zinc-900\">\n                Bag\\Ui\n              </span>\n            </Link>\n\n            {/* Desktop nav */}\n            <nav className=\"hidden items-center gap-1 lg:flex\">\n              {NAV_ITEMS.map((item) => {\n                const isOpen = openMenu === item.label;\n                if (!item.hasMenu) {\n                  return (\n                    <Link\n                      key={item.label}\n                      href={item.href ?? \"#\"}\n                      onClick={() => toggleMenu(item.label, false)}\n                      className=\"rounded-full px-4 py-2 text-[15px] font-medium text-zinc-600 transition-colors hover:bg-zinc-50 hover:text-zinc-900\"\n                    >\n                      {item.label}\n                    </Link>\n                  );\n                }\n                return (\n                  <button\n                    key={item.label}\n                    onClick={() => toggleMenu(item.label, item.hasMenu)}\n                    aria-expanded={isOpen}\n                    className={`flex items-center gap-1 rounded-full px-4 py-2 text-[15px] font-medium transition-colors ${\n                      isOpen\n                        ? \"bg-zinc-100 text-zinc-900\"\n                        : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\"\n                    }`}\n                  >\n                    {item.label}\n                    <ChevronDown\n                      className={`h-4 w-4 transition-transform duration-300 ${\n                        isOpen ? \"rotate-180\" : \"\"\n                      }`}\n                    />\n                  </button>\n                );\n              })}\n            </nav>\n\n            {/* Right actions */}\n            <div className=\"hidden shrink-0 items-center gap-3 lg:flex\">\n              {/* Language switcher */}\n              <div className=\"relative\" ref={langRef}>\n                <button\n                  onClick={() => {\n                    setOpenMenu(null);\n                    setLangOpen((v) => !v);\n                  }}\n                  aria-expanded={langOpen}\n                  className={`flex items-center gap-1.5 rounded-full px-3 py-2 text-sm font-medium transition-colors ${\n                    langOpen\n                      ? \"bg-zinc-100 text-zinc-900\"\n                      : \"text-zinc-600 hover:bg-zinc-50\"\n                  }`}\n                >\n                  <Languages className=\"h-4 w-4\" />\n                  {language.code}\n                  <ChevronDown\n                    className={`h-3.5 w-3.5 transition-transform duration-300 ${\n                      langOpen ? \"rotate-180\" : \"\"\n                    }`}\n                  />\n                </button>\n\n                <AnimatePresence>\n                  {langOpen && (\n                    <motion.div\n                      initial={{ opacity: 0, y: -6, scale: 0.97 }}\n                      animate={{ opacity: 1, y: 0, scale: 1 }}\n                      exit={{ opacity: 0, y: -6, scale: 0.97 }}\n                      transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }}\n                      className=\"absolute right-0 top-full z-20 mt-2 w-44 overflow-hidden rounded-2xl border border-zinc-200/60 bg-white p-1.5 shadow-[0_12px_32px_-8px_rgba(0,0,0,0.15)]\"\n                    >\n                      {LANGUAGES.map((lng) => (\n                        <button\n                          key={lng.code}\n                          onClick={() => {\n                            setLanguage(lng);\n                            setLangOpen(false);\n                          }}\n                          className=\"flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm font-medium text-zinc-700 hover:bg-zinc-50\"\n                        >\n                          <span>\n                            {lng.label}{\" \"}\n                            <span className=\"text-zinc-400\">({lng.code})</span>\n                          </span>\n                          {lng.code === language.code && (\n                            <Check className=\"h-4 w-4 text-zinc-900\" />\n                          )}\n                        </button>\n                      ))}\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              <Link\n                href=\"/connexion\"\n                className=\"rounded-full border border-zinc-200 bg-zinc-50 px-5 py-2.5 text-sm font-semibold text-zinc-900 transition-colors hover:bg-zinc-100\"\n              >\n                Sign in\n              </Link>\n\n              <Link\n                href=\"/demo\"\n                className=\"rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-zinc-800\"\n              >\n                Request a demo\n              </Link>\n            </div>\n\n            {/* Mobile trigger */}\n            <button\n              onClick={() => setMobileOpen((v) => !v)}\n              className=\"flex items-center justify-center rounded-full p-2 text-zinc-700 lg:hidden\"\n              aria-label=\"Open menu\"\n            >\n              {mobileOpen ? (\n                <X className=\"h-6 w-6\" />\n              ) : (\n                <Menu className=\"h-6 w-6\" />\n              )}\n            </button>\n          </div>\n\n          {/* Desktop mega dropdown — shared across Solutions / Pricing / Resources */}\n          <AnimatePresence initial={false}>\n            {activeMenu && (\n              <motion.div\n                key={openMenu}\n                initial={{ height: 0, opacity: 0 }}\n                animate={{ height: \"auto\", opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}\n                className=\"hidden overflow-hidden lg:block\"\n              >\n                <div className=\"grid grid-cols-[1fr_1fr_auto] gap-10 px-8 pb-8 pt-2\">\n                  {activeMenu.columns.map((col, colIdx) => (\n                    <div key={col.eyebrow} className=\"flex flex-col gap-6\">\n                      <span className=\"w-fit rounded-full border border-zinc-200 px-4 py-1.5 text-xs font-medium text-zinc-500\">\n                        {col.eyebrow}\n                      </span>\n                      <ul className=\"flex flex-col gap-4\">\n                        {col.links.map((link) => (\n                          <li key={link.label}>\n                            <Link\n                              href={link.href}\n                              className={`group flex items-center gap-2 text-xl font-semibold text-zinc-900 hover:text-zinc-600 ${\n                                link.active\n                                  ? \"underline underline-offset-4\"\n                                  : \"\"\n                              }`}\n                            >\n                              {link.label}\n                              {link.badge && (\n                                <span className=\"rounded-full bg-zinc-900 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white group-hover:bg-zinc-700\">\n                                  {link.badge}\n                                </span>\n                              )}\n                            </Link>\n                          </li>\n                        ))}\n                      </ul>\n\n                      {/* Footer links sit under the last column */}\n                      {colIdx === activeMenu.columns.length - 1 &&\n                        activeMenu.footerLinks && (\n                          <div className=\"mt-auto flex flex-col gap-2 pt-16\">\n                            {activeMenu.footerLinks.map((item) => (\n                              <Link\n                                key={item.label}\n                                href={item.href}\n                                className=\"text-sm text-zinc-400 hover:text-zinc-600\"\n                              >\n                                {item.label}\n                              </Link>\n                            ))}\n                          </div>\n                        )}\n                    </div>\n                  ))}\n\n                  {/* Preview image */}\n                  <div className=\"relative hidden h-64 w-72 flex-col justify-end overflow-hidden rounded-2xl md:flex\">\n                    <img\n                      src={activeMenu.image.src}\n                      alt={activeMenu.image.alt}\n                      className=\"absolute inset-0 h-full w-full object-cover\"\n                    />\n                    {activeMenu.imageCaption && (\n                      <div className=\"relative z-10 bg-gradient-to-t from-black/70 to-transparent p-4 pt-10\">\n                        <p className=\"text-sm font-medium text-white\">\n                          {activeMenu.imageCaption}\n                        </p>\n                      </div>\n                    )}\n                  </div>\n                </div>\n\n                {/* Socials — only shown when the menu opts in */}\n                {activeMenu.showSocials && (\n                  <div className=\"flex items-center gap-4 px-8 pb-8\">\n                    {SOCIALS.map(({ href, label, icon: Icon }) => (\n                      <a\n                        key={label}\n                        href={href}\n                        aria-label={label}\n                        className=\"text-zinc-700 hover:text-zinc-900\"\n                      >\n                        <Icon className=\"h-5 w-5\" />\n                      </a>\n                    ))}\n                  </div>\n                )}\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          {/* Mobile panel */}\n          <AnimatePresence initial={false}>\n            {mobileOpen && (\n              <motion.div\n                key=\"mobile-panel\"\n                initial={{ height: 0, opacity: 0 }}\n                animate={{ height: \"auto\", opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"overflow-hidden lg:hidden\"\n              >\n                <div className=\"flex flex-col gap-1 px-6 pb-6\">\n                  {NAV_ITEMS.map((item) =>\n                    item.hasMenu ? (\n                      <button\n                        key={item.label}\n                        onClick={() => toggleMenu(item.label, true)}\n                        className=\"flex items-center justify-between rounded-xl px-3 py-3 text-left text-base font-medium text-zinc-700 hover:bg-zinc-50\"\n                      >\n                        {item.label}\n                        <ChevronDown\n                          className={`h-4 w-4 transition-transform ${\n                            openMenu === item.label ? \"rotate-180\" : \"\"\n                          }`}\n                        />\n                      </button>\n                    ) : (\n                      <Link\n                        key={item.label}\n                        href={item.href ?? \"#\"}\n                        className=\"flex items-center justify-between rounded-xl px-3 py-3 text-left text-base font-medium text-zinc-700 hover:bg-zinc-50\"\n                      >\n                        {item.label}\n                      </Link>\n                    ),\n                  )}\n\n                  {activeMenu && (\n                    <div className=\"ml-3 flex flex-col gap-3 border-l border-zinc-100 pl-4 pt-2\">\n                      {activeMenu.columns.flatMap((c) =>\n                        c.links.map((link) => (\n                          <Link\n                            key={link.label}\n                            href={link.href}\n                            className=\"flex items-center gap-2 text-sm text-zinc-600\"\n                          >\n                            {link.label}\n                            {link.badge && (\n                              <span className=\"rounded-full bg-zinc-900 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white\">\n                                {link.badge}\n                              </span>\n                            )}\n                          </Link>\n                        )),\n                      )}\n                    </div>\n                  )}\n\n                  {/* Mobile language switcher */}\n                  <div className=\"mt-2 flex flex-col gap-1 border-t border-zinc-100 pt-4\">\n                    <span className=\"px-3 text-xs font-medium uppercase tracking-wide text-zinc-400\">\n                      Language\n                    </span>\n                    <div className=\"flex flex-wrap gap-2 px-3 pt-1\">\n                      {LANGUAGES.map((lng) => (\n                        <button\n                          key={lng.code}\n                          onClick={() => setLanguage(lng)}\n                          className={`rounded-full border px-3 py-1.5 text-sm font-medium transition-colors ${\n                            lng.code === language.code\n                              ? \"border-zinc-900 bg-zinc-900 text-white\"\n                              : \"border-zinc-200 text-zinc-600 hover:bg-zinc-50\"\n                          }`}\n                        >\n                          {lng.code}\n                        </button>\n                      ))}\n                    </div>\n                  </div>\n\n                  <div className=\"mt-4 flex flex-col gap-3 border-t border-zinc-100 pt-4\">\n                    <Link\n                      href=\"/connexion\"\n                      className=\"rounded-full border border-zinc-200 bg-zinc-50 px-5 py-2.5 text-center text-sm font-semibold text-zinc-900\"\n                    >\n                      Sign in\n                    </Link>\n                    <Link\n                      href=\"/demo\"\n                      className=\"rounded-full bg-zinc-900 px-5 py-2.5 text-center text-sm font-semibold text-white\"\n                    >\n                      Request a demo\n                    </Link>\n                  </div>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/navbar-ex-2.tsx"
    }
  ],
  "type": "registry:block"
}