Update

components/benefitsSection.tsx

@@ -0,0 +1,83 @@
+import {
+  UsersThreeIcon,
+  GraduationCapIcon,
+  ClockIcon,
+  SealCheckIcon,
+  LeafIcon,
+  CurrencyCircleDollarIcon,
+} from "@phosphor-icons/react/dist/ssr";
+import styles from "./benefitsSection.module.css";
+
+const benefits = [
+  {
+    icon: UsersThreeIcon,
+    title: "Feste Ansprechpartner",
+    description:
+      "Keine wechselnden Zuständigkeiten – wir sind immer persönlich für Sie da.",
+  },
+  {
+    icon: GraduationCapIcon,
+    title: "Geschultes Personal",
+    description:
+      "Unsere Teams werden kontinuierlich in modernen Reinigungstechniken geschult.",
+  },
+  {
+    icon: ClockIcon,
+    title: "Flexible Zeiten",
+    description:
+      "Wir reinigen dann, wenn es Ihren Betriebsablauf am wenigsten stört.",
+  },
+  {
+    icon: SealCheckIcon,
+    title: "Höchste Qualität",
+    description:
+      "Strenges Qualitätsmanagement durch regelmäßige Objektkontrollen.",
+  },
+  {
+    icon: LeafIcon,
+    title: "Umweltfreundlich",
+    description:
+      "Einsatz von biologisch abbaubaren Reinigungsmitteln für die Umwelt.",
+  },
+  {
+    icon: CurrencyCircleDollarIcon,
+    title: "Transparente Kosten",
+    description:
+      "Klare Preisgestaltung ohne versteckte Nebenkosten für Ihre Planung.",
+  },
+];
+
+export default function BenefitsSection() {
+  return (
+    <section className={styles.benefits} aria-labelledby="benefits-heading">
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h2 id="benefits-heading" className={styles.heading}>
+            Ihre Vorteile mit uns
+          </h2>
+          <p className={`lead ${styles.lead}`}>
+            Wir verstehen die Anforderungen moderner Unternehmen an einen
+            Facility-Partner: Verlässlichkeit, Professionalität und Transparenz.
+          </p>
+        </div>
+
+        <div className={styles.grid}>
+          {benefits.map((benefit) => {
+            const Icon = benefit.icon;
+            return (
+              <article key={benefit.title} className={styles.card}>
+                <span className={styles.iconWrap} aria-hidden="true">
+                  <Icon size={24} weight="duotone" />
+                </span>
+                <div className={styles.cardContent}>
+                  <h3 className={styles.cardTitle}>{benefit.title}</h3>
+                  <p className={styles.cardText}>{benefit.description}</p>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}