From 9c7cd0bfec84746ca730c05c01556d4abbddcea6 Mon Sep 17 00:00:00 2001
From: MBO-Tech-IT <jonny@mbo-tech-it.de>
Date: Sun, 26 Apr 2026 16:45:38 +0200
Subject: [PATCH] feat: apply light mode classes to Hero, StatsBar, Footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Footer.tsx   | 20 ++++++++++----------
 components/Hero.tsx     |  6 +++---
 components/StatsBar.tsx |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6feff5f..b0d0e7f 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -33,11 +33,11 @@ export default function Footer() {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="bg-[#111925] border-t border-gray-800">
+    <footer className="bg-[#e8eef4] dark:bg-[#111925] border-t border-slate-200 dark:border-gray-800">
       {/* Tagline strip */}
-      <div className="border-b border-gray-800 py-6 px-4">
+      <div className="border-b border-slate-200 dark:border-gray-800 py-6 px-4">
         <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-2xl sm:text-3xl font-black text-white tracking-tight">
+          <p className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
             <span className="text-orange-400">DIGITAL DENKEN.</span>{" "}
             <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">LOKAL HANDELN.</span>
           </p>
@@ -57,12 +57,12 @@ export default function Footer() {
             <div className="flex items-center gap-3 mb-4">
               <Logo className="h-8 w-auto" />
               <div className="flex flex-col leading-tight">
-                <span className="font-black text-white text-base tracking-wider uppercase">
+                <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
                   MBO-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span>
                 </span>
               </div>
             </div>
-            <p className="text-slate-500 text-sm leading-relaxed mb-4">
+            <p className="text-slate-600 dark:text-slate-500 text-sm leading-relaxed mb-4">
               Ihr Spezialist für Docker, Kubernetes, Proxmox und Hetzner Cloud &mdash;
               professionelle IT-Infrastruktur für Ihr Business.
             </p>
@@ -74,13 +74,13 @@ export default function Footer() {
           {/* Links */}
           {footerLinks.map((group) => (
             <div key={group.title}>
-              <h4 className="text-white font-bold text-sm mb-4 tracking-wide">{group.title}</h4>
+              <h4 className="text-slate-800 dark:text-white font-bold text-sm mb-4 tracking-wide">{group.title}</h4>
               <ul className="space-y-2">
                 {group.links.map((link) => (
                   <li key={link.label}>
                     <Link
                       href={link.href}
-                      className="text-slate-500 hover:text-orange-400 transition-colors text-sm"
+                      className="text-slate-600 dark:text-slate-500 hover:text-orange-400 transition-colors text-sm"
                     >
                       {link.label}
                     </Link>
@@ -92,11 +92,11 @@ export default function Footer() {
         </div>
 
         {/* Bottom bar */}
-        <div className="pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-slate-600 text-sm">
+        <div className="pt-8 border-t border-slate-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-slate-500 dark:text-slate-600 text-sm">
             &copy; {year} MBO-Tech-IT. Alle Rechte vorbehalten.
           </p>
-          <div className="flex items-center gap-4 text-slate-600 text-sm">
+          <div className="flex items-center gap-4 text-slate-500 dark:text-slate-600 text-sm">
             <Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link>
             <Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link>
             <span className="flex items-center gap-2">
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 5bef124..e2bc27e 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -28,7 +28,7 @@ export default function Hero() {
         </div>
 
         {/* Headline */}
-        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-tight mb-6 tracking-tight">
+        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white leading-tight mb-6 tracking-tight">
           Ihre IT-Infrastruktur.{" "}
           <span className="text-gradient">
             {typed}
@@ -39,7 +39,7 @@ export default function Hero() {
         </h1>
 
         {/* Subheadline */}
-        <p className="text-xl sm:text-2xl text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
+        <p className="text-xl sm:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
           Von Docker-Containern über Kubernetes-Cluster bis hin zu
           Proxmox-Virtualisierung auf Hetzner Cloud &mdash; wir bringen Ihre
           IT auf das nächste Level.
@@ -50,7 +50,7 @@ export default function Hero() {
           {["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"].map((tech) => (
             <span
               key={tech}
-              className="px-3 py-1 rounded-md bg-gray-900 border border-gray-700 text-slate-300 text-sm font-mono"
+              className="px-3 py-1 rounded-md bg-slate-100 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 text-slate-700 dark:text-slate-300 text-sm font-mono"
             >
               {tech}
             </span>
diff --git a/components/StatsBar.tsx b/components/StatsBar.tsx
index 788ada7..de2ac5b 100644
--- a/components/StatsBar.tsx
+++ b/components/StatsBar.tsx
@@ -56,7 +56,7 @@ function Counter({ value, suffix, accent }: { value: number; suffix: string; acc
 export default function StatsBar() {
   return (
     <section className="py-12 px-4 sm:px-6 lg:px-8 relative">
-      <div className="absolute inset-0 bg-[#111925]" />
+      <div className="absolute inset-0 bg-[#e8eef4] dark:bg-[#111925]" />
       <div className="max-w-7xl mx-auto relative">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
           {stats.map((stat) => (