chore: Update npm dependencies for shadcn-ui@latest

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.1",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@radix-ui/react-dropdown-menu':
     specifier: ^2.1.1
     version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+  '@radix-ui/react-navigation-menu':
+    specifier: ^1.2.0
+    version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
   '@radix-ui/react-slot':
     specifier: ^1.1.0
     version: 1.1.0(@types/react@18.3.4)(react@18.3.1)
@@ -542,6 +545,39 @@ packages:
       react-remove-scroll: 2.5.7(@types/react@18.3.4)(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-navigation-menu@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-OQ8tcwAOR0DhPlSY3e4VMXeHiol7la4PPdJWhhwJiJA+NLX0SaCaonOkRnI3gCDHoZ7Fo7bb/G6q25fRM2Y+3Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.4
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-popper@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
     peerDependencies:
@@ -729,6 +765,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-previous@1.1.0(@types/react@18.3.4)(react@18.3.1):
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.4
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-rect@1.1.0(@types/react@18.3.4)(react@18.3.1):
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
@@ -757,6 +806,26 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.4
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/rect@1.1.0:
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
     dev: false

src/components/navigationBar/Unsigned.tsx

@@ -1,156 +1,176 @@
 import {
-    DropdownMenu,
+  DropdownMenu,
-    DropdownMenuContent,
+  DropdownMenuContent,
-    DropdownMenuItem,
+  DropdownMenuItem,
-    DropdownMenuTrigger,
+  DropdownMenuTrigger,
-  } from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu";
-  import { Menu } from "lucide-react";
+import { Menu } from "lucide-react";
-  import { Card } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 //   import ThemeToggle from "@/components/theme-toggle";
-  import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 //   import ShadcnKit from "@/components/icons/shadcn-kit";
 //   import { nanoid } from "nanoid";
-  import Link from "next/link";
+import Link from "next/link";
-  
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu";
+
 export function UnsignedNav() {
-    return (
+  return (
-      <Card className="container bg-card py-3 px-4 border-0 flex items-center justify-between gap-6 rounded-2xl mt-5">
+    <Card className="container bg-card py-3 px-4 border-0 flex items-center justify-between gap-6 rounded-2xl mt-5">
-        {/* <ShadcnKit className="text-primary cursor-pointer" /> */}
+      {/* <ShadcnKit className="text-primary cursor-pointer" /> */}
-  
+      <NavigationMenu>
-        <ul className="hidden md:flex items -center gap-10 text-card-foreground ml-auto">
+        <NavigationMenuList>
-          <li className="text-primary font-medium">
+          <NavigationMenuItem>
-            <a href="#home">Home</a>
+            <NavigationMenuTrigger>Businesses</NavigationMenuTrigger>
-          </li>
+            <NavigationMenuContent>
-          <li>
+              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-            <a href="#features">Businesses</a>
+                <li className="row-span-3">
-          </li>
+                  <NavigationMenuLink asChild>
-          <li>
+                    <a
-            <a href="#pricing">Projects</a>
+                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-          </li>
+                      href="/"
-          <li>
+                    >
-            <a href="#faqs">Blog</a>
+                      <div className="mb-2 mt-4 text-lg font-medium">
-          </li>
+                        shadcn/ui
-          <li>
+                      </div>
-            <DropdownMenu>
+                      <p className="text-sm leading-tight text-muted-foreground">
-              <DropdownMenuTrigger asChild>
+                        Beautifully designed components that you can copy and
-                <span className="cursor-pointer">Pages</span>
+                        paste into your apps. Accessible. Customizable. Open
-              </DropdownMenuTrigger>
+                        Source.
-  
+                      </p>
-              <DropdownMenuContent align="start">
+                    </a>
-                {landings.map((page) => (
+                  </NavigationMenuLink>
-                  <DropdownMenuItem key={page.id}>
+                </li>
-                    <Link href={page.route}>{page.title}</Link>
+              </ul>
-                  </DropdownMenuItem>
+            </NavigationMenuContent>
-                ))}
+          </NavigationMenuItem>
-              </DropdownMenuContent>
+          <ul className="hidden md:flex items -center gap-10 text-card-foreground ml-auto">
-            </DropdownMenu>
+            <li className="text-primary font-medium">
-          </li>
+              <a href="#home">Home</a>
-        </ul>
+            </li>
-  
+            <li>
-        <div className="flex items-center">
+              <a href="#features">Businesses</a>
-          <Button variant="secondary" className="hidden md:block px-2">
+            </li>
-            Login
+            <li>
-          </Button>
+              <a href="#pricing">Projects</a>
-          <Button className="hidden md:block ml-2 mr-2">Get Started</Button>
+            </li>
-  
+            <li>
-          <div className="flex md:hidden mr-2 items-center gap-2">
+              <a href="#faqs">Docs</a>
-            <DropdownMenu>
+            </li>
-              <DropdownMenuTrigger asChild>
+          </ul>
-                <span className="py-2 px-2 bg-gray-100 rounded-md">Pages</span>
+        </NavigationMenuList>
-              </DropdownMenuTrigger>
+      </NavigationMenu>
-  
+      <div className="flex items-center">
-              <DropdownMenuContent align="start">
+        <Button variant="secondary" className="hidden md:block px-2">
-                {landings.map((page) => (
+          Login
-                  <DropdownMenuItem key={page.id}>
+        </Button>
-                    <Link href={page.route}>{page.title}</Link>
+        <Button className="hidden md:block ml-2 mr-2">Get Started</Button>
-                  </DropdownMenuItem>
+
-                ))}
+        <div className="flex md:hidden mr-2 items-center gap-2">
-              </DropdownMenuContent>
+          <DropdownMenu>
-            </DropdownMenu>
+            <DropdownMenuTrigger asChild>
-  
+              <span className="py-2 px-2 bg-gray-100 rounded-md">Pages</span>
-            <DropdownMenu>
+            </DropdownMenuTrigger>
-              <DropdownMenuTrigger asChild>
+
-                <Button variant="outline" size="icon">
+            <DropdownMenuContent align="start">
-                  <Menu className="h-5 w-5 rotate-0 scale-100" />
+              {landings.map((page) => (
+                <DropdownMenuItem key={page.id}>
+                  <Link href={page.route}>{page.title}</Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon">
+                <Menu className="h-5 w-5 rotate-0 scale-100" />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <a href="#home">Home</a>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <a href="#features">Features</a>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <a href="#pricing">Pricing</a>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <a href="#faqs">FAQs</a>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Button variant="secondary" className="w-full text-sm">
+                  Login
                 </Button>
-              </DropdownMenuTrigger>
+              </DropdownMenuItem>
-  
+              <DropdownMenuItem>
-              <DropdownMenuContent align="end">
+                <Button className="w-full text-sm">Get Started</Button>
-                <DropdownMenuItem>
+              </DropdownMenuItem>
-                  <a href="#home">Home</a>
+            </DropdownMenuContent>
-                </DropdownMenuItem>
+          </DropdownMenu>
-                <DropdownMenuItem>
-                  <a href="#features">Features</a>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <a href="#pricing">Pricing</a>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <a href="#faqs">FAQs</a>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Button variant="secondary" className="w-full text-sm">
-                    Login
-                  </Button>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Button className="w-full text-sm">Get Started</Button>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-  
-          {/* <ThemeToggle /> */}
         </div>
-      </Card>
+
-    );
+        {/* <ThemeToggle /> */}
-  };
+      </div>
-  
+    </Card>
-  const landings = [
+  );
-    {
+}
-      id: 1,
+
-      title: "Landing 01",
+const landings = [
-      route: "/project-management",
+  {
-    },
+    id: 1,
-    {
+    title: "Landing 01",
-      id: 2,
+    route: "/project-management",
-      title: "Landing 02",
+  },
-      route: "/crm-landing",
+  {
-    },
+    id: 2,
-    {
+    title: "Landing 02",
-      id: 3,
+    route: "/crm-landing",
-      title: "Landing 03",
+  },
-      route: "/ai-content-landing",
+  {
-    },
+    id: 3,
-    {
+    title: "Landing 03",
-      id: 4,
+    route: "/ai-content-landing",
-      title: "Landing 04",
+  },
-      route: "/new-intro-landing",
+  {
-    },
+    id: 4,
-    {
+    title: "Landing 04",
-      id: 5,
+    route: "/new-intro-landing",
-      title: "Landing 05",
+  },
-      route: "/about-us-landing",
+  {
-    },
+    id: 5,
-    {
+    title: "Landing 05",
-      id: 6,
+    route: "/about-us-landing",
-      title: "Landing 06",
+  },
-      route: "/contact-us-landing",
+  {
-    },
+    id: 6,
-    {
+    title: "Landing 06",
-      id: 7,
+    route: "/contact-us-landing",
-      title: "Landing 07",
+  },
-      route: "/faqs-landing",
+  {
-    },
+    id: 7,
-    {
+    title: "Landing 07",
-      id: 8,
+    route: "/faqs-landing",
-      title: "Landing 08",
+  },
-      route: "/pricing-landing",
+  {
-    },
+    id: 8,
-    {
+    title: "Landing 08",
-      id: 9,
+    route: "/pricing-landing",
-      title: "Landing 09",
+  },
-      route: "/career-landing",
+  {
-    },
+    id: 9,
-  ];
+    title: "Landing 09",
-  
+    route: "/career-landing",
+  },
+];

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}