Marco
26ae4a15f4
Testimonials on /todo-cards, /newsletter, /challenge now come from the new Payload testimonials collection via a shared TestimonialsGrid component, instead of 3 separately hardcoded arrays. Adds Next.js Draft Mode (/api/preview) plus Live-Preview-aware client wrappers (LiveRichText, LiveTestimonialsGrid, LivePostContent) for posts, legal pages, and testimonials — mounted only while Draft Mode is enabled, so ordinary visitors keep getting the plain static components.
79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { draftMode } from "next/headers";
|
||
import { Reveal } from "../components/Reveal";
|
||
import { Footer } from "../components/Footer";
|
||
import { TrustRow } from "../components/TrustRow";
|
||
import { RichText, extractHeadings } from "../components/RichText";
|
||
import { LiveRichText } from "../components/LiveRichText";
|
||
import { SectionTOC } from "../components/SectionTOC";
|
||
import { getLegalPage } from "../lib/payload";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "AGB",
|
||
description: "Allgemeine Geschäftsbedingungen von einfach produktiv.",
|
||
alternates: { canonical: "/agb" },
|
||
};
|
||
|
||
export default async function AgbPage() {
|
||
const page = await getLegalPage("agb");
|
||
const headings = page ? extractHeadings(page.content) : [];
|
||
const { isEnabled: isPreview } = await draftMode();
|
||
|
||
return (
|
||
<>
|
||
<main className="flex flex-col flex-1 bg-bg-base">
|
||
<Reveal className="flex flex-col gap-3 items-start pb-6 pt-10 px-[var(--layout-padding-x)] w-full">
|
||
<p className="flex items-center gap-2 text-body-sm text-text-muted">
|
||
<Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
|
||
<span>›</span>
|
||
<span className="text-text-primary">AGB</span>
|
||
</p>
|
||
<p
|
||
className="font-semibold text-h-feature text-text-primary"
|
||
style={{ fontFamily: "var(--font-lora)" }}
|
||
>
|
||
Allgemeine Geschäftsbedingungen
|
||
</p>
|
||
<p className="text-body text-text-muted">Stand: Juli 2026</p>
|
||
</Reveal>
|
||
|
||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
|
||
<div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
|
||
<SectionTOC sections={headings} />
|
||
|
||
{/* Static, not part of the CMS content — same reasoning as
|
||
the Impressum/Datenschutz pages' own callout cards. */}
|
||
<div className="bg-bg-muted flex flex-col gap-3 items-start p-6 rounded-md w-full">
|
||
<Image alt="" src="/icon-trust-leaf.png" width={28} height={28} className="size-7 object-contain" />
|
||
<p
|
||
className="font-semibold text-body text-text-primary"
|
||
style={{ fontFamily: "var(--font-lora)" }}
|
||
>
|
||
Unser Anspruch
|
||
</p>
|
||
<p className="text-body-sm text-text-muted">
|
||
Wir entwickeln Produkte, die dich im Alltag wirklich weiterbringen – mit Klarheit,
|
||
Qualität und einem bewussten Umgang mit Ressourcen.
|
||
</p>
|
||
<div className="h-[0.125rem] w-8 bg-brand" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full lg:flex-1 min-w-0">
|
||
{page ? (
|
||
isPreview ? <LiveRichText initialContent={page.content} /> : <RichText content={page.content} />
|
||
) : (
|
||
<p className="text-body text-text-muted">Inhalte werden gerade aktualisiert.</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<TrustRow />
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|