update

app/kontakt/page.tsx

@@ -1,10 +1,74 @@
-export default function Kontakt() {
-  return <>
-  <h1>Gebäudereinigung für ein makelloses Arbeitsumfeld</h1>
-  <h2>Gebäudereinigung für ein makelloses Arbeitsumfeld</h2>
-  <h3>Gebäudereinigung für ein makelloses Arbeitsumfeld</h3>
-  <h4>Gebäudereinigung für ein makelloses Arbeitsumfeld</h4>
-  <h5>Gebäudereinigung für ein makelloses Arbeitsumfeld</h5>
-  <h6>Gebäudereinigung für ein makelloses Arbeitsumfeld</h6>
-  </>;
+import type { Metadata } from "next";
+
+import styles from "./page.module.css";
+import ContactForm from "@/components/ContactForm";
+import FaqSection from "@/components/faq/FaqSection";
+import { homepageFaq } from "@/components/faq/faqData";
+
+export const metadata: Metadata = {
+  title: "Kontakt",
+  description:
+    "Kontaktieren Sie Basiclean für ein individuelles Angebot zu Reinigung und Hausmeisterdiensten in Hannover und Umgebung.",
+};
+
+export default function Page() {
+  return (
+    <main>
+      <section className={styles.hero} aria-labelledby="hero-heading">
+        <div className={styles.inner}>
+          <div className={styles.decoration} aria-hidden="true">
+            {Array.from({ length: 18 }).map((_, i) => (
+              <span key={i} className={styles.dot} />
+            ))}
+          </div>
+
+          <h1 id="hero-heading" className={styles.heading}>
+            Kontaktieren Sie uns
+          </h1>
+          <p className={`lead ${styles.lead}`}>
+            Sie haben Fragen oder möchten ein individuelles Angebot anfragen?
+            Füllen Sie das Formular aus – wir melden uns schnellstmöglich bei
+            Ihnen zurück.
+          </p>
+        </div>
+      </section>
+
+      <section className={styles.formSection}>
+        <div className={styles.formInner}>
+          <div className={styles.formPanel}>
+            <ContactForm />
+          </div>
+
+          <div className={styles.infoPanel}>
+            <h2 className={styles.infoHeading}>So erreichen Sie uns</h2>
+
+            <ul className={styles.infoList}>
+              <li className={styles.infoItem}>
+                <span className={styles.infoLabel}>Telefon</span>
+                <a href="tel:+4951112345678" className={styles.infoValue}>
+                  0511 123 456 78
+                </a>
+              </li>
+              <li className={styles.infoItem}>
+                <span className={styles.infoLabel}>E-Mail</span>
+                <a href="mailto:info@basiclean.de" className={styles.infoValue}>
+                  info@basiclean.de
+                </a>
+              </li>
+              <li className={styles.infoItem}>
+                <span className={styles.infoLabel}>Adresse</span>
+                <span className={styles.infoValue}>
+                  Musterstraße 12, 30159 Hannover
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <FaqSection title="Häufige Fragen" items={homepageFaq} />
+      </section>
+    </main>
+  );
 }