big upgrade

src/components/Header.tsx

@@ -14,10 +14,11 @@ import {
   MobileNavMenu,
 } from "@/components/ui/resizable-navbar";
 import Logo from "@/components/Logo";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 const Header = () => {
   const navItems = [
-    { name: "Über uns", link: "#about" },
+    { name: "Über uns", link: "/ueber-uns" },
     { name: "Leistungen", link: "#services" },
     { name: "Projekte", link: "#projects" },
     { name: "Ablauf", link: "#process" },
@@ -38,6 +39,7 @@ const Header = () => {
           </NavbarLogo>
           <NavItems items={navItems} />
           <div className="navbar-actions flex items-center gap-4">
+            <ThemeToggle />
             <Link to="/kontakt">
               <NavbarButton
                 as="span"
@@ -58,28 +60,44 @@ const Header = () => {
                 Webklar
               </span>
             </NavbarLogo>
-            <MobileNavToggle
-              isOpen={isMobileMenuOpen}
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            />
+            <div className="flex items-center gap-2">
+              <ThemeToggle />
+              <MobileNavToggle
+                isOpen={isMobileMenuOpen}
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              />
+            </div>
           </MobileNavHeader>
 
           <MobileNavMenu
             isOpen={isMobileMenuOpen}
             onClose={() => setIsMobileMenuOpen(false)}
           >
-            {navItems.map((item, idx) => (
-              <a
-                key={`mobile-link-${idx}`}
-                href={item.link}
-                onClick={() => setIsMobileMenuOpen(false)}
-                className="relative text-neutral-600 dark:text-neutral-300"
-              >
-                <span className="block font-medium uppercase tracking-wider">
-                  {item.name}
-                </span>
-              </a>
-            ))}
+            {navItems.map((item, idx) =>
+              item.link.startsWith("/") ? (
+                <Link
+                  key={`mobile-link-${idx}`}
+                  to={item.link}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="relative text-neutral-600 dark:text-neutral-300"
+                >
+                  <span className="block font-medium uppercase tracking-wider">
+                    {item.name}
+                  </span>
+                </Link>
+              ) : (
+                <a
+                  key={`mobile-link-${idx}`}
+                  href={item.link}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="relative text-neutral-600 dark:text-neutral-300"
+                >
+                  <span className="block font-medium uppercase tracking-wider">
+                    {item.name}
+                  </span>
+                </a>
+              )
+            )}
             <div className="flex w-full flex-col gap-4">
               <Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
                 <NavbarButton