95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
|
||
import Link from "next/link";
|
||
import styles from "./ServiceSection.module.css";
|
||
import Image from "next/image";
|
||
|
||
const services = [
|
||
{
|
||
title: "Grundreinigung",
|
||
description:
|
||
"Regelmäßige Reinigung von Arbeitsplätzen, Besprechungsräumen und Gemeinschaftsbereichen für einen gepflegten Eindruck im Alltag.",
|
||
image: "/images/services/grundreinigung.jpg",
|
||
imageAlt: "Sauberer Büroarbeitsplatz nach der Reinigung",
|
||
href: "/leistungen/bueroreinigung",
|
||
},
|
||
{
|
||
title: "Glas- und Fensterreinigung",
|
||
description:
|
||
"Streifenfreie Reinigung von Fenstern, Glaselementen und Eingangsbereichen für einen professionellen ersten Eindruck.",
|
||
image: "/images/services/Fensterreinigung.jpg",
|
||
imageAlt: "Große gereinigte Fensterfront eines Geschäftsgebäudes",
|
||
href: "/leistungen/glasreinigung",
|
||
},
|
||
{
|
||
title: "Treppenhausreinigung",
|
||
description:
|
||
"Saubere Eingangs- und Treppenbereiche als Visitenkarte für Mitarbeitende, Kundschaft und Besucher.",
|
||
image: "/images/services/treppenhausreinigung.jpg",
|
||
imageAlt: "Sauberes Treppenhaus in einem Gewerbeobjekt",
|
||
href: "/leistungen/treppenhausreinigung",
|
||
},
|
||
{
|
||
title: "Unterhaltsreinigung",
|
||
description:
|
||
"Individuell abgestimmte Reinigungsintervalle für dauerhaft gepflegte Büro-, Praxis- und Gewerbeflächen.",
|
||
image: "/images/services/unterhaltsreinigung.jpg",
|
||
imageAlt: "Reinigungskraft bei der Unterhaltsreinigung in einem Büro",
|
||
href: "/leistungen/unterhaltsreinigung",
|
||
},
|
||
{
|
||
title: "Hausmeisterdienste",
|
||
description:
|
||
"Hausmeisterdienste für Kleinreparaturen bis zur Objektbetreuung – für reibungslose Abläufe.",
|
||
image: "/images/services/Hausmeisterdienste.jpg",
|
||
imageAlt: "Hausmeisterdienste für Gartenarbeit",
|
||
href: "/leistungen/Hausmeisterdienste",
|
||
},
|
||
];
|
||
|
||
export default function ServiceSection() {
|
||
return (
|
||
<section className={styles.services} aria-labelledby="services-heading">
|
||
<div className={styles.inner}>
|
||
<div className={styles.intro}>
|
||
<h2 id="services-heading" className={styles.heading}>
|
||
Professionelle Reinigung für Büros, Praxen und Geschäftsräume
|
||
</h2>
|
||
<p className={`lead ${styles.lead}`}>
|
||
Individuelle Reinigungskonzepte für Unternehmen – damit Ihre Räume sauber, zuverlässig und professions sorgenfrei bleiben.
|
||
</p>
|
||
</div>
|
||
|
||
<div className={styles.grid}>
|
||
{services.map((service) => (
|
||
<article key={service.title} className={styles.card}>
|
||
<div className={styles.imageWrap}>
|
||
<Image
|
||
src={service.image}
|
||
alt={service.imageAlt}
|
||
fill
|
||
sizes="(min-width: 1024px) 400px, (min-width: 768px) 50vw, 100vw"
|
||
className={styles.image}
|
||
/>
|
||
</div>
|
||
|
||
<div className={styles.cardBody}>
|
||
<div className={styles.cardContent}>
|
||
<h3 className={styles.cardTitle}>{service.title}</h3>
|
||
<p className={styles.cardText}>{service.description}</p>
|
||
</div>
|
||
|
||
<Link href={service.href} className="btn btn--tertiary">
|
||
Mehr
|
||
<span className="btn-icon animate" aria-hidden="true">
|
||
<ArrowRightIcon size={16} weight="bold" />
|
||
</span>
|
||
</Link>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|