Add the Workshops page and keep each sign-up on the site.

The form is built once to the settled field set, and a valid send is saved before anyone is emailed. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-11-03 19:56:49 -07:00
1 parent 974a5ace4c
commit c0ba3a3798
@@ -0,0 +1,56 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../../buttons/Button";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { WORKSHOP_SIGNUP_ANCHOR_ID } from "../../../../lib/workshopSignup";
+
+const DOT_CLASS: Record<string, string> = {
+  teal: "bg-[var(--color-content-invert-brand-teal)]",
+  lime: "bg-[var(--color-surface-invert-brand-kiwi)]",
+  lavender: "bg-[var(--color-content-invert-brand-lavender)]",
+  red: "bg-[var(--color-content-invert-brand-red)]",
+};
+
+function WorkshopOverviewView({ className = "" }: { className?: string }) {
+  const copy = useMessages().pages.workshops.overview;
+
+  return (
+    <section
+      data-figma-node="24263-45235"
+      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] py-[var(--space-1800)] md:px-[var(--space-1200)] lg:px-[112px] lg:py-[120px] ${className}`}
+    >
+      <div className="mx-auto flex w-full max-w-[1216px] flex-col items-center gap-12">
+        <div className="flex max-w-[640px] flex-col items-center gap-2 text-center">
+          <h2 className="x-large-heading text-[var(--color-content-default-primary)]">
+            {copy.title}
+          </h2>
+          <p className="medium-paragraph text-[var(--color-content-default-tertiary)]">
+            {copy.body}
+          </p>
+        </div>
+        <ul className="grid w-full max-w-[800px] grid-cols-2 gap-4 md:gap-6">
+          {copy.rooms.map((room) => (
+            <li
+              key={room.id}
+              className="flex min-h-[100px] items-center gap-4 rounded-[12px] border border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-secondary)] p-6"
+            >
+              <span
+                className={`size-3 shrink-0 rounded-full ${DOT_CLASS[room.color] ?? ""}`}
+                aria-hidden
+              />
+              <span className="text-[18px] font-medium leading-6 text-[var(--color-content-default-primary)]">
+                {room.label}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
+          {copy.button}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+export default memo(WorkshopOverviewView);