71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|