MBO-Tech-IT-Webseite/components/About.tsx

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.",
  },
];

interface AboutProps {
  eyebrowText?: string;
  absatz1?: string;
  absatz2?: string;
  stats?: { wert: string; label: string }[];
}

export default function About({
  eyebrowText = "Über uns",
  absatz1 = "MBO-Tech-IT steht für über 30 Jahre IT-Erfahrung — angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung in der IT-Security.",
  absatz2 = "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.",
  stats,
}: AboutProps = {}) {
  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">
              {eyebrowText}
            </span>
            <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-6 leading-tight">
              IT-Expertise,{" "}
              <span className="text-gradient">die Sie weiterbringt</span>
            </h2>
            <p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-6">
              {absatz1}
            </p>
            <p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-8">
              {absatz2}
            </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-600 dark:text-slate-400 text-sm mt-1">
                Globales Know-how &mdash; 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 & 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-700 dark:text-slate-300 text-sm">{point}</span>
                </div>
              ))}
            </div>

            {stats && stats.length > 0 && (
              <div className="flex gap-8 mt-4">
                {stats.map((s) => (
                  <div key={s.label}>
                    <div className="text-3xl font-black text-orange-400">{s.wert}</div>
                    <div className="text-sm text-slate-500 dark:text-slate-400">{s.label}</div>
                  </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-white dark:bg-gray-900 border border-slate-200 dark: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-slate-800 dark:text-white font-bold text-lg mb-2">{item.title}</h3>
                  <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}