feat: DR-7746 legal pages (terms, SLA, privacy, code of conduct, partner TOS)

apps/site/src/app/event-code-of-conduct/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import {
+  cocSections,
+  cocLastUpdated,
+  cocDescription,
+} from "@/data/event-code-of-conduct";
+import { LegalAccordion } from "@/components/legal-accordion";
+
+export const metadata: Metadata = {
+  title: "Event Code of Conduct | Prisma",
+  description:
+    "All attendees, speakers, sponsors, and volunteers at Prisma events are required to agree to this code of conduct.",
+};
+
+export default function EventCodeOfConductPage() {
+  return (
+    <main className="flex-1 w-full z-1 -mt-24 pt-24 relative before:absolute before:inset-x-0 before:top-0 before:h-[600px] before:bg-[linear-gradient(180deg,#171937_0%,transparent_100%)] before:-z-1">
+      {/* Hero */}
+      <div className="text-center py-16">
+        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+          Event Code of Conduct
+        </h1>
+        <p className="max-w-[640px] mx-auto text-lg text-foreground-neutral-weak text-left mb-6">
+          {cocDescription}
+        </p>
+        <p className="text-lg text-foreground-neutral-weak">
+          <b>Last updated:</b> {cocLastUpdated}
+        </p>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-[1248px] mx-auto px-2.5 md:px-6">
+        <hr className="border-stroke-neutral" />
+      </div>
+
+      {/* Content */}
+      <div className="mx-auto w-full max-w-[1248px] px-2.5 md:px-6 grid gap-4 grid-rows-[auto_1fr] md:grid-cols-[150px_1fr] lg:grid-cols-[1fr_640px_1fr] print:grid-cols-[100%]">
+        <LegalAccordion sections={cocSections} />
+      </div>
+    </main>
+  );
+}

apps/site/src/app/partners/tos/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { partnersTosSections, partnersTosLastUpdated } from "@/data/partners-tos";
+import { LegalAccordion } from "@/components/legal-accordion";
+
+export const metadata: Metadata = {
+  title: "Partner Network Terms of Service | Prisma",
+  description:
+    "Terms of Service for the Prisma Partner Network covering affiliates, technology partners, and resellers.",
+};
+
+export default function PartnersTosPage() {
+  return (
+    <main className="flex-1 w-full z-1 -mt-24 pt-24 relative before:absolute before:inset-x-0 before:top-0 before:h-[600px] before:bg-[linear-gradient(180deg,#171937_0%,transparent_100%)] before:-z-1">
+      {/* Hero */}
+      <div className="text-center py-16">
+        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+          Terms of Service Prisma Partner Network
+        </h1>
+        <p className="text-lg text-foreground-neutral-weak">
+          <b>Last updated:</b> {partnersTosLastUpdated}
+        </p>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-[1248px] mx-auto px-2.5 md:px-6">
+        <hr className="border-stroke-neutral" />
+      </div>
+
+      {/* Content */}
+      <div className="mx-auto w-full max-w-[1248px] px-2.5 md:px-6 grid gap-4 grid-rows-[auto_1fr] md:grid-cols-[150px_1fr] lg:grid-cols-[1fr_640px_1fr] print:grid-cols-[100%]">
+        <LegalAccordion sections={partnersTosSections} />
+      </div>
+    </main>
+  );
+}

apps/site/src/app/privacy/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { privacySections, privacyLastUpdated } from "@/data/privacy";
+import { LegalAccordion } from "@/components/legal-accordion";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy | Prisma",
+  description:
+    "Read the Prisma Privacy Policy covering how we collect, use, and protect your data.",
+};
+
+export default function PrivacyPage() {
+  return (
+    <main className="flex-1 w-full z-1 -mt-24 pt-24 relative before:absolute before:inset-x-0 before:top-0 before:h-[600px] before:bg-[linear-gradient(180deg,#171937_0%,transparent_100%)] before:-z-1">
+      {/* Hero */}
+      <div className="text-center py-16">
+        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+          Privacy Policy
+        </h1>
+        <p className="text-lg text-foreground-neutral-weak">
+          <b>Last updated:</b> {privacyLastUpdated}
+        </p>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-[1248px] mx-auto px-2.5 md:px-6">
+        <hr className="border-stroke-neutral" />
+      </div>
+
+      {/* Content */}
+      <div className="mx-auto w-full max-w-[1248px] px-2.5 md:px-6 grid gap-4 grid-rows-[auto_1fr] md:grid-cols-[150px_1fr] lg:grid-cols-[1fr_640px_1fr] print:grid-cols-[100%]">
+        <LegalAccordion sections={privacySections} />
+      </div>
+    </main>
+  );
+}

apps/site/src/app/sla/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { slaSections, slaLastUpdated } from "@/data/sla";
+import { LegalAccordion } from "@/components/legal-accordion";
+
+export const metadata: Metadata = {
+  title: "Service Level Agreement | Prisma",
+  description:
+    "Read the Prisma Service Level Agreement covering uptime commitments and service credits.",
+};
+
+export default function SlaPage() {
+  return (
+    <main className="flex-1 w-full z-1 -mt-24 pt-24 relative before:absolute before:inset-x-0 before:top-0 before:h-[600px] before:bg-[linear-gradient(180deg,#171937_0%,transparent_100%)] before:-z-1">
+      {/* Hero */}
+      <div className="text-center py-16">
+        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+          Prisma Service Level Agreement
+        </h1>
+        <p className="text-lg text-foreground-neutral-weak">
+          <b>Last updated:</b> {slaLastUpdated}
+        </p>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-[1248px] mx-auto px-2.5 md:px-6">
+        <hr className="border-stroke-neutral" />
+      </div>
+
+      {/* Content */}
+      <div className="mx-auto w-full max-w-[1248px] px-2.5 md:px-6 grid gap-4 grid-rows-[auto_1fr] md:grid-cols-[150px_1fr] lg:grid-cols-[1fr_640px_1fr] print:grid-cols-[100%]">
+        <LegalAccordion sections={slaSections} />
+      </div>
+    </main>
+  );
+}

apps/site/src/app/terms/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { termsSections, termsLastUpdated } from "@/data/terms";
+import { LegalAccordion } from "@/components/legal-accordion";
+
+export const metadata: Metadata = {
+  title: "Terms of Service | Prisma",
+  description:
+    "Read the Prisma Terms of Service governing your use of Prisma products and services.",
+};
+
+export default function TermsPage() {
+  return (
+    <main className="flex-1 w-full z-1 -mt-24 pt-24 relative before:absolute before:inset-x-0 before:top-0 before:h-[600px] before:bg-[linear-gradient(180deg,#171937_0%,transparent_100%)] before:-z-1">
+      {/* Hero */}
+      <div className="text-center py-16">
+        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+          Terms of Service
+        </h1>
+        <p className="text-lg text-foreground-neutral-weak">
+          <b>Last updated:</b> {termsLastUpdated}
+        </p>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-[1248px] mx-auto px-2.5 md:px-6">
+        <hr className="border-stroke-neutral" />
+      </div>
+
+      {/* Content */}
+      <div className="mx-auto w-full max-w-[1248px] px-2.5 md:px-6 grid gap-4 grid-rows-[auto_1fr] md:grid-cols-[150px_1fr] lg:grid-cols-[1fr_640px_1fr] print:grid-cols-[100%]">
+        <LegalAccordion sections={termsSections} />
+      </div>
+    </main>
+  );
+}

apps/site/src/components/legal-accordion.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+type Section = {
+  title: string;
+  content: ReactNode;
+};
+
+function AccordionItem({
+  section,
+  isOpen,
+  onToggle,
+}: {
+  section: Section;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const anchorId = section.title.trim().toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <div className="scroll-mt-16 md:scroll-mt-24 border-t border-stroke-neutral" id={anchorId}>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between py-3 text-left cursor-pointer"
+        onClick={onToggle}
+        aria-expanded={isOpen}
+      >
+        <span className="text-lg font-bold leading-[25px] text-foreground-neutral">
+          {section.title}
+        </span>
+        <i
+          className={cn(
+            "fa-regular text-foreground-neutral-weaker text-lg",
+            isOpen ? "fa-chevron-up" : "fa-chevron-down",
+          )}
+        />
+      </button>
+      {isOpen && (
+        <div className="pb-4 text-foreground-neutral-weak text-left [&_p]:my-4 [&_a]:underline [&_a]:transition-colors [&_a]:duration-150 hover:[&_a]:text-foreground-neutral [&_ul]:list-revert [&_ul]:m-revert [&_ul]:p-revert [&_ol]:list-revert [&_ol]:m-revert [&_ol]:p-revert [&_li]:my-2 print:text-foreground-neutral">
+          {section.content}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LegalAccordion({
+  sections,
+  defaultExpand = false,
+}: {
+  sections: Section[];
+  defaultExpand?: boolean;
+}) {
+  const allIndices = sections.map((_, i) => i);
+  const [openItems, setOpenItems] = useState<Set<number>>(
+    () => new Set(defaultExpand ? allIndices : []),
+  );
+
+  const isAllExpanded = openItems.size === sections.length;
+
+  const toggleAll = () => {
+    setOpenItems(new Set(isAllExpanded ? [] : allIndices));
+  };
+
+  const toggleItem = (idx: number) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  };
+
+  const printPage = () => {
+    setOpenItems(new Set(allIndices));
+    setTimeout(() => window.print(), 50);
+  };
+
+  return (
+    <>
+      {/* Controls — sticky sidebar on desktop, horizontal row on mobile */}
+      <div className="flex items-start flex-row-reverse gap-4 justify-between pt-14 pb-14 md:justify-center md:sticky md:top-[120px] md:flex-col md:pt-14 md:pb-24 md:self-start print:hidden">
+        <button
+          type="button"
+          className="text-foreground-orm hover:text-foreground-orm-strong transition-all duration-300 cursor-pointer"
+          onClick={toggleAll}
+        >
+          <span className="text-lg leading-6 font-semibold underline">
+            {isAllExpanded ? "Collapse" : "Expand"} all
+          </span>
+          <i
+            className={`fa-regular fa-${isAllExpanded ? "minus" : "plus"} ml-2 text-base`}
+          />
+        </button>
+        <button
+          type="button"
+          className="text-foreground-orm hover:text-foreground-orm-strong transition-all duration-300 cursor-pointer"
+          onClick={printPage}
+        >
+          <span className="text-lg leading-6 font-semibold underline">
+            Print
+          </span>
+          <i className="fa-regular fa-print ml-2 text-base" />
+        </button>
+      </div>
+
+      {/* Accordion content */}
+      <div className="w-full pb-24 md:pt-10">
+        {sections.map((section, idx) => (
+          <AccordionItem
+            key={idx}
+            section={section}
+            isOpen={openItems.has(idx)}
+            onToggle={() => toggleItem(idx)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

apps/site/src/data/event-code-of-conduct.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+
+export const cocLastUpdated = "August 1, 2024";
+
+export const cocDescription =
+  "All attendees, speakers, sponsors, and volunteers at our events and conferences are required to agree to the following code of conduct.";
+
+type CocSection = {
+  title: string;
+  content: ReactNode;
+};
+
+export const cocSections: CocSection[] = [
+  {
+    title: "The quick version",
+    content: (
+      <>
+        <p>
+          Prisma is dedicated to providing a harassment-free experience for
+          everyone, regardless of gender, gender identity and expression, age,
+          sexual orientation, disability, physical appearance, body size, race,
+          ethnicity, religion (or lack thereof), or technology choices. We do not
+          tolerate harassment of event participants in any form. Sexual language
+          and imagery are not appropriate for any event venue, including talks,
+          workshops, parties, Twitter, Slack, and other online media.
+        </p>
+        <p>
+          Event participants violating these rules may be sanctioned or expelled
+          from the event without a refund at the discretion of the event
+          organizers.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "The less quick version",
+    content: (
+      <>
+        <p>
+          Harassment includes offensive verbal comments related to gender, gender
+          identity and expression, age, sexual orientation, disability, physical
+          appearance, body size, race, ethnicity, religion, technology choices,
+          deliberate intimidation, stalking, following, harassing photography or
+          recording, sustained disruption of talks or other events,
+          inappropriate physical contact, and unwelcome sexual attention.
+        </p>
+        <p>
+          Participants asked to stop any harassing behavior are expected to
+          comply immediately.
+        </p>
+        <p>
+          Sponsors are also subject to the anti-harassment policy. In
+          particular, sponsors should not use sexualized images, activities, or
+          other material. Booth staff (including volunteers) should not use
+          sexualized clothing, uniforms, or costumes, or otherwise create a
+          sexualized environment.
+        </p>
+        <p>
+          If a participant engages in harassing behavior, the organizers may take
+          any action they deem appropriate, including warning the offender or
+          expulsion from the event with no refund.
+        </p>
+        <p>
+          If you are being harassed, notice that someone else is being harassed,
+          or have any other concerns, please contact a member of event staff
+          immediately. Event staff can be identified by their badges or
+          clothing.
+        </p>
+        <p>
+          Event staff will be happy to help participants contact hotel/venue
+          security or local law enforcement, provide escorts, or otherwise
+          assist those experiencing harassment to feel safe for the duration of
+          the event.
+        </p>
+        <p>
+          We expect participants to follow these rules at all Prisma event
+          venues and conference-related social gatherings.
+        </p>
+      </>
+    ),
+  },
+];