Update

components/ServiceSection.tsx

@@ -0,0 +1,94 @@
+import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import Link from "next/link";
+import styles from "./ServiceSection.module.css";
+import Image from "next/image";
+
+const services = [
+  {
+    title: "Grundreinigung",
+    description:
+      "Regelmäßige Reinigung von Arbeitsplätzen, Besprechungsräumen und Gemeinschaftsbereichen für einen gepflegten Eindruck im Alltag.",
+    image: "/images/services/grundreinigung.jpg",
+    imageAlt: "Sauberer Büroarbeitsplatz nach der Reinigung",
+    href: "/leistungen/bueroreinigung",
+  },
+  {
+    title: "Glas- und Fensterreinigung",
+    description:
+      "Streifenfreie Reinigung von Fenstern, Glaselementen und Eingangsbereichen für einen professionellen ersten Eindruck.",
+    image: "/images/services/Fensterreinigung.jpg",
+    imageAlt: "Große gereinigte Fensterfront eines Geschäftsgebäudes",
+    href: "/leistungen/glasreinigung",
+  },
+  {
+    title: "Treppenhausreinigung",
+    description:
+      "Saubere Eingangs- und Treppenbereiche als Visitenkarte für Mitarbeitende, Kundschaft und Besucher.",
+    image: "/images/services/treppenhausreinigung.jpg",
+    imageAlt: "Sauberes Treppenhaus in einem Gewerbeobjekt",
+    href: "/leistungen/treppenhausreinigung",
+  },
+  {
+    title: "Unterhaltsreinigung",
+    description:
+      "Individuell abgestimmte Reinigungsintervalle für dauerhaft gepflegte Büro-, Praxis- und Gewerbeflächen.",
+    image: "/images/services/unterhaltsreinigung.jpg",
+    imageAlt: "Reinigungskraft bei der Unterhaltsreinigung in einem Büro",
+    href: "/leistungen/unterhaltsreinigung",
+  },
+  {
+    title: "Hausmeisterdienste",
+    description:
+      "Hausmeisterdienste für Kleinreparaturen bis zur Objektbetreuung – für reibungslose Abläufe.",
+    image: "/images/services/Hausmeisterdienste.jpg",
+    imageAlt: "Hausmeisterdienste für Gartenarbeit",
+    href: "/leistungen/Hausmeisterdienste",
+  },
+];
+
+export default function ServiceSection() {
+  return (
+    <section className={styles.services} aria-labelledby="services-heading">
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h2 id="services-heading" className={styles.heading}>
+            Professionelle Reinigung für Büros, Praxen und Geschäftsräume
+          </h2>
+          <p className={`lead ${styles.lead}`}>
+            Individuelle Reinigungskonzepte für Unternehmen – damit Ihre Räume sauber, zuverlässig und professions sorgenfrei bleiben.
+          </p>
+        </div>
+
+        <div className={styles.grid}>
+          {services.map((service) => (
+            <article key={service.title} className={styles.card}>
+              <div className={styles.imageWrap}>
+                <Image
+                  src={service.image}
+                  alt={service.imageAlt}
+                  fill
+                  sizes="(min-width: 1024px) 400px, (min-width: 768px) 50vw, 100vw"
+                  className={styles.image}
+                />
+              </div>
+
+              <div className={styles.cardBody}>
+                <div className={styles.cardContent}>
+                  <h3 className={styles.cardTitle}>{service.title}</h3>
+                  <p className={styles.cardText}>{service.description}</p>
+                </div>
+
+                <Link href={service.href} className="btn btn--tertiary">
+                  Mehr
+                  <span className="btn-icon animate" aria-hidden="true">
+                    <ArrowRightIcon size={16} weight="bold" />
+                  </span>
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}