{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu3",
  "title": "Navigation menu",
  "description": "A collection of links for navigating websites.",
  "files": [
    {
      "path": "contents/components/navigation-menu/2/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport {\n  Shield,\n  Box,\n  Code,\n  FileCode,\n  Cloud,\n  GitBranch,\n  Lock,\n  BookOpen,\n  HelpCircle,\n  FileText,\n  Video,\n  MessageSquare,\n  Building2,\n  ChevronRight\n} from \"lucide-react\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle\n} from \"@/components/ui/navigation-menu\";\n\nconst platformFeatures: {\n  title: string;\n  href: string;\n  description: string;\n  icon: React.ReactNode;\n  isNew?: boolean;\n  showArrow?: boolean;\n}[] = [\n  {\n    title: \"Hardcoded Secrets Detection\",\n    href: \"/features/secrets-detection\",\n    description: \"Find existing secrets across your DLC and block new secrets in pull requests\",\n    icon: <Shield className=\"h-5 w-5 text-green-600\" />\n  },\n  {\n    title: \"NextGen SCA - Software Composition Analysis\",\n    href: \"/features/sca\",\n    description:\n      \"Combine integrity verification, anomaly detection, critical code monitoring & governance\",\n    icon: <Box className=\"h-5 w-5 text-red-600\" />,\n    isNew: true,\n    showArrow: true\n  },\n  {\n    title: \"Source Code Leakage Detection\",\n    href: \"/features/code-leakage\",\n    description: \"Identify suspicious behavior and detection proprietary code exposures\",\n    icon: <FileCode className=\"h-5 w-5 text-orange-600\" />\n  },\n  {\n    title: \"SAST - Static Application Security Testing\",\n    href: \"/features/sast\",\n    description: \"Zero in on vulnerabilities in custom developed code\",\n    icon: <Code className=\"h-5 w-5 text-teal-600\" />,\n    isNew: true\n  },\n  {\n    title: \"Infrastructure As-Code\",\n    href: \"/features/iac\",\n    description: \"Prevent cloud misconfigurations and enforce security standards to Terraform\",\n    icon: <Cloud className=\"h-5 w-5 text-blue-600\" />\n  },\n  {\n    title: \"Source Control & Compliance\",\n    href: \"/features/source-control\",\n    description: \"Centrally manage governance and compliance across all your DevOps pipelines\",\n    icon: <GitBranch className=\"h-5 w-5 text-purple-600\" />\n  },\n  {\n    title: \"Code Tampering Prevention\",\n    href: \"/features/code-tampering\",\n    description: \"Centrally manage governance and compliance across all your DevOps pipelines\",\n    icon: <Lock className=\"h-5 w-5 text-pink-600\" />\n  }\n];\n\nconst resources: { title: string; href: string; description: string; icon: React.ReactNode }[] = [\n  {\n    title: \"Documentation\",\n    href: \"/docs\",\n    description: \"Comprehensive guides and API references.\",\n    icon: <BookOpen className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Help Center\",\n    href: \"/help\",\n    description: \"Find answers to common questions and issues.\",\n    icon: <HelpCircle className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Blog\",\n    href: \"/blog\",\n    description: \"Latest updates, tips, and industry insights.\",\n    icon: <FileText className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Video Tutorials\",\n    href: \"/tutorials\",\n    description: \"Step-by-step video guides to get you started.\",\n    icon: <Video className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Community\",\n    href: \"/community\",\n    description: \"Join our community and connect with other users.\",\n    icon: <MessageSquare className=\"h-4 w-4\" />\n  }\n];\n\nexport default function Component() {\n  const isMobile = useIsMobile();\n\n  return (\n    <NavigationMenu viewport={isMobile} className=\"z-10\">\n      <NavigationMenuList className=\"flex-wrap\">\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Platform</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-1 p-2 md:w-[600px] lg:w-[700px] lg:grid-cols-2\">\n              {platformFeatures.map((feature) => (\n                <PlatformListItem\n                  key={feature.title}\n                  title={feature.title}\n                  href={feature.href}\n                  icon={feature.icon}\n                  isNew={feature.isNew}\n                  showArrow={feature.showArrow}>\n                  {feature.description}\n                </PlatformListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {resources.map((resource) => (\n                <ListItemWithIcon\n                  key={resource.title}\n                  title={resource.title}\n                  href={resource.href}\n                  icon={resource.icon}>\n                  {resource.description}\n                </ListItemWithIcon>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/pricing\">Pricing</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>Company</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"/about\">\n                    <div className=\"font-medium\">About Us</div>\n                    <div className=\"text-muted-foreground\">Learn about our mission and values.</div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"/careers\">\n                    <div className=\"font-medium\">Careers</div>\n                    <div className=\"text-muted-foreground\">Join our growing team.</div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"/contact\">\n                    <div className=\"font-medium\">Contact</div>\n                    <div className=\"text-muted-foreground\">Get in touch with our team.</div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n\nfunction PlatformListItem({\n  title,\n  children,\n  href,\n  icon,\n  isNew,\n  showArrow,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & {\n  href: string;\n  icon: React.ReactNode;\n  isNew?: boolean;\n  showArrow?: boolean;\n}) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link\n          href={href}\n          className=\"group hover:bg-muted/50 focus:bg-muted/50 relative flex items-start gap-3 rounded-md p-3 transition-colors\">\n          <div className=\"bg-primary absolute top-0 left-0 h-full w-0.5 opacity-0 transition-opacity group-hover:opacity-100\" />\n          <div className=\"mt-0.5 shrink-0\">{icon}</div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"mb-1 flex items-center gap-2\">\n              <div className=\"text-sm leading-none font-medium\">{title}</div>\n              {isNew && (\n                <Badge\n                  variant=\"default\"\n                  className=\"h-5 rounded-full bg-blue-600 px-2 text-[10px] font-medium text-white\">\n                  NEW\n                </Badge>\n              )}\n              {showArrow && (\n                <ChevronRight className=\"text-muted-foreground ml-auto h-4 w-4 shrink-0\" />\n              )}\n            </div>\n            <p className=\"text-muted-foreground mt-1 line-clamp-2 text-xs leading-snug\">\n              {children}\n            </p>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n\nfunction ListItemWithIcon({\n  title,\n  children,\n  href,\n  icon,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string; icon: React.ReactNode }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href} className=\"hover:bg-accent flex items-start gap-3 rounded-md p-3\">\n          <div className=\"text-muted-foreground mt-0.5\">{icon}</div>\n          <div className=\"flex-1\">\n            <div className=\"text-sm leading-none font-medium\">{title}</div>\n            <p className=\"text-muted-foreground mt-1 line-clamp-2 text-sm leading-snug\">\n              {children}\n            </p>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navigation-menu3.tsx"
    }
  ],
  "type": "registry:component"
}