tenext redesign

components/shared/LegalContent.tsx

@@ -0,0 +1,42 @@
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { PageContainer } from "@/components/shared/PageContainer";
+import { RevealOnView } from "@/components/shared/RevealOnView";
+import { LegalSection, legalEffectiveDate } from "@/data/legal";
+
+interface LegalContentProps {
+  sections: LegalSection[];
+}
+
+/**
+ * LegalContent — shared renderer for Privacy and Terms pages.
+ * Uses the site's spacing, container, typography, and reveal animation.
+ */
+export function LegalContent({ sections }: LegalContentProps) {
+  return (
+    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
+      <PageContainer className="max-w-[820px]">
+        <p className="mb-[40px] text-[14px] font-semibold uppercase tracking-[0.1em] text-tenext-teal">
+          Effective {legalEffectiveDate}
+        </p>
+
+        <div className="flex flex-col gap-[40px]">
+          {sections.map((section, index) => (
+            <RevealOnView key={section.heading} delay={index * 60}>
+              <h2 className="mb-[16px] font-[var(--font-sora)] text-[24px] font-bold leading-[1.25] text-tenext-dark">
+                {section.heading}
+              </h2>
+              {section.body.map((paragraph, i) => (
+                <p
+                  key={i}
+                  className="mb-[14px] text-[16px] leading-[1.8] text-tenext-text-muted"
+                >
+                  {paragraph}
+                </p>
+              ))}
+            </RevealOnView>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}