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>

app/components/sections/WorkshopHero/WorkshopHero.container.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { memo } from "react";
+import WorkshopHeroView from "./WorkshopHero.view";
+import type { WorkshopHeroProps } from "./WorkshopHero.types";
+
+/** Figma: "Section / Workshop Hero" (24262:40645). */
+function WorkshopHeroContainer({ className }: WorkshopHeroProps) {
+  return <WorkshopHeroView className={className} />;
+}
+
+WorkshopHeroContainer.displayName = "WorkshopHero";
+
+export default memo(WorkshopHeroContainer);

app/components/sections/WorkshopHero/WorkshopHero.types.ts

@@ -0,0 +1,3 @@
+export interface WorkshopHeroProps {
+  className?: string;
+}

app/components/sections/WorkshopHero/WorkshopHero.view.tsx

@@ -0,0 +1,80 @@
+"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> = {
+  yellow:
+    "bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-brand-secondary)]",
+  teal: "bg-[var(--color-surface-invert-brand-teal)] text-[var(--color-content-invert-brand-teal)]",
+  lavender:
+    "bg-[var(--color-surface-invert-brand-lavender)] text-[var(--color-content-invert-brand-lavender)]",
+  red: "bg-[var(--color-surface-invert-brand-red)] text-[var(--color-content-invert-brand-red)]",
+};
+
+const DESKTOP_CARD_CLASS = [
+  "left-[8%] top-[18%] w-[46%] -rotate-3",
+  "left-[28%] top-[8%] w-[42%] rotate-[9deg]",
+  "left-0 top-[34%] w-[48%] -rotate-[15deg]",
+  "left-[36%] top-[42%] w-[52%] rotate-[16deg]",
+];
+
+function WorkshopHeroView({ className = "" }: { className?: string }) {
+  const copy = useMessages().pages.workshops.hero;
+  const href = `#${WORKSHOP_SIGNUP_ANCHOR_ID}`;
+
+  return (
+    <section
+      data-figma-node="24258-40644"
+      className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] pb-[var(--space-1800)] pt-[var(--space-1200)] md:px-[var(--space-1200)] lg:px-[var(--space-2400)] lg:pb-[120px] lg:pt-[96px] ${className}`}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-12 lg:flex-row lg:items-center lg:gap-12">
+        <div className="order-2 flex min-w-0 flex-1 flex-col gap-8 lg:order-1">
+          <div className="flex flex-col gap-4">
+            <p className="x-small-label-caps text-[var(--color-content-default-tertiary)]">
+              {copy.eyebrow}
+            </p>
+            <h1 className="x-large-display text-[var(--color-content-default-primary)]">
+              {copy.title}
+            </h1>
+            <p className="large-paragraph text-[var(--color-content-default-tertiary)]">
+              {copy.body}
+            </p>
+          </div>
+          <Button href={href} size="small">
+            {copy.button}
+          </Button>
+          <p className="border-t border-[var(--color-border-default-secondary)] pt-6 text-[12px] leading-4 text-[var(--color-content-default-tertiary)]">
+            {copy.credit}
+          </p>
+        </div>
+        <div className="order-1 min-w-0 flex-1 lg:order-2">
+          <div className="flex flex-col lg:hidden">
+            {copy.cards.map((card, index) => (
+              <div
+                key={card.id}
+                className={`rounded-[16px] px-4 py-6 ${CARD_CLASS[card.color] ?? ""} ${index > 0 ? "-mt-3" : ""}`}
+              >
+                <p className="small-heading">{card.label}</p>
+              </div>
+            ))}
+          </div>
+          <div className="relative hidden h-[480px] lg:block">
+            {copy.cards.map((card, index) => (
+              <div
+                key={card.id}
+                className={`absolute rounded-[16px] px-4 py-6 ${CARD_CLASS[card.color] ?? ""} ${DESKTOP_CARD_CLASS[index] ?? ""}`}
+              >
+                <p className="small-heading">{card.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default memo(WorkshopHeroView);

app/components/sections/WorkshopHero/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./WorkshopHero.container";
+export type { WorkshopHeroProps } from "./WorkshopHero.types";