Files
lukenyaMarathon_frontend/app/legal/page.tsx
T
KabundiNjuki ff743a1397 Initial commit
2026-10-05 16:40:36 +03:00

84 lines
3.2 KiB
TypeScript

import type { Metadata } from 'next'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { RichText } from '@/components/rich-text'
import { METHODS, frappeCall } from '@/lib/lukenya-api'
import { formatEventDate } from '@/lib/event-types'
export const revalidate = 60
export const metadata: Metadata = {
title: 'Terms and Privacy | 10 Million Trees Marathon',
description: 'Participation terms, indemnity, privacy notice and consent documents for the Lukenya University Marathon.',
}
interface LegalDoc {
name: string
document_type: string
slug: string
version: string
title: string
summary: string | null
body: string
effective_from: string | null
required: boolean
applies_to: string
}
async function documents(): Promise<LegalDoc[]> {
try {
return (await frappeCall<LegalDoc[]>(METHODS.legalDocuments, { revalidate: 60 })) || []
} catch {
return []
}
}
export default async function LegalPage() {
const docs = await documents()
return (
<div className="min-h-screen bg-white">
<Navigation />
<section className="bg-[#006838] pt-32 pb-14 px-4">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-3xl md:text-4xl font-extrabold text-white mb-3">Terms, Privacy and Consent</h1>
<p className="text-white/80">The documents every runner agrees to when they enter. Each shows its version and when it took effect.</p>
</div>
</section>
<section className="py-12 px-4">
<div className="max-w-3xl mx-auto">
{docs.length === 0 ? (
<p className="text-[#6b7280]">The documents couldn&apos;t be loaded just now. Please try again shortly.</p>
) : (
<>
<nav aria-label="Documents" className="mb-10">
<ul className="flex flex-wrap gap-2">
{docs.map((d) => (
<li key={d.slug}>
<a href={`#${d.slug}`} className="inline-block rounded-full border border-[#006838] px-4 py-1.5 text-sm font-semibold text-[#006838] hover:bg-[#006838] hover:text-white">
{d.title}
</a>
</li>
))}
</ul>
</nav>
{docs.map((d) => (
<article key={d.slug} id={d.slug} className="scroll-mt-28 border-t border-[#e5e7eb] py-10">
<h2 className="text-2xl font-bold text-[#111518]">{d.title}</h2>
<p className="mt-1 mb-5 text-sm text-[#6b7280]">
Version {d.version}
{d.effective_from ? ` · effective ${formatEventDate(d.effective_from.slice(0, 10))}` : ''}
{d.required ? '' : ' · optional'}
{d.applies_to === 'Under 18 only' ? ' · for runners under 18' : ''}
</p>
<RichText html={d.body} className="prose-legal space-y-4 text-[15px] leading-relaxed text-[#374151] [&_a]:text-[#006838] [&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6" />
</article>
))}
</>
)}
</div>
</section>
<Footer />
</div>
)
}