Update

components/faq/FaqSection.module.css

@@ -0,0 +1,137 @@
+.section {
+  background: var(--color-background-linear);
+  padding-block: var(--space-16);
+}
+
+.inner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-8);
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.heading {
+  max-width: 11ch;
+  text-align: left;
+  color: var(--color-accent);
+}
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.item {
+  width: 100%;
+}
+
+.itemHeading {
+  margin: 0;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  min-height: 52px;
+  padding: var(--space-3) var(--space-5);
+  background: var(--color-accent);
+  color: #ffffff;
+  border: 0;
+  border-radius: 9999px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.trigger:hover,
+.trigger:focus-visible {
+  background: #1f6152;
+}
+
+.triggerText {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+}
+
+.iconWrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  transition: transform 0.25s ease;
+}
+
+.trigger[aria-expanded="true"] .iconWrap {
+  transform: rotate(180deg);
+}
+
+.panel {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.panelInner {
+  padding: var(--space-4) var(--space-5) var(--space-2);
+}
+
+.answer {
+  max-width: 52ch;
+  color: var(--color-text-muted);
+  font-size: var(----font-size-xs);
+  line-height: 1.5;
+}
+
+@media (min-width: 768px) {
+  .section {
+    padding-block: var(--space-24);
+  }
+
+  .inner {
+    grid-template-columns: 280px 1fr;
+    gap: var(--space-16);
+  }
+
+  .trigger {
+    min-height: 56px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-block: var(--space-36);
+  }
+
+  .inner {
+    padding-inline: var(--space-6);
+  }
+
+  .accordion {
+    max-width: 560px;
+    justify-self: end;
+    width: 100%;
+  }
+}
+
+@media (hover: none) {
+  .trigger:hover,
+  .trigger:focus-visible {
+    background: var(--color-accent);
+    box-shadow: 0 4px 14px rgba(38, 115, 97, 0.14);
+  }
+}

components/faq/FaqSection.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr";
+import styles from "./FaqSection.module.css";
+
+export type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+type FaqSectionProps = {
+  title: string;
+  items: FaqItem[];
+};
+
+type AccordionItemProps = {
+  item: FaqItem;
+  isOpen: boolean;
+  buttonId: string;
+  panelId: string;
+  onToggle: () => void;
+};
+
+function AccordionItem({
+  item,
+  isOpen,
+  buttonId,
+  panelId,
+  onToggle,
+}: AccordionItemProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  const handleToggle = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = "";
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+
+    onToggle();
+  };
+
+  return (
+    <div className={styles.item}>
+      <h3 className={styles.itemHeading}>
+        <button
+          id={buttonId}
+          type="button"
+          className={styles.trigger}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={handleToggle}
+        >
+          <span className={styles.triggerText}>{item.question}</span>
+
+          <span className={styles.iconWrap} aria-hidden="true">
+            <CaretDownIcon size={14} weight="bold" />
+          </span>
+        </button>
+      </h3>
+
+      <div
+        id={panelId}
+        ref={panelRef}
+        role="region"
+        aria-labelledby={buttonId}
+        className={styles.panel}
+      >
+        <div className={styles.panelInner}>
+          <p className={styles.answer}>{item.answer}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function FaqSection({ title, items }: FaqSectionProps) {
+  const baseId = useId();
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <section className={styles.section} aria-labelledby="faq-heading">
+      <div className={styles.inner}>
+        <div className={styles.content}>
+          <h2 id="faq-heading" className={styles.heading}>
+            {title}
+          </h2>
+        </div>
+
+        <div className={styles.accordion}>
+          {items.map((item, index) => {
+            const isOpen = openIndex === index;
+
+            return (
+              <AccordionItem
+                key={item.question}
+                item={item}
+                isOpen={isOpen}
+                buttonId={`${baseId}-btn-${index}`}
+                panelId={`${baseId}-panel-${index}`}
+                onToggle={() => setOpenIndex(isOpen ? null : index)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

components/faq/faqData.ts

@@ -0,0 +1,17 @@
+export const homepageFaq = [
+  {
+    question: "Kostenlose Beratung und Angebotserstellung",
+    answer:
+      "Wir besprechen Ihr Objekt, den Reinigungsbedarf und die gewünschten Intervalle. Anschließend erhalten Sie ein transparentes Angebot.",
+  },
+  {
+    question: "Individuelle Reinigungslösungen",
+    answer:
+      "Unsere Leistungen passen wir an Ihre Branche, Objektgröße und Anforderungen an. So entsteht ein Reinigungsplan, der wirklich zu Ihrem Alltag passt.",
+  },
+  {
+    question: "Zeitverfügbare Umsetzung",
+    answer:
+      "Wir planen flexibel und reinigen dann, wenn es Ihren Betrieb am wenigsten stört. Auf Wunsch auch früh morgens, abends oder am Wochenende.",
+  },
+];