84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import {
|
||
UsersThreeIcon,
|
||
GraduationCapIcon,
|
||
ClockIcon,
|
||
SealCheckIcon,
|
||
LeafIcon,
|
||
CurrencyCircleDollarIcon,
|
||
} from "@phosphor-icons/react/dist/ssr";
|
||
import styles from "./benefitsSection.module.css";
|
||
|
||
const benefits = [
|
||
{
|
||
icon: UsersThreeIcon,
|
||
title: "Feste Ansprechpartner",
|
||
description:
|
||
"Keine wechselnden Zuständigkeiten – wir sind immer persönlich für Sie da.",
|
||
},
|
||
{
|
||
icon: GraduationCapIcon,
|
||
title: "Geschultes Personal",
|
||
description:
|
||
"Unsere Teams werden kontinuierlich in modernen Reinigungstechniken geschult.",
|
||
},
|
||
{
|
||
icon: ClockIcon,
|
||
title: "Flexible Zeiten",
|
||
description:
|
||
"Wir reinigen dann, wenn es Ihren Betriebsablauf am wenigsten stört.",
|
||
},
|
||
{
|
||
icon: SealCheckIcon,
|
||
title: "Höchste Qualität",
|
||
description:
|
||
"Strenges Qualitätsmanagement durch regelmäßige Objektkontrollen.",
|
||
},
|
||
{
|
||
icon: LeafIcon,
|
||
title: "Umweltfreundlich",
|
||
description:
|
||
"Einsatz von biologisch abbaubaren Reinigungsmitteln für die Umwelt.",
|
||
},
|
||
{
|
||
icon: CurrencyCircleDollarIcon,
|
||
title: "Transparente Kosten",
|
||
description:
|
||
"Klare Preisgestaltung ohne versteckte Nebenkosten für Ihre Planung.",
|
||
},
|
||
];
|
||
|
||
export default function BenefitsSection() {
|
||
return (
|
||
<section className={styles.benefits} aria-labelledby="benefits-heading">
|
||
<div className={styles.inner}>
|
||
<div className={styles.intro}>
|
||
<h2 id="benefits-heading" className={styles.heading}>
|
||
Ihre Vorteile mit uns
|
||
</h2>
|
||
<p className={`lead ${styles.lead}`}>
|
||
Wir verstehen die Anforderungen moderner Unternehmen an einen
|
||
Facility-Partner: Verlässlichkeit, Professionalität und Transparenz.
|
||
</p>
|
||
</div>
|
||
|
||
<div className={styles.grid}>
|
||
{benefits.map((benefit) => {
|
||
const Icon = benefit.icon;
|
||
return (
|
||
<article key={benefit.title} className={styles.card}>
|
||
<span className={styles.iconWrap} aria-hidden="true">
|
||
<Icon size={24} weight="duotone" />
|
||
</span>
|
||
<div className={styles.cardContent}>
|
||
<h3 className={styles.cardTitle}>{benefit.title}</h3>
|
||
<p className={styles.cardText}>{benefit.description}</p>
|
||
</div>
|
||
</article>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|