{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "popover"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-3.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { useState } from \"react\";\nimport { Cpu, Layers, GitBranch, Terminal, ArrowUpRight, Menu, Moon, X } from \"lucide-react\";\nimport { FaGithub as Github } from \"react-icons/fa6\";\n\nexport function Navigation3() {\n  const [isOpen, setIsOpen] = useState(false);\n\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 text-neutral-900 dark:text-neutral-50\">\n        <div className=\"flex items-center gap-4\">\n          <Popover open={isOpen} onOpenChange={setIsOpen} modal={true}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"h-9 w-9 rounded-xl text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800\"\n              >\n                {isOpen ? (\n                  <X className=\"h-5 w-5\" />\n                ) : (\n                  <Menu className=\"h-5 w-5\" />\n                )}\n                <span className=\"sr-only\">Toggle menu</span>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"max-h-[85dvh] w-screen max-w-none overflow-y-auto overscroll-contain rounded-none !border-x-0 !border-t-0 border-b border-neutral-200 bg-white p-0 shadow-none !ring-0 dark:border-neutral-800 dark:bg-neutral-950\"\n              align=\"start\"\n              sideOffset={15}\n            >\n              <div className=\"mx-auto max-w-7xl\">\n                <div className=\"mx-auto grid max-w-6xl grid-cols-1 gap-0 px-6 py-8 md:grid-cols-2 lg:grid-cols-4 lg:py-10\">\n                  {/* Column 1 */}\n                  <div className=\"flex flex-col pb-6 md:px-6 md:pb-0 lg:border-neutral-200 lg:pr-8 dark:border-neutral-800\">\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\n                      className=\"mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-50\"\n                      id=\"compute-engine-title\"\n                    >\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-2 border-t border-neutral-200 py-6 md:border-t-0 md:border-l md:px-6 md:pt-0 lg:border-r lg:px-8 dark:border-neutral-800\">\n                    <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                      Use Cases\n                    </h4>\n                    <div className=\"flex flex-col gap-3\">\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                  </div>\n\n                  {/* Column 3 */}\n                  <div className=\"flex flex-col gap-2 border-t border-neutral-200 py-6 md:px-6 md:pt-0 lg:border-t-0 lg:border-r lg:px-8 lg:pt-0 dark:border-neutral-800\">\n                    <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                      Resources\n                    </h4>\n                    <div className=\"flex flex-col gap-3\">\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                  </div>\n\n                  {/* Column 4 */}\n                  <div className=\"flex flex-col border-t border-neutral-200 pt-6 lg:border-t-0 lg:pt-0 lg:pl-8 dark:border-neutral-800\">\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                          <ArrowUpRight className=\"ml-1 size-3\" />\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\n                {/* Mobile Button Collection */}\n                <div className=\"px-6 pb-8 lg:hidden\">\n                  <Button className=\"w-full rounded-xl bg-primary py-6 text-white shadow-lg shadow-primary/20 hover:bg-primary dark:bg-primary dark:hover:bg-primary\">\n                    Get started\n                  </Button>\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n\n          <div className=\"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        </div>\n\n        <div className=\"flex items-center gap-3\">\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=\"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=\"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          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-3.tsx"
    }
  ],
  "type": "registry:ui"
}