64 lines
2.0 KiB
TypeScript
64 lines
2.0 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 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>
|
|
);
|
|
}
|