spb/polyllm

1import * as React from "react";2import Link from "next/link";3import { Container, Eyebrow } from "./section";45/** Shared layout for the legal pages: sticky in-page nav on wide screens, readable prose. */6export function LegalPage({7  eyebrow,8  title,9  updated,10  intro,11  sections,12}: {13  eyebrow: string;14  title: string;15  updated: string;16  intro: React.ReactNode;17  sections: { id: string; title: string; body: React.ReactNode }[];18}) {19  return (20    <Container className="py-14 sm:py-20">21      <div className="grid gap-10 lg:grid-cols-12">22        <header className="lg:col-span-12">23          <Eyebrow>{eyebrow}</Eyebrow>24          <h1 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">{title}</h1>25          <p className="mt-3 text-sm text-fg-subtle">Last updated {updated}</p>26          <div className="mt-6 max-w-2xl text-[15px] leading-7 text-fg-muted">{intro}</div>27        </header>28        <nav className="hidden lg:col-span-3 lg:block" aria-label="On this page">29          <ol className="sticky top-20 space-y-1.5 border-l border-border pl-4 text-[13px]">30            {sections.map((s, i) => (31              <li key={s.id}>32                <a href={`#${s.id}`} className="block py-0.5 text-fg-muted transition-colors hover:text-fg">33                  <span className="mr-2 font-mono text-[11px] text-fg-subtle">{String(i + 1).padStart(2, "0")}</span>34                  {s.title}35                </a>36              </li>37            ))}38          </ol>39        </nav>40        <div className="legal-prose max-w-2xl lg:col-span-9">41          {sections.map((s, i) => (42            <section key={s.id} id={s.id} className="scroll-mt-20 border-t border-border py-8 first:border-t-0 first:pt-0">43              <h2 className="text-lg font-semibold tracking-tight sm:text-xl">44                <span className="mr-2 font-mono text-[12px] font-medium text-fg-subtle">{String(i + 1).padStart(2, "0")}</span>45                {s.title}46              </h2>47              <div className="mt-3 space-y-3 text-[15px] leading-7 text-fg-muted [&_li]:pl-1 [&_strong]:font-medium [&_strong]:text-fg [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-5">{s.body}</div>48            </section>49          ))}50          <p className="mt-6 text-sm text-fg-subtle">51            Questions? Write to{" "}52            <a href="mailto:contact@spboucher.ai" className="text-accent underline-offset-4 hover:underline">53              contact@spboucher.ai54            </a>55            . See also our <Link href="/privacy" className="text-accent underline-offset-4 hover:underline">Privacy Policy</Link> and{" "}56            <Link href="/terms" className="text-accent underline-offset-4 hover:underline">57              Terms of Service58            </Link>59            .60          </p>61        </div>62      </div>63    </Container>64  );65}66