Update

2026-05-13 09:08:53 +02:00
1 parent 0b775a938d
commit 8757431c79
@@ -0,0 +1,79 @@
+import Link from "next/link";
+import styles from "./IndustrySolutionsSection.module.css";
+import {
+  BuildingsIcon,
+  StethoscopeIcon,
+  WarehouseIcon,
+  HouseLineIcon,
+  ArrowRightIcon,
+} from "@phosphor-icons/react/dist/ssr";
+
+const industries = [
+  {
+    title: "Büros",
+    href: "/branchen/bueros",
+    icon: BuildingsIcon,
+  },
+  {
+    title: "Arztpraxen",
+    href: "/branchen/arztpraxen",
+    icon: StethoscopeIcon,
+  },
+  {
+    title: "Hallen und Lagerflächen",
+    href: "/branchen/hallen-lagerflaechen",
+    icon: WarehouseIcon,
+  },
+  {
+    title: "Wohn- und Geschäftshäuser",
+    href: "/branchen/wohn-geschaeftshaeuser",
+    icon: HouseLineIcon,
+  },
+  {
+    title: "Zum Kontaktformular",
+    href: "/kontakt",
+    icon: ArrowRightIcon,
+  },
+];
+
+export default function IndustrySolutionsSection() {
+  return (
+    <section
+      className={styles.section}
+      aria-labelledby="industry-solutions-heading"
+    >
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h2 id="industry-solutions-heading" className={styles.heading}>
+            Reinigungsleistungen für verschiedene Branchen
+          </h2>
+          <p className={styles.lead}>
+            Als Reinigungsfirma betreuen wir Unternehmen aus unterschiedlichen
+            Branchen. Unsere Leistungen passen wir individuell an Nutzung,
+            Objektgröße und branchenspezifische Anforderungen an.
+          </p>
+        </div>
+
+        <div className={styles.grid}>
+          {industries.map((industry) => {
+            const Icon = industry.icon;
+
+            return (
+              <Link
+                key={industry.title}
+                href={industry.href}
+                className={styles.card}
+              >
+                <span className={styles.cardText}>{industry.title}</span>
+
+                <span className={styles.iconWrap} aria-hidden="true">
+                  <Icon size={18} weight="bold" className={styles.icon} />
+                </span>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}