{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-1",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "badge",
    "button",
    "navigation-menu",
    "sheet",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-1.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 {\n  Cpu,\n  Layers,\n  GitBranch,\n  Terminal,\n  ArrowUpRight,\n  Menu,\n} from \"lucide-react\";\n\nexport function Navigation1() {\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=\"flex h-8 w-8 items-center justify-center text-primary \">\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=\"h-5 rounded-full bg-primary px-2 text-[10px] text-primary-foreground hover:bg-primary dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/20\"\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 relative flex h-full flex-col justify-between overflow-hidden rounded-2xl p-6 ring ring-primary/50 transition-all\"\n                        >\n                          <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent group-hover:opacity-100 dark:from-primary/10\" />\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=\"mb-3 border-primary bg-white text-primary dark:border-primary dark:bg-neutral-950 dark:text-primary\"\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=\"mt-4 flex items-center text-sm font-medium text-primary dark:text-primary\">\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          <Button\n            variant=\"ghost\"\n            className=\"rounded-xl text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n          >\n            Sign in\n          </Button>\n          <Button className=\"rounded-xl bg-primary px-4 py-2 text-white hover:bg-primary dark:bg-primary dark:text-white dark:hover:bg-primary\">\n            Get started\n          </Button>\n        </div>\n\n        <div className=\"lg:hidden\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"h-10 w-10 px-0 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900\"\n              >\n                <Menu className=\"h-6 w-6\" />\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=\"flex h-8 w-8 items-center justify-center text-primary dark:text-primary\">\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=\"block py-2 text-base font-medium text-neutral-900 transition-colors hover:text-primary dark:text-neutral-50 dark:hover:text-primary\"\n                >\n                  Features\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"flex items-center justify-between py-2 text-base font-medium text-neutral-900 transition-colors hover:text-primary dark:text-neutral-50 dark:hover:text-primary\"\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=\"justify-between py-2 text-base font-medium text-neutral-900 no-underline transition-colors hover:text-primary hover:no-underline dark:text-neutral-50 dark:hover:text-primary\">\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=\"text-sm font-medium tracking-tight text-neutral-600 hover:text-primary dark:text-neutral-300 dark:hover:text-primary\"\n                        >\n                          Compute Engine\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-600 hover:text-primary dark:text-neutral-300 dark:hover:text-primary\"\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=\"text-sm font-medium tracking-tight text-neutral-600 hover:text-primary dark:text-neutral-300 dark:hover:text-primary\"\n                        >\n                          Fraud Detection\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-600 hover:text-primary dark:text-neutral-300 dark:hover:text-primary\"\n                        >\n                          Predictive Analytics\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium tracking-tight text-neutral-600 hover:text-primary dark:text-neutral-300 dark:hover:text-primary\"\n                        >\n                          LLM Gateways\n                        </a>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                </Accordion>\n\n                <a\n                  href=\"#\"\n                  className=\"block py-2 text-base font-medium tracking-tight text-neutral-900 transition-colors hover:text-primary dark:text-neutral-50 dark:hover:text-primary\"\n                >\n                  Customers\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"block py-2 text-base font-medium tracking-tight text-neutral-900 transition-colors hover:text-primary dark:text-neutral-50 dark:hover:text-primary\"\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\n                  variant=\"outline\"\n                  className=\"w-full justify-center rounded-xl border-neutral-200 bg-white text-neutral-900 hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:hover:bg-neutral-800/50\"\n                >\n                  Sign in\n                </Button>\n                <Button className=\"w-full justify-center rounded-xl bg-primary text-white hover:bg-primary dark:bg-primary dark:text-white dark:hover:bg-primary\">\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-1.tsx"
    }
  ],
  "type": "registry:ui"
}