Backup eingespielt

components/CtaSection.module.css

@@ -0,0 +1,53 @@
+.cta {
+  background: linear-gradient(135deg, #267361 0%, #1f5f50 100%);
+  padding-block: var(--space-16);
+}
+
+.inner {
+  max-width: var(--container-width);
+  margin: 0 auto;
+  padding-inline: var(--space-4);
+}
+
+.content {
+  max-width: 48rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+  text-align: center;
+}
+
+.heading {
+  color: #ffffff;
+  max-width: 22ch;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.actions :global(.btn) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.actions :global(.btn--tertiary) {
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #ffffff;
+}
+
+@media (min-width: 768px) {
+   .cta {
+    padding-block: var(--space-20);
+  }
+
+  .actions {
+    flex-direction: row;
+    justify-content: center;
+  }
+}

components/CtaSection.tsx

@@ -0,0 +1,37 @@
+import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr";
+import Link from "next/link";
+import { companyData } from "@/data/companyData";
+import styles from "./CtaSection.module.css";
+
+export default function CtaSection() {
+  return (
+    <section className={styles.cta} aria-labelledby="cta-heading">
+      <div className={styles.inner}>
+        <div className={styles.content}>
+          <h2 id="cta-heading" className={styles.heading}>
+            Saubere Räume für einen starken ersten Eindruck
+          </h2>
+
+          <div className={styles.actions}>
+            <Link href="/kontakt" className="btn btn btn--filled-inverse">
+              <span className="btn-icon animate" aria-hidden="true">
+                <ArrowRightIcon size={18} weight="bold" />
+              </span>
+              Jetzt Angebot anfragen
+            </Link>
+
+            <a
+              href={`tel:${companyData.contact.phone.value}`}
+              className="btn btn--tertiary"
+            >
+              <span className="btn-icon" aria-hidden="true">
+                <PhoneIcon size={18} weight="bold" />
+              </span>
+              {companyData.contact.phone.display}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Footer.tsx

@@ -53,10 +53,10 @@ export default function Footer() {
               <span className={styles["footer__nav-title"]}>Rechtliches</span>
               <ul>
                 <li>
-                  <Link href="/impressum">Impressum</Link>
+                  <Link href="/rechtliches/impressum">Impressum</Link>
                 </li>
                 <li>
-                  <Link href="/datenschutz">Datenschutz</Link>
+                  <Link href="/rechtliches/datenschutz">Datenschutz</Link>
                 </li>
               </ul>
             </div>