update

components/QualityClaimSection.tsx

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import Link from "next/link";
+import { PhoneIcon, ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import { companyData } from "@/data/companyData";
+import styles from "./qualityClaimSection.module.css";
+
+interface QualityClaimSectionProps {
+  heading: string;
+  textLeft: string;
+  textRight: string;
+  image: string;
+  imageAlt: string;
+}
+
+export default function QualityClaimSection({
+  heading,
+  textLeft,
+  textRight,
+  image,
+  imageAlt,
+}: QualityClaimSectionProps) {
+  return (
+    <section
+      className={styles.qualityClaim}
+      aria-labelledby="quality-claim-heading"
+    >
+      <div className={styles.inner}>
+        <div className={styles.imageWrapper}>
+          <Image
+            src={image}
+            alt={imageAlt}
+            fill
+            className={styles.image}
+            sizes="(max-width: 1024px) 100vw, 320px"
+          />
+        </div>
+
+        <div className={styles.content}>
+          <h2 id="quality-claim-heading" className={styles.heading}>
+            {heading}
+          </h2>
+
+          <div className={styles.textGrid}>
+            <p className={styles.text}>{textLeft}</p>
+            <p className={styles.text}>{textRight}</p>
+          </div>
+
+          <div className={styles.actions}>
+            <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>
+            <Link href="/kontakt" className="btn btn--filled">
+              <span className="btn-icon animate" aria-hidden="true">
+                <ArrowRightIcon size={18} weight="bold" />
+              </span>
+              Kostenloses Angebot sichern
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}