mirror of
https://github.com/Since-3/Kumasy-Marketing.git
synced 2026-10-12 20:51:18 +00:00
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Footer } from "./sections";
|
|
import { Nav } from "./ui";
|
|
|
|
/**
|
|
* Shared shell for the legal pages. The root layout renders only
|
|
* {children}, so each page has to bring its own chrome — same reasoning
|
|
* as not-found.tsx.
|
|
*/
|
|
export function LegalPage({
|
|
title,
|
|
intro,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
intro?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<>
|
|
<Nav />
|
|
|
|
<main
|
|
id="hauptinhalt"
|
|
className="relative isolate flex-1 px-4 pb-24 pt-36 sm:pt-44"
|
|
>
|
|
<div className="mx-auto w-full max-w-[760px]">
|
|
<h1 className="text-balance font-display text-[clamp(2rem,5.5vw,3rem)] font-semibold leading-[1.04] tracking-[-0.04em] text-ink">
|
|
{title}
|
|
</h1>
|
|
|
|
{intro ? (
|
|
<p className="mt-5 text-pretty text-body-lg text-slate-body">
|
|
{intro}
|
|
</p>
|
|
) : null}
|
|
|
|
{/* Long-form legal copy: generous measure, clear hierarchy. */}
|
|
<div className="mt-12 flex flex-col gap-10 text-body text-slate-body [&_a]:font-medium [&_a]:text-ink [&_a]:underline [&_a]:decoration-amber [&_a]:decoration-2 [&_a]:underline-offset-4 [&_h2]:font-display [&_h2]:text-subheading [&_h2]:font-semibold [&_h2]:text-ink [&_li]:mt-1.5 [&_p]:mt-3 [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:pl-5">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Marks copy that still has to be supplied. Visible on purpose — a
|
|
* placeholder that blends in is a placeholder that ships.
|
|
*/
|
|
export function Todo({ children }: { children: ReactNode }) {
|
|
return (
|
|
<span className="rounded-md bg-peach-wash px-1.5 py-0.5 font-medium text-peach-ink">
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|