103 lines
4.4 KiB
TypeScript
103 lines
4.4 KiB
TypeScript
const highlights = [
|
||
{
|
||
icon: "01",
|
||
title: "Analyse & Planung",
|
||
description:
|
||
"Wir analysieren Ihre bestehende Infrastruktur und planen die optimale Lösung für Ihre Anforderungen.",
|
||
},
|
||
{
|
||
icon: "02",
|
||
title: "Implementierung",
|
||
description:
|
||
"Professionelle Umsetzung mit bewährten technischen Methoden und modernsten Tools.",
|
||
},
|
||
{
|
||
icon: "03",
|
||
title: "Betrieb & Support",
|
||
description:
|
||
"Zuverlässiger Betrieb, Monitoring und Support – damit Ihre Systeme immer laufen.",
|
||
},
|
||
];
|
||
|
||
export default function About() {
|
||
return (
|
||
<section id="about" className="py-24 px-4 sm:px-6 lg:px-8 relative">
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(37,99,235,0.06)_0%,transparent_60%)]" />
|
||
|
||
<div className="max-w-7xl mx-auto relative">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||
{/* Left: Text */}
|
||
<div>
|
||
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
||
Über uns
|
||
</span>
|
||
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-6 leading-tight">
|
||
IT-Expertise,{" "}
|
||
<span className="text-gradient">die Sie weiterbringt</span>
|
||
</h2>
|
||
<p className="text-slate-400 text-lg leading-relaxed mb-6">
|
||
MBO-Tech-IT steht für über <strong className="text-white">30 Jahre IT-Erfahrung</strong> —
|
||
angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer
|
||
Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung
|
||
in der <strong className="text-white">IT-Security</strong>.
|
||
</p>
|
||
<p className="text-slate-400 text-lg leading-relaxed mb-8">
|
||
Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer
|
||
Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es,
|
||
Lösungen zu entwickeln, die nicht nur funktionieren — sondern auch
|
||
sicher und langfristig tragfähig sind.
|
||
</p>
|
||
|
||
{/* Tagline callout */}
|
||
<div className="mb-8 px-5 py-4 rounded-xl border-l-4 border-orange-500 bg-orange-500/5">
|
||
<p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase">
|
||
Digital Denken. Lokal Handeln.
|
||
</p>
|
||
<p className="text-slate-400 text-sm mt-1">
|
||
Globales Know-how — persönlicher Service.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Key points */}
|
||
<div className="space-y-3">
|
||
{[
|
||
"30+ Jahre IT-Erfahrung – von Hardware bis Cloud",
|
||
"20+ Jahre IT-Security & Netzwerk-Expertise",
|
||
"Spezialisiert auf Docker, Kubernetes & Proxmox",
|
||
"Transparente Kommunikation & faire Preise",
|
||
].map((point) => (
|
||
<div key={point} className="flex items-center gap-3">
|
||
<div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0">
|
||
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<span className="text-slate-300 text-sm">{point}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: Process steps */}
|
||
<div className="space-y-6">
|
||
{highlights.map((item) => (
|
||
<div
|
||
key={item.title}
|
||
className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all duration-300"
|
||
>
|
||
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center">
|
||
<span className="font-mono text-orange-400 font-black text-sm">{item.icon}</span>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-white font-bold text-lg mb-2">{item.title}</h3>
|
||
<p className="text-slate-400 text-sm leading-relaxed">{item.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|