navbar updated mobile

components/layout/navbar.tsx

@@ -216,13 +216,29 @@ export function Navbar() {
           >
             {t("navbar.home")}
           </Link>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
               <Link
                 href={`/${locale}/about`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
+                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-            onClick={() => setIsMobileMenuOpen(false)}
               >
                 {t("navbar.about")}
+                <ChevronDown size={12} className="ml-1" />
               </Link>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {tabs.map((tab) => (
+                <DropdownMenuItem>
+                  <Link
+                    href={`/${locale}/about/${tab.value}`}
+                    className="font-unbounded w-full uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                  >
+                    {tab.name}
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
 
           {/* Mobile Pages Dropdown */}
           <Link