- Artikel: Lesefortschritt als feine Honiglinie am oberen Rand, Initiale in Serifenschrift und Honig, groesserer Titel, angenehme Zeilenlaenge - Wissen-Uebersicht und "Weitere Artikel" als ruhige Liste mit grossen Serifen-Titeln, Unterstrich und gezeichnetem Pfeil statt "→" - Rechtliche Seiten mit klarerer Ueberschriften-Hierarchie Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { Container } from "@/components/ui";
|
|
|
|
export interface LegalSection {
|
|
heading: string;
|
|
paragraphs: string[];
|
|
}
|
|
|
|
/**
|
|
* Gemeinsames Layout fuer alle rechtlichen Seiten (Impressum, Datenschutz,
|
|
* AGB, Widerrufsbelehrung, Versand und Zahlung). Inhalte sind Platzhalter
|
|
* und muessen vor Live-Gang durch anwaltlich geprueften Text ersetzt werden.
|
|
*/
|
|
export function LegalPage({
|
|
title,
|
|
noticeText,
|
|
sections,
|
|
}: {
|
|
title: string;
|
|
/** Optional — leer lassen, wenn kein Hinweis (mehr) angezeigt werden soll. */
|
|
noticeText: string;
|
|
sections: LegalSection[];
|
|
}) {
|
|
return (
|
|
<div className="py-20">
|
|
<Container className="max-w-3xl">
|
|
<h1 className="text-4xl md:text-5xl leading-[1.05] tracking-[-0.01em] text-forest">{title}</h1>
|
|
{noticeText ? (
|
|
<p className="mt-2 text-xs text-honey-dark tracking-wide-caps">{noticeText}</p>
|
|
) : null}
|
|
<div className="mt-10 space-y-10">
|
|
{sections.map((section) => (
|
|
<section key={section.heading}>
|
|
<h2 className="text-2xl text-forest">{section.heading}</h2>
|
|
<div className="mt-3 space-y-3 text-sm text-ink/70 leading-relaxed">
|
|
{section.paragraphs.map((p, i) => (
|
|
<p key={i}>{p}</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|