{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-5",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "badge",
    "button",
    "navigation-menu",
    "sheet",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-5.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  Command,\n  User,\n  Menu,\n  ArrowUpRight,\n} from \"lucide-react\";\n\nexport function Navigation5() {\n  return (\n    <div className=\"relative w-full py-10\">\n      <div className=\"mx-auto flex max-w-7xl items-center justify-center px-6\">\n        {/* Floating Navbar Pill */}\n        <div className=\"flex h-16 w-4xl items-center justify-between gap-2 rounded-full border border-neutral-200 bg-white pr-3 shadow-sm md:w-5xl dark:border-neutral-800 dark:bg-neutral-950\">\n          {/* Logo Section */}\n          <div className=\"flex items-center gap-2 pr-6 pl-4\">\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=\"size-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          {/* Desktop Navigation */}\n          <div className=\"hidden lg:block\">\n            <NavigationMenu\n              className={cn(\n                \"static\",\n                // Position the viewport wrapper to be full-width relative to the navbar container\n                \"[&>div:last-child]:inset-x-0 [&>div:last-child]:top-full [&>div:last-child]:w-full\",\n                // Custom viewport styling for the \"island\" look\n                \"[&_[data-slot=navigation-menu-viewport]]:mx-auto [&_[data-slot=navigation-menu-viewport]]:-mt-6 [&_[data-slot=navigation-menu-viewport]]:max-w-7xl [&_[data-slot=navigation-menu-viewport]]:ring-0\",\n                \"[&_[data-slot=navigation-menu-viewport]]:rounded-[2.5rem] [&_[data-slot=navigation-menu-viewport]]:border [&_[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 [&_[data-slot=navigation-menu-viewport]]:shadow-2xl 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-1\">\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-full bg-transparent px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 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-full bg-transparent px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 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-4 rounded-full px-1.5 text-[10px]\"\n                    >\n                      API\n                    </Badge>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"h-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-neutral-600 transition-all hover:bg-neutral-100/50 hover:text-neutral-900 focus:bg-transparent data-[state=open]:bg-neutral-100/80 dark:text-neutral-400 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50 dark:data-[state=open]:bg-neutral-800/80\">\n                    Solutions\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent className=\"p-0\">\n                    <div className=\"grid w-5xl grid-cols-4 gap-6 divide-x divide-neutral-100 px-10 py-10 dark:divide-neutral-900\">\n                      {/* Column 1 */}\n                      <div className=\"flex flex-col px-2\">\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 pl-6\">\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 pl-6\">\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 pl-6\">\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-full bg-transparent px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Customers\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-full bg-transparent px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Enterprise\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n\n          {/* Action Icons Section */}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex hidden items-center gap-1 md:flex\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-full text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n              >\n                <Command className=\"size-4.5\" />\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-full text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n              >\n                <User className=\"size-4.5\" />\n              </Button>\n            </div>\n            <Button className=\"bg-primary hover:bg-primary dark:bg-primary dark:hover:bg-primary hidden rounded-full px-6 font-semibold text-white md:block\">\n              Get started\n            </Button>\n\n            {/* Mobile Menu Trigger */}\n            <div className=\"lg:hidden\">\n              <Sheet>\n                <SheetTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon-lg\"\n                    className=\"rounded-full text-neutral-700 dark:text-neutral-300\"\n                  >\n                    <Menu className=\"size-5\" />\n                  </Button>\n                </SheetTrigger>\n                <SheetContent\n                  side=\"right\"\n                  className=\"flex w-[300px] flex-col gap-6 p-6 dark:bg-neutral-950\"\n                >\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=\"size-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 text-neutral-900 dark:text-white\">\n                      Watermelon\n                    </span>\n                  </div>\n\n                  <div className=\"flex flex-col gap-4\">\n                    <a\n                      href=\"#\"\n                      className=\"text-base font-medium text-neutral-900 dark:text-neutral-50\"\n                    >\n                      Features\n                    </a>\n                    <div className=\"flex items-center justify-between\">\n                      <a\n                        href=\"#\"\n                        className=\"text-base font-medium text-neutral-900 dark:text-neutral-50\"\n                      >\n                        Developers\n                      </a>\n                      <Badge\n                        variant=\"secondary\"\n                        className=\"bg-primary text-primary dark:bg-primary/20 dark:text-primary\"\n                      >\n                        API\n                      </Badge>\n                    </div>\n\n                    <Accordion type=\"single\" collapsible className=\"w-full\">\n                      <AccordionItem value=\"solutions\" className=\"border-none\">\n                        <AccordionTrigger className=\"justify-between py-0 text-base font-medium text-neutral-900 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 text-base font-medium dark:border-neutral-800 [&_a]:no-underline\">\n                          <div className=\"flex flex-col gap-2 pt-4\">\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=\"text-base font-medium text-neutral-900 dark:text-neutral-50\"\n                    >\n                      Customers\n                    </a>\n                    <a\n                      href=\"#\"\n                      className=\"text-base font-medium text-neutral-900 dark:text-neutral-50\"\n                    >\n                      Enterprise\n                    </a>\n                  </div>\n\n                  <div className=\"mt-auto flex flex-col gap-3\">\n                    <Button className=\"bg-primary hover:bg-primary w-full rounded-full text-white\">\n                      Get started\n                    </Button>\n                  </div>\n                </SheetContent>\n              </Sheet>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-5.tsx"
    }
  ],
  "type": "registry:ui"
}