jonny
/
MBO-Tech-IT-Webseite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add WLAN and WebApps service cards with scroll-reveal

This commit is contained in:
MBO-Tech-IT 2026-04-02 01:28:54 +02:00
parent ed5136b9a1
commit 7b70ce635b
1 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/Services.tsx
View File

@ -1,3 +1,5 @@
import ScrollReveal from "@/components/ScrollReveal";
const services = [ const services = [
{ {
icon: ( icon: (
@ -71,6 +73,30 @@ const services = [
features: ["Cluster-Setup", "Helm Charts", "Auto-Scaling", "Monitoring & Logging"], features: ["Cluster-Setup", "Helm Charts", "Auto-Scaling", "Monitoring & Logging"],
accent: "blue", 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 = { const colorMap = {
@ -112,11 +138,11 @@ export default function Services() {
{/* Services grid */} {/* Services grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <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]; const c = colorMap[service.accent as keyof typeof colorMap];
return ( return (
<ScrollReveal key={service.title} delay={index * 75}>
<div <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}`} 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`}> <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
@ -133,6 +159,7 @@ export default function Services() {
))} ))}
</ul> </ul>
</div> </div>
</ScrollReveal>
); );
})} })}
</div> </div>