Backup eingespielt

app/leistungen/[slug]/page.tsx

@@ -0,0 +1,63 @@
+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 styles from "./page.module.css";
+
+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);
+
+  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>
+    </main>
+  );
+}