RheinFrame-Web/src/app/services/page.tsx

import type { Metadata } from "next";
import { Mail, Server, Database, ShieldCheck } from "lucide-react";
import PageHero from "@/components/ui/PageHero";
import InlineCta from "@/components/ui/InlineCta";
import ServiceOverview from "@/components/services/ServiceOverview";
import ServiceSection from "@/components/services/ServiceSection";
import SegmentPanel from "@/components/graphics/SegmentPanel";
import MailFlowGraphic from "@/components/graphics/MailFlowGraphic";
import VirtualizationGraphic from "@/components/graphics/VirtualizationGraphic";
import HaClusterGraphic from "@/components/graphics/HaClusterGraphic";
import SecurityGraphic from "@/components/graphics/SecurityGraphic";

export const metadata: Metadata = {
  title: "Dienstleistungen & Produkte",
  description:
    "E-Mail & Collaboration, Infrastruktur & Virtualisierung, High Availability & Storage sowie Netzwerk & IT-Security — Infrastruktur-Leistungen von Rheinframe IT.",
};

export default function ServicesPage() {
  return (
    <>
      <PageHero label="Dienstleistungen & Produkte" title="Infrastruktur, die zu Ihrem Betrieb passt.">
        Vier Bausteine, ein Team: von der Mailbox über die Virtualisierung
        bis zur Firewall. Jede Lösung wird auf Ihre Anforderungen zugeschnitten
        — nicht aus dem Katalog verkauft.
      </PageHero>

      <ServiceOverview />

      <ServiceSection
        id="email-collaboration"
        index="01"
        icon={<Mail className="size-5" strokeWidth={1.5} />}
        eyebrow="E-Mail & Collaboration"
        title="Ihr Postfach, Ihre Daten, Ihre Regeln."
        lead="Microsoft 365 ist bequem — aber nicht immer die richtige Antwort auf Datenschutz, Kosten oder Abhängigkeit. Wir bauen und betreiben Mailplattformen auf Grommunio-, Zimbra- oder Kopano-Basis mit voller Outlook- und Mobile-Kompatibilität, ohne dass Ihre Daten das eigene Rechenzentrum verlassen müssen. Wo ein kompletter Umstieg (noch) nicht sinnvoll ist, verbinden wir beide Welten in einer sauberen Hybrid-Umgebung."
        features={[
          "Aufbau und Betrieb von Grommunio-, Zimbra- oder Kopano-Umgebungen mit vollem Datenzugriff",
          "Hybrid-Anbindung an Microsoft 365 für schrittweise oder dauerhafte Koexistenz",
          "Verschlüsselte Postfach-Migration ohne Datenverlust und mit minimaler Ausfallzeit",
          "Kalender-, Kontakt- und Datei-Synchronisation über ActiveSync, CalDAV und CardDAV",
          "Anti-Spam- und Anti-Malware-Filterung direkt in der Zustellkette",
        ]}
        badges={["Grommunio", "Zimbra", "Kopano", "Microsoft 365", "ActiveSync"]}
        graphic={
          <SegmentPanel tag="mail-flow.yml">
            <MailFlowGraphic />
          </SegmentPanel>
        }
      />

      <ServiceSection
        id="infrastruktur"
        index="02"
        icon={<Server className="size-5" strokeWidth={1.5} />}
        eyebrow="Infrastruktur & Virtualisierung"
        title="Virtualisierung, die mit Ihnen mitwächst."
        lead="Nicht jedes Unternehmen braucht ein Rechenzentrum — aber jedes Unternehmen braucht eine Plattform, die zur eigenen Größe passt. Auf Basis von Proxmox VE bauen wir alles zwischen einem gehärteten Einzelserver für den Mittelstand und einem mehrknotigen Enterprise-Cluster mit Live-Migration und automatisierter Ressourcensteuerung."
        features={[
          "Konzeption und Rollout von Single-Node- bis Multi-Cluster-Umgebungen",
          "Migration von Bestandssystemen aus VMware oder Hyper-V nach Proxmox VE",
          "Ressourcenplanung nach tatsächlicher Last statt Bauchgefühl",
          "Automatisiertes Patch-, Update- und Snapshot-Management",
          "Klare Trennung von Produktiv-, Test- und Backup-Umgebungen",
        ]}
        badges={["Proxmox VE", "KVM", "LXC", "ZFS", "Terraform"]}
        graphic={
          <SegmentPanel tag="pve-cluster.conf">
            <VirtualizationGraphic />
          </SegmentPanel>
        }
        reverse
      />

      <ServiceSection
        id="ha-storage"
        index="03"
        icon={<Database className="size-5" strokeWidth={1.5} />}
        eyebrow="High Availability & Storage"
        title="Weiterlaufen, wenn Hardware ausfällt."
        lead="Ein einzelner Server-Ausfall sollte keine Betriebsunterbrechung mehr auslösen. Mit Ceph-basierten Storage-Clustern und replizierten Speichersystemen verteilen wir Daten und Dienste über mehrere Knoten, sodass Wartung, Defekte oder ganze Node-Ausfälle im laufenden Betrieb abgefangen werden."
        features={[
          "Aufbau redundanter Ceph-Cluster über mehrere Knoten und Standorte",
          "Automatisiertes Failover ohne manuellen Eingriff im Störfall",
          "Replizierter Blockspeicher für unterbrechungsfreien VM-Betrieb",
          "Backup- und Restore-Konzepte mit klar definierten RPO-/RTO-Zielen",
          "Kapazitätsplanung, die mit Ihrem Wachstum mitskaliert",
        ]}
        badges={["Ceph", "Proxmox HA", "ZFS Replication", "Proxmox Backup Server"]}
        graphic={
          <SegmentPanel tag="ceph-status.log">
            <HaClusterGraphic />
          </SegmentPanel>
        }
      />

      <ServiceSection
        id="security"
        index="04"
        icon={<ShieldCheck className="size-5" strokeWidth={1.5} />}
        eyebrow="Netzwerk & IT-Security"
        title="Ein Perimeter, der wirklich hält."
        lead="Die Firewall ist keine Checkbox, sondern die erste Verteidigungslinie. Wir konzipieren und betreiben Next-Generation-Firewalls auf Basis von OPNsense — mit sauberer Netzwerksegmentierung, verschlüsseltem Remote-Zugriff und Regeln, die zu Ihrem Netzwerk passen statt aus einer Vorlage zu stammen."
        features={[
          "Konzeption und Härtung von OPNsense-Firewalls als Netzwerk-Perimeter",
          "Netzwerksegmentierung nach Zero-Trust-Prinzipien mit VLANs und DMZ",
          "Site-to-Site- und Remote-Access-VPN für Standorte und Homeoffice",
          "Intrusion Detection & Prevention sowie zentrales Log-Monitoring",
          "Regelmäßige Sicherheitsaudits und strukturierte Patch-Zyklen",
        ]}
        badges={["OPNsense", "WireGuard", "IPsec", "Suricata", "VLAN"]}
        graphic={
          <SegmentPanel tag="fw-edge.rules">
            <SecurityGraphic />
          </SegmentPanel>
        }
        reverse
      />

      <InlineCta
        title="Unsicher, welcher Baustein der richtige Einstieg ist?"
        subtitle="Wir schauen uns Ihre Ausgangslage gemeinsam an und priorisieren, was wirklich Wirkung zeigt."
      />
    </>
  );
}