From 7b70ce635bd5dffd48deb53845a1231fc49266ad Mon Sep 17 00:00:00 2001
From: MBO-Tech-IT <jonny@mbo-tech-it.de>
Date: Thu, 2 Apr 2026 01:28:54 +0200
Subject: [PATCH] feat: add WLAN and WebApps service cards with scroll-reveal

---
 components/Services.tsx | 63 +++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 18 deletions(-)

diff --git a/components/Services.tsx b/components/Services.tsx
index 0358073..52e17a5 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -1,3 +1,5 @@
+import ScrollReveal from "@/components/ScrollReveal";
+
 const services = [
   {
     icon: (
@@ -71,6 +73,30 @@ const services = [
     features: ["Cluster-Setup", "Helm Charts", "Auto-Scaling", "Monitoring & Logging"],
     accent: "blue",
   },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
+        <path d="M1 6l5 4-5 4V6zm7 0h14v2H8V6zm0 5h14v2H8v-2zm0 5h14v2H8v-2z" />
+      </svg>
+    ),
+    title: "WLAN & Netzwerk",
+    description:
+      "Professionelle WLAN-Planung, Installation und Troubleshooting für Privat- und Gewerbekunden. Mesh-Netzwerke, Access Points und hartnäckige Netzwerkprobleme — auch in schwierigen Gebäuden.",
+    features: ["WLAN-Planung & Installation", "Mesh-Netzwerke", "Netzwerk-Troubleshooting", "Privat- & Gewerbekunden"],
+    accent: "orange",
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
+        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+      </svg>
+    ),
+    title: "Individuelle Webanwendungen",
+    description:
+      "Maßgeschneiderte Web-Apps für spezielle Geschäftsanforderungen. Von Kundenportalen über interne Tools bis zu Buchungssystemen — entwickelt auf Ihre Prozesse zugeschnitten.",
+    features: ["Maßgeschneiderte Entwicklung", "Kundenportale & Tools", "API-Integrationen", "Moderner Tech-Stack"],
+    accent: "blue",
+  },
 ];
 
 const colorMap = {
@@ -112,27 +138,28 @@ export default function Services() {
 
         {/* Services grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {services.map((service) => {
+          {services.map((service, index) => {
             const c = colorMap[service.accent as keyof typeof colorMap];
             return (
-              <div
-                key={service.title}
-                className={`group p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
-              >
-                <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
-                  {service.icon}
+              <ScrollReveal key={service.title} delay={index * 75}>
+                <div
+                  className={`group p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
+                >
+                  <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
+                    {service.icon}
+                  </div>
+                  <h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
+                  <p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
+                  <ul className="space-y-2">
+                    {service.features.map((feature) => (
+                      <li key={feature} className="flex items-center gap-2 text-sm text-slate-300">
+                        <span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                <h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
-                <p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
-                <ul className="space-y-2">
-                  {service.features.map((feature) => (
-                    <li key={feature} className="flex items-center gap-2 text-sm text-slate-300">
-                      <span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              </ScrollReveal>
             );
           })}
         </div>