{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu2",
  "title": "Navigation menu",
  "description": "A collection of links for navigating websites.",
  "files": [
    {
      "path": "contents/components/navigation-menu/1/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport {\n  Zap,\n  Shield,\n  BarChart3,\n  Users,\n  BookOpen,\n  HelpCircle,\n  FileText,\n  Video,\n  MessageSquare,\n  Building2,\n  Rocket\n} from \"lucide-react\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle\n} from \"@/components/ui/navigation-menu\";\n\nconst features: { title: string; href: string; description: string; icon: React.ReactNode }[] = [\n  {\n    title: \"Analytics Dashboard\",\n    href: \"/features/analytics\",\n    description: \"Real-time insights and data visualization for your business metrics.\",\n    icon: <BarChart3 className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Team Collaboration\",\n    href: \"/features/collaboration\",\n    description: \"Work together seamlessly with your team in real-time.\",\n    icon: <Users className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Security & Compliance\",\n    href: \"/features/security\",\n    description: \"Enterprise-grade security with SOC 2 and GDPR compliance.\",\n    icon: <Shield className=\"h-4 w-4\" />\n  },\n  {\n    title: \"Automation\",\n    href: \"/features/automation\",\n    description: \"Streamline workflows with powerful automation tools.\",\n    icon: <Zap className=\"h-4 w-4\" />\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>Product</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <Link\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6\"\n                    href=\"/\">\n                    <Rocket className=\"mb-2 h-6 w-6\" />\n                    <div className=\"mb-2 text-lg font-medium sm:mt-4\">Our Platform</div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Powerful tools to grow your business and streamline operations.\n                    </p>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n              {features.map((feature) => (\n                <ListItem key={feature.title} title={feature.title} href={feature.href}>\n                  {feature.description}\n                </ListItem>\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 ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">{children}</p>\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-menu2.tsx"
    }
  ],
  "type": "registry:component"
}