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,99 @@
+"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 CARD_CLASS: Record<string, string> = {
+  lavender:
+    "bg-[var(--color-surface-invert-brand-lavender)] text-[var(--color-content-invert-brand-lavender)]",
+  teal: "bg-[var(--color-surface-invert-brand-teal)] text-[var(--color-content-invert-brand-teal)]",
+  yellow:
+    "bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-brand-secondary)]",
+  red: "bg-[var(--color-surface-invert-brand-red)] text-[var(--color-content-invert-brand-red)]",
+};
+
+function TableIllustration({
+  cards,
+  deck,
+  prompt,
+}: {
+  cards: ReadonlyArray<{ id: string; label: string; color: string }>;
+  deck: readonly string[];
+  prompt: string;
+}) {
+  return (
+    <div
+      className="relative flex aspect-square w-full max-w-[560px] flex-col items-center justify-center overflow-hidden rounded-full border border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-secondary)] px-8 pb-6 pt-10"
+      aria-hidden
+    >
+      <div className="flex w-full max-w-[360px] justify-center gap-2">
+        {cards.map((card) => (
+          <div
+            key={card.id}
+            className={`flex h-[110px] w-[22%] items-end rounded-[8px] p-2 text-[12px] font-medium leading-[14px] ${CARD_CLASS[card.color] ?? ""}`}
+          >
+            {card.label}
+          </div>
+        ))}
+      </div>
+      <div className="mt-4 flex w-[140%] justify-center">
+        {deck.map((label, index) => (
+          <div
+            key={label}
+            className="flex h-[120px] w-[92px] -mx-3 flex-col items-center justify-end rounded-[6px] border border-[var(--color-border-invert-secondary,#e4e4e4)] bg-white px-2 pb-3 text-center text-[11px] leading-4 text-[var(--color-content-invert-primary)]"
+            style={{ transform: `rotate(${(index - 1) * 18}deg)` }}
+          >
+            <span className="mb-auto mt-2 grid grid-cols-4 gap-1" aria-hidden>
+              {Array.from({ length: 8 }).map((_, dot) => (
+                <span key={dot} className="size-[3px] rounded-full bg-neutral-300" />
+              ))}
+            </span>
+            {label}
+          </div>
+        ))}
+      </div>
+      <p className="mt-4 max-w-[240px] rounded-[12px] border border-[var(--color-border-default-secondary)] bg-black px-4 py-3 text-center text-[14px] leading-5 text-white">
+        {prompt}
+      </p>
+    </div>
+  );
+}
+
+function WorkshopCircleView({ className = "" }: { className?: string }) {
+  const copy = useMessages().pages.workshops.circle;
+
+  return (
+    <section
+      data-figma-node="24264-49598"
+      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] py-[var(--space-1800)] md:px-[var(--space-1200)] lg:p-[var(--space-2400)] ${className}`}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-12 lg:flex-row lg:items-center">
+        <div className="flex w-full max-w-[768px] flex-1 flex-col items-start gap-8">
+          <h2 className="x-large-heading text-[var(--color-content-default-primary)]">
+            {copy.title}
+          </h2>
+          <div className="flex flex-col gap-4">
+            {copy.paragraphs.map((paragraph) => (
+              <p
+                key={paragraph.slice(0, 24)}
+                className="medium-paragraph text-[var(--color-content-default-tertiary)]"
+              >
+                {paragraph}
+              </p>
+            ))}
+          </div>
+          <Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
+            {copy.button}
+          </Button>
+        </div>
+        <div className="flex w-full flex-1 justify-center">
+          <TableIllustration cards={copy.cards} deck={copy.deck} prompt={copy.prompt} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default memo(WorkshopCircleView);