Refactor and update navigation and constants

- Refactor code for consistency in formatting and styling.
- Update `navLinks` to revise URLs and labels for improved clarity.
- Adjust button text in `DesktopNav` from "Portal" to "Kontakt".

components/Navbar/DesktopNav.tsx

@@ -60,8 +60,12 @@ const Nav = ({openNav}: Props) => {
                 <div className="hidden lg:flex items-center space-x-6 transition-all duration-300 ease-in-out">
                     {navLinks.map((link) => (
                         <Link href={link.url} key={link.id}>
-                            <p className={`nav_link ${contentSize} transition-all duration-300 ease-in-out`}
+                            <p
-                               style={{color: colors.primaryText}}>{link.label}</p>
+                                className={`nav_link ${contentSize} transition-all duration-300 ease-in-out uppercase font-semibold`}
+                                style={{color: colors.primaryText}}>
+                                {link.label}
+                            </p>
+
                         </Link>
                     ))}
                 </div>
@@ -72,7 +76,7 @@ const Nav = ({openNav}: Props) => {
                     <button
                         className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
                     >
-                        Portal
+                        Kontakt
                     </button>
 
                     {/* Theme Toggle Button */}

components/Navbar/MobileNav.tsx

@@ -1,19 +1,22 @@
-import {navLinks} from "@/constant/Constant";
+import { navLinks } from "@/constant/Constant";
 import Link from "next/link";
-import React, {useContext} from "react";
+import React, { useContext } from "react";
-import {CgClose} from "react-icons/cg";
+import { CgClose } from "react-icons/cg";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
+import { ThemeContext } from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
+import { themeColors } from "@/components/Helper/ThemeColors";
 
 type Props = {
     showNav: boolean;
     closeNav: () => void;
 };
 
-const MobileNav = ({closeNav, showNav}: Props) => {
+const MobileNav = ({ closeNav, showNav }: Props) => {
     const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
-    const {theme, toggleTheme} = useContext(ThemeContext);
+    const { theme, toggleTheme } = useContext(ThemeContext);
     const colors = themeColors[theme];
+
+    const cleanDarkBackground = theme === "dark" ? "#2A2A2A" : colors.primaryBg;
+
     return (
         <div className="lg:hidden">
             {/* overlay background */}
@@ -27,17 +30,14 @@ const MobileNav = ({closeNav, showNav}: Props) => {
             {/* nav menu */}
             <div
                 className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out text-[var(--primary-text)] shadow-md rounded-b-2xl`}
-                style={{
+                style={{ backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff", color: theme === "dark" ? "#f5f5f5" : "#1a1a1a" }}
-                    backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff",
-                    color: theme === "dark" ? "#f5f5f5" : "#1a1a1a"
-                }}
             >
                 <div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
                     {/* Close icon */}
                     <CgClose
                         onClick={closeNav}
                         className="absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1"
-                        style={{color: colors.primaryText}}
+                        style={{ color: colors.primaryText }}
                     />
 
                     {navLinks.map((link) => (
@@ -52,7 +52,7 @@ const MobileNav = ({closeNav, showNav}: Props) => {
                     <button
                         onClick={toggleTheme}
                         className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300"
-                        style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
+                        style={{ backgroundColor: colors.secondaryBg, color: colors.primaryText }}
                     >
                         {theme === "dark" ? "🌙" : "☀️"}
                     </button>

constant/Constant.ts

@@ -11,7 +11,7 @@ export const navLinks = [
     },
     {
         id: 3,
-        url: 'contact',
+        url: 'services',
-        label: 'Kontakt',
+        label: 'Leistungen',
     }
 ];