spb/hilmacorp

1/**2 * Author: Simon-Pierre Boucher3 * Contact: contact@spboucher.ai4 * Project: Hilmacorp.ai — Web Platform5 * File: components/LegalPage.tsx6 * Description: Shared layout for legal documents (Terms of Service, Privacy Policy)7 */89import type { ReactNode } from "react";10import Container from "@/components/Container";11import SectionHeading from "@/components/SectionHeading";1213export interface LegalSection {14  title: string;15  paragraphs: string[];16}1718export default function LegalPage({19  title,20  lead,21  lastUpdated,22  sections,23  children,24}: {25  title: string;26  lead: string;27  lastUpdated: string;28  sections: LegalSection[];29  children?: ReactNode;30}) {31  return (32    <>33      <section className="relative overflow-hidden border-b border-line">34        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />35        <Container className="relative py-20 sm:py-24">36          <SectionHeading as="h1" title={title} lead={lead} />37          <p className="mt-6 font-mono text-xs uppercase tracking-[0.2em] text-ink-faint">38            {lastUpdated}39          </p>40        </Container>41      </section>4243      <section className="py-16 sm:py-20">44        <Container className="max-w-3xl">45          <div className="space-y-10">46            {sections.map((section) => (47              <section key={section.title}>48                <h2 className="font-display text-xl font-semibold text-ink">49                  {section.title}50                </h2>51                {section.paragraphs.map((paragraph) => (52                  <p key={paragraph.slice(0, 40)} className="mt-3 leading-relaxed text-ink-soft">53                    {paragraph}54                  </p>55                ))}56              </section>57            ))}58            {children}59          </div>60        </Container>61      </section>62    </>63  );64}65