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

63
components/Services.tsx
View File

@ -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>