{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "accordion",
    "badge",
    "button",
    "navigation-menu",
    "sheet",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-2.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from \"@/components/ui/navigation-menu\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Sheet, SheetContent, SheetTrigger } from \"@/components/ui/sheet\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Cpu, Layers, GitBranch, Terminal, ArrowUpRight, Menu, Moon } from \"lucide-react\";\nimport { FaGithub as Github } from \"react-icons/fa6\";\n\nexport function Navigation2() {\n  return (\n    <div className=\"relative w-full border-b border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950\">\n      <div className=\"mx-auto flex h-16 max-w-7xl items-center justify-between px-6\">\n        <div className=\"flex items-center gap-6\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"text-primary dark:text-primary flex h-8 w-8 items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"h-6 w-6 fill-current\"\n              >\n                <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" />\n              </svg>\n            </div>\n            <span className=\"text-lg font-bold tracking-tight text-neutral-900 lg:hidden dark:text-white\">\n              Watermelon\n            </span>\n          </div>\n\n          <div className=\"hidden lg:block\">\n            <NavigationMenu\n              className={cn(\n                \"static\",\n                // Outer absolute wrapper positioning\n                \"[&>.absolute]:inset-x-0 [&>.absolute]:top-full [&>.absolute]:w-full\",\n                // Viewport sizing and geometry\n                \"[&_[data-slot=navigation-menu-viewport]]:mt-1 [&_[data-slot=navigation-menu-viewport]]:!w-full\",\n                \"[&_[data-slot=navigation-menu-viewport]]:rounded-none [&_[data-slot=navigation-menu-viewport]]:shadow-none [&_[data-slot=navigation-menu-viewport]]:ring-0\",\n                // Viewport borders and backgrounds\n                \"[&_[data-slot=navigation-menu-viewport]]:border-0 [&_[data-slot=navigation-menu-viewport]]:border-b\",\n                \"[&_[data-slot=navigation-menu-viewport]]:border-neutral-200 dark:[&_[data-slot=navigation-menu-viewport]]:border-neutral-800\",\n                \"[&_[data-slot=navigation-menu-viewport]]:bg-white dark:[&_[data-slot=navigation-menu-viewport]]:bg-neutral-950\",\n                // Viewport smooth animations\n                \"[&_[data-slot=navigation-menu-viewport]]:transition-all [&_[data-slot=navigation-menu-viewport]]:duration-300 [&_[data-slot=navigation-menu-viewport]]:ease-in-out\",\n                \"[&_[data-slot=navigation-menu-viewport]]:data-open:fade-in-0 [&_[data-slot=navigation-menu-viewport]]:data-closed:fade-out-0\",\n                \"[&_[data-slot=navigation-menu-viewport]]:data-open:zoom-in-100 [&_[data-slot=navigation-menu-viewport]]:data-closed:zoom-out-100\",\n              )}\n            >\n              <NavigationMenuList className=\"gap-6\">\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Features\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"flex items-center gap-2 rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Developers\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-primary text-primary-foreground hover:bg-primary dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/20 h-5 rounded-full px-2 text-[10px]\"\n                    >\n                      API\n                    </Badge>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem className=\"gap-5\">\n                  <NavigationMenuTrigger className=\"h-auto rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-all hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 data-[active]:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50 dark:focus:bg-neutral-800/50 dark:focus:text-neutral-50 dark:data-[active]:bg-neutral-800/50 dark:data-[state=open]:bg-neutral-800/50\">\n                    Solutions\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent className=\"!w-full\">\n                    <div className=\"mx-auto grid max-w-6xl grid-cols-4 gap-6 divide-x px-6 py-8\">\n                      {/* Column 1 */}\n                      <div className=\"flex flex-col\">\n                        <div className=\"mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900\">\n                          <Cpu className=\"h-5 w-5 text-neutral-700 dark:text-neutral-300\" />\n                        </div>\n                        <h4 className=\"mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-50\">\n                          Compute Engine\n                        </h4>\n                        <p className=\"mb-3 text-sm tracking-tight text-neutral-500 dark:text-neutral-400\">\n                          Train and deploy models with infinite scale\n                          infrastructure.\n                        </p>\n                        <div className=\"flex flex-wrap gap-2\">\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <Layers className=\"h-3.5 w-3.5\" />\n                            Pipelines\n                          </Button>\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <GitBranch className=\"h-3.5 w-3.5\" />\n                            Webhooks\n                          </Button>\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <Terminal className=\"h-3.5 w-3.5\" />\n                            CLI Tool\n                          </Button>\n                        </div>\n                      </div>\n\n                      {/* Column 2 */}\n                      <div className=\"flex flex-col gap-3\">\n                        <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Use Cases\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Fraud Detection\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Personalized Search\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Predictive Analytics\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          LLM Gateways\n                        </a>\n                      </div>\n\n                      {/* Column 3 */}\n                      <div className=\"flex flex-col gap-3\">\n                        <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Resources\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Documentation\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          API Reference\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          System Status\n                        </a>\n                      </div>\n\n                      {/* Column 4 */}\n                      <div className=\"flex flex-col\">\n                        <h4 className=\"mb-4 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Featured\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"group ring-primary/50 relative flex h-full flex-col justify-between overflow-hidden rounded-2xl p-6 ring transition-all\"\n                        >\n                          <div className=\"from-primary/5 dark:from-primary/10 absolute inset-0 bg-gradient-to-br via-transparent to-transparent group-hover:opacity-100\" />\n                          <div className=\"absolute inset-0 -z-10 bg-neutral-100 dark:bg-neutral-900\" />\n\n                          <div>\n                            <Badge\n                              variant=\"outline\"\n                              className=\"border-primary text-primary dark:border-primary dark:text-primary mb-3 bg-white dark:bg-neutral-950\"\n                            >\n                              Upcoming Webinar\n                            </Badge>\n                            <h4 className=\"mb-2 text-sm font-semibold text-neutral-900 dark:text-neutral-50\">\n                              Building scalable AI pipelines\n                            </h4>\n                            <p className=\"text-sm tracking-tight text-neutral-600 dark:text-neutral-400\">\n                              Join our engineers for a live teardown of the new\n                              Compute Engine architecture.\n                            </p>\n                          </div>\n\n                          <div className=\"text-primary dark:text-primary mt-4 flex items-center text-sm font-medium\">\n                            Register now{\" \"}\n                            <ArrowUpRight className=\"ml-1 size-4 transition-transform group-hover:translate-x-1\" />\n                          </div>\n                        </a>\n                      </div>\n                    </div>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Customers\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Enterprise\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <div className=\"mr-1 flex items-center gap-1.5\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon-lg\"\n              className=\"rounded-xl text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/50\"\n            >\n              <Github className=\"h-5 w-5\" />\n              <span className=\"sr-only\">GitHub Repository</span>\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-lg\"\n              className=\"rounded-xl text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/50\"\n            >\n              <Moon className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n          </div>\n          <Button className=\"bg-primary hover:bg-primary dark:bg-primary dark:hover:bg-primary rounded-xl px-4 py-2 text-white dark:text-white\">\n            Get started\n          </Button>\n        </div>\n\n        <div className=\"flex items-center gap-0.5 lg:hidden\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-lg\"\n            className=\"shrink-0 rounded-lg text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900\"\n          >\n            <Github className=\"h-5 w-5\" />\n            <span className=\"sr-only\">GitHub Repository</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-lg\"\n            className=\"shrink-0 rounded-lg text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900\"\n          >\n            <Moon className=\"h-5 w-5\" />\n            <span className=\"sr-only\">Toggle theme</span>\n          </Button>\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                size=\"icon-lg\"\n                variant=\"ghost\"\n                className=\"shrink-0 px-0 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side=\"right\"\n              className=\"flex w-[300px] flex-col gap-6 border-l border-neutral-200 bg-white p-6 text-neutral-900 sm:w-[400px] dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50\"\n            >\n              <div className=\"mb-4 flex items-center gap-2\">\n                <div className=\"text-primary dark:text-primary flex h-8 w-8 items-center justify-center\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className=\"h-6 w-6 fill-current\"\n                  >\n                    <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" />\n                  </svg>\n                </div>\n                <span className=\"text-lg font-bold tracking-tight text-neutral-900 dark:text-white\">\n                  Watermelon\n                </span>\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                <a\n                  href=\"#\"\n                  className=\"hover:text-primary dark:hover:text-primary block py-2 text-base font-medium text-neutral-900 transition-colors dark:text-neutral-50\"\n                >\n                  Features\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"hover:text-primary dark:hover:text-primary flex items-center justify-between py-2 text-base font-medium text-neutral-900 transition-colors dark:text-neutral-50\"\n                >\n                  Developers\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-primary text-primary dark:bg-primary/20 dark:text-primary\"\n                  >\n                    API\n                  </Badge>\n                </a>\n\n                <Accordion type=\"single\" collapsible className=\"w-full\">\n                  <AccordionItem value=\"solutions\" className=\"border-none\">\n                    <AccordionTrigger className=\"hover:text-primary dark:hover:text-primary justify-between py-2 text-base font-medium text-neutral-900 no-underline transition-colors hover:no-underline dark:text-neutral-50\">\n                      Solutions\n                    </AccordionTrigger>\n                    <AccordionContent className=\"mt-1 ml-2 flex !h-auto flex-col gap-3 border-l border-neutral-200 pb-0 pl-4 dark:border-neutral-800 [&_a]:no-underline\">\n                      <div className=\"flex flex-col gap-2\">\n                        <span className=\"text-xs text-neutral-400 uppercase\">\n                          Infrastructure\n                        </span>\n                        <a\n                          href=\"#\"\n                          className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                        >\n                          Compute Engine\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                        >\n                          System Status\n                        </a>\n                      </div>\n                      <div className=\"mt-2 flex flex-col gap-2\">\n                        <span className=\"text-xs text-neutral-400 uppercase\">\n                          Use Cases\n                        </span>\n                        <a\n                          href=\"#\"\n                          className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                        >\n                          Fraud Detection\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                        >\n                          Predictive Analytics\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                        >\n                          LLM Gateways\n                        </a>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                </Accordion>\n\n                <a\n                  href=\"#\"\n                  className=\"hover:text-primary dark:hover:text-primary block py-2 text-base font-medium tracking-tight text-neutral-900 transition-colors dark:text-neutral-50\"\n                >\n                  Customers\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"hover:text-primary dark:hover:text-primary block py-2 text-base font-medium tracking-tight text-neutral-900 transition-colors dark:text-neutral-50\"\n                >\n                  Enterprise\n                </a>\n              </div>\n\n              <div className=\"mt-auto flex flex-col gap-3 border-t border-neutral-200 pt-6 dark:border-neutral-800\">\n                <Button className=\"bg-primary hover:bg-primary dark:bg-primary dark:hover:bg-primary w-full justify-center rounded-xl text-white dark:text-white\">\n                  Get started\n                </Button>\n              </div>\n            </SheetContent>\n          </Sheet>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-2.tsx"
    }
  ],
  "type": "registry:ui"
}