170 lines
8.1 KiB
TypeScript
170 lines
8.1 KiB
TypeScript
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
const services = [
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z" />
|
|
</svg>
|
|
),
|
|
title: "Hardware & Software",
|
|
description:
|
|
"Beratung, Beschaffung und Konfiguration von Hardware sowie Software-Lösungen. Von der Auswahl bis zur Inbetriebnahme alles aus einer Hand.",
|
|
features: ["Hardware-Beratung", "Software-Lizenzierung", "System-Konfiguration", "IT-Support"],
|
|
accent: "orange",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" />
|
|
</svg>
|
|
),
|
|
title: "Netzwerk & Sicherheit",
|
|
description:
|
|
"Sichere Netzwerkinfrastruktur und IT-Sicherheitslösungen. Firewall-Konfiguration, VPN-Setups und Hardening für Ihre Server und Dienste.",
|
|
features: ["Firewall & VPN", "SSL/TLS Management", "Server Hardening", "Monitoring"],
|
|
accent: "blue",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
|
|
</svg>
|
|
),
|
|
title: "Cloud Infrastruktur",
|
|
description:
|
|
"Kosteneffiziente und skalierbare Cloud-Server-Setups. Netzwerkkonfiguration, automatisiertes Deployment und Infrastruktur als Code für Ihre Workloads.",
|
|
features: ["Server-Provisionierung", "Netzwerk & Firewall", "Load Balancer", "Terraform/Ansible"],
|
|
accent: "orange",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M13.5 2c-5.629 0-10.212 4.436-10.475 10h-3.025l4 5.917 4-5.917h-2.516c.26-4.068 3.647-7.333 7.516-7.333 4.136 0 7.5 3.364 7.5 7.5s-3.364 7.5-7.5 7.5c-2.136 0-4.065-.888-5.464-2.318l-1.44 2.133c1.799 1.722 4.257 2.785 6.904 2.785 5.514 0 10-4.486 10-10s-4.486-10-10-10z" />
|
|
</svg>
|
|
),
|
|
title: "Docker Installationen",
|
|
description:
|
|
"Professionelle Einrichtung und Verwaltung von Docker-Umgebungen. Von der ersten Containerisierung bis hin zu komplexen Multi-Container-Setups mit Docker Compose.",
|
|
features: ["Docker Engine Setup", "Docker Compose", "Registry Management", "Container-Optimierung"],
|
|
accent: "blue",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-9 14H5v-2h6v2zm0-4H5v-2h6v2zm0-4H5V7h6v2zm8 8h-6v-2h6v2zm0-4h-6v-2h6v2zm0-4h-6V7h6v2z" />
|
|
</svg>
|
|
),
|
|
title: "Proxmox Virtualisierung",
|
|
description:
|
|
"Enterprise-Virtualisierung mit Proxmox VE. Aufbau von Hypervisor-Clustern, VM- und LXC-Management sowie Hochverfügbarkeits-Konfigurationen.",
|
|
features: ["Proxmox VE Setup", "VM & LXC Management", "HA-Cluster", "Backup-Strategien"],
|
|
accent: "orange",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
|
|
<path d="M10.204 14.35l.007.01-.999 2.413a5.171 5.171 0 0 1-2.075-2.597l2.578-.437.49.61zm.022-4.6l.499.611-.997 2.413-2.578-.437a5.171 5.171 0 0 1 2.076-2.587zm.73 1.879l1.249-.417-.003-2.619-1.249-.416a3.6 3.6 0 0 0-.713.833l.716 1.396-.716 1.39a3.6 3.6 0 0 0 .716.833zm4.103 4.348l-2.578.437-.998-2.413.007-.01.49-.61 2.578.437a5.171 5.171 0 0 1-1.499 2.159zm.02-7.028l-2.578.437-1.001 2.413.007.01.49.61 2.578-.437a5.171 5.171 0 0 0-1.496-3.033zm-1.502 5.516l.999-2.413-.499-.611-1.001.334.001 2.286.5.404zm2.998-2.413l-2.578-.437.499.611-.001 2.619 1.25.417a3.6 3.6 0 0 0 .83-3.21zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" />
|
|
</svg>
|
|
),
|
|
title: "Kubernetes Orchestrierung",
|
|
description:
|
|
"Skalierbare Container-Orchestrierung mit Kubernetes. Aufbau und Verwaltung von K8s-Clustern für hochverfügbare, produktionsreife Anwendungen.",
|
|
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 = {
|
|
orange: {
|
|
border: "border-orange-500/20 hover:border-orange-500/50",
|
|
icon: "text-orange-400",
|
|
iconBg: "bg-orange-500/10",
|
|
dot: "bg-orange-400",
|
|
shadow: "hover:shadow-orange-500/10",
|
|
},
|
|
blue: {
|
|
border: "border-blue-500/20 hover:border-blue-500/50",
|
|
icon: "text-blue-400",
|
|
iconBg: "bg-blue-500/10",
|
|
dot: "bg-blue-400",
|
|
shadow: "hover:shadow-blue-500/10",
|
|
},
|
|
};
|
|
|
|
export default function Services() {
|
|
return (
|
|
<section id="services" className="py-24 px-4 sm:px-6 lg:px-8 relative">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(37,99,235,0.05)_0%,transparent_60%)]" />
|
|
|
|
<div className="max-w-7xl mx-auto relative">
|
|
{/* Section header */}
|
|
<div className="text-center mb-16">
|
|
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
|
Leistungen
|
|
</span>
|
|
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
|
|
Unsere Services
|
|
</h2>
|
|
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
|
Professionelle IT-Lösungen für moderne Infrastruktur — von
|
|
der Containerisierung bis zur vollständigen Cloud-Migration.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Services grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{services.map((service, index) => {
|
|
const c = colorMap[service.accent as keyof typeof colorMap];
|
|
return (
|
|
<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>
|
|
</ScrollReveal>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|