update

app/leistungen/[slug]/page.tsx

@@ -3,10 +3,20 @@ 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 }));
+  return leistungen.map((item) => ({
+    slug: item.slug,
+  }));
 }
 
 export default async function LeistungDetail({
@@ -15,9 +25,13 @@ export default async function LeistungDetail({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
-  const leistung = leistungen.find((item) => item.slug === slug);
 
-  if (!leistung) notFound();
+  const leistung = leistungen.find((item) => item.slug === slug);
+  const faqEntry = leistungenFaq.find((item) => item.slug === slug);
+
+  if (!leistung) {
+    notFound();
+  }
 
   return (
     <main>
@@ -28,6 +42,7 @@ export default async function LeistungDetail({
               <span key={i} className={styles.dot} />
             ))}
           </div>
+
           <h1 id="hero-heading" className={styles.heading}>
             {leistung.titleMain}
             <span className={styles.headingSub}>{leistung.titleSub}</span>
@@ -48,6 +63,7 @@ export default async function LeistungDetail({
 
             <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" />
@@ -58,6 +74,45 @@ export default async function LeistungDetail({
           </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>
   );
 }