119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { leistungen } from "../data";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
|
|
import { Slider } from "@/components/slider/Slider";
|
|
import styles from "./page.module.css";
|
|
import MaintenanceCleaningSection from "@/components/MaintenanceCleaningSection";
|
|
import QualityClaimSection from "@/components/QualityClaimSection";
|
|
import ConceptSection from "@/components/ConceptSection";
|
|
import ProcessSection from "@/components/ProcessSection";
|
|
import FaqSection from "@/components/faq/FaqSection";
|
|
import { leistungenFaq } from "@/components/faq/faqData";
|
|
import ContactCtaSection from "@/components/contact/ContactCtaSection";
|
|
|
|
export function generateStaticParams() {
|
|
return leistungen.map((item) => ({
|
|
slug: item.slug,
|
|
}));
|
|
}
|
|
|
|
export default async function LeistungDetail({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string }>;
|
|
}) {
|
|
const { slug } = await params;
|
|
|
|
const leistung = leistungen.find((item) => item.slug === slug);
|
|
const faqEntry = leistungenFaq.find((item) => item.slug === slug);
|
|
|
|
if (!leistung) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<section className={styles.hero} aria-labelledby="hero-heading">
|
|
<div className={styles.inner}>
|
|
<div className={styles.decoration} aria-hidden="true">
|
|
{Array.from({ length: 18 }).map((_, i) => (
|
|
<span key={i} className={styles.dot} />
|
|
))}
|
|
</div>
|
|
|
|
<h1 id="hero-heading" className={styles.heading}>
|
|
{leistung.titleMain}
|
|
<span className={styles.headingSub}>{leistung.titleSub}</span>
|
|
</h1>
|
|
|
|
<div className={styles.content}>
|
|
<div className={styles.imageWrapper}>
|
|
<div className={styles.imageFrame}>
|
|
<Image
|
|
src={leistung.image}
|
|
alt={leistung.imageAlt}
|
|
fill
|
|
className={styles.image}
|
|
sizes="(max-width: 640px) 100vw, 260px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.body}>
|
|
<p className={`lead ${styles.lead}`}>{leistung.text}</p>
|
|
|
|
<Link href="/kontakt" className="btn btn--filled">
|
|
<span className="btn-icon animate" aria-hidden="true">
|
|
<ArrowRightIcon size={18} weight="bold" />
|
|
</span>
|
|
Jetzt Angebot anfragen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{leistung.slides.length > 0 && (
|
|
<section
|
|
className={styles.sliderSection}
|
|
aria-label={`Weitere Informationen zur ${leistung.titleMain}`}
|
|
>
|
|
<h2 className={styles.slidesHeading}>{leistung.titleSlides}</h2>
|
|
<div className={styles.inner}>
|
|
<Slider slides={leistung.slides} imageAlt={leistung.imageAlt} />
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<section>
|
|
<MaintenanceCleaningSection {...leistung.maintenanceSection} />
|
|
</section>
|
|
|
|
<section>
|
|
<QualityClaimSection {...leistung.qualityClaimSection} />
|
|
</section>
|
|
|
|
<section>
|
|
<ConceptSection {...leistung.conceptSection} />
|
|
</section>
|
|
|
|
<section>
|
|
<ProcessSection {...leistung.processSection} />
|
|
</section>
|
|
|
|
<section>
|
|
<FaqSection
|
|
title={faqEntry?.title ?? "Häufige Fragen"}
|
|
items={faqEntry?.faq ?? []}
|
|
/>
|
|
</section>
|
|
|
|
<section>
|
|
<ContactCtaSection {...leistung.contactCtaSection} />
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|