feat: Add Section layout component and refactor page.tsx with updated styling and new Button variants.

components/layout/Header.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Menu, X } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
+import { Container } from "@/components/ui/Container";
+import { Button } from "@/components/ui/Button";
 
 const NAV_ITEMS = [
   { href: "/", label: "Startseite" },
@@ -20,8 +22,8 @@ export function Header() {
 
   return (
     <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
-      <div className="mx-auto flex items-center justify-between px-[var(--spacing-container-padding)] py-4" style={{ maxWidth: "var(--spacing-container)" }}>
-        <Link href="/" className="text-xl font-bold tracking-tight" aria-label="Sportbox Reutte – Zur Startseite">
+      <Container className="flex items-center justify-between py-4">
+        <Link href="/" className="text-xl font-bold tracking-tight text-primary" aria-label="Sportbox Reutte – Zur Startseite">
           SPORTBOX
         </Link>
 
@@ -30,24 +32,24 @@ export function Header() {
             <Link
               key={item.href}
               href={item.href}
-              className={`text-sm tracking-wide transition-colors hover:text-muted ${
-                pathname === item.href ? "font-bold" : "font-normal"
-              }`}
+              className={`text-sm tracking-wide transition-colors hover:text-muted ${pathname === item.href ? "font-bold text-primary" : "font-normal text-muted-foreground/80"
+                }`}
             >
               {item.label}
             </Link>
           ))}
-          <Link
+          <Button
             href="/leistungen#kontakt"
-            className="bg-primary text-secondary px-5 py-2.5 text-sm font-medium transition-opacity hover:opacity-80"
+            variant="primary"
+            className="py-2.5 px-5 text-sm"
           >
             Jetzt Termin buchen
-          </Link>
+          </Button>
         </nav>
 
         <button
           type="button"
-          className="lg:hidden p-2 -mr-2"
+          className="lg:hidden p-2 -mr-2 text-primary"
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           aria-expanded={mobileMenuOpen}
           aria-controls="mobile-menu"
@@ -55,7 +57,7 @@ export function Header() {
         >
           {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
-      </div>
+      </Container>
 
       <AnimatePresence>
         {mobileMenuOpen && (
@@ -74,20 +76,22 @@ export function Header() {
                   key={item.href}
                   href={item.href}
                   onClick={() => setMobileMenuOpen(false)}
-                  className={`py-3 text-base transition-colors hover:text-muted ${
-                    pathname === item.href ? "font-bold" : "font-normal"
-                  }`}
+                  className={`py-3 text-base transition-colors hover:text-muted ${pathname === item.href ? "font-bold text-primary" : "font-normal text-muted-foreground"
+                    }`}
                 >
                   {item.label}
                 </Link>
               ))}
-              <Link
-                href="/leistungen#kontakt"
-                onClick={() => setMobileMenuOpen(false)}
-                className="mt-2 bg-primary text-secondary px-5 py-3 text-center text-sm font-medium transition-opacity hover:opacity-80"
-              >
-                Jetzt Termin buchen
-              </Link>
+              <div className="mt-4">
+                <Button
+                  href="/leistungen#kontakt"
+                  onClick={() => setMobileMenuOpen(false)}
+                  variant="primary"
+                  className="w-full justify-center"
+                >
+                  Jetzt Termin buchen
+                </Button>
+              </div>
             </div>
           </motion.nav>
         )}

components/layout/Section.tsx

@@ -0,0 +1,22 @@
+interface SectionProps {
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    as?: "section" | "div";
+}
+
+export function Section({
+    children,
+    className = "",
+    id,
+    as: Component = "section",
+}: SectionProps) {
+    return (
+        <Component
+            id={id}
+            className={`py-[var(--spacing-section)] relative ${className}`}
+        >
+            {children}
+        </Component>
+    );
+}