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/QuoteBlock/QuoteBlock.view.tsx

@@ -24,6 +24,49 @@ function QuoteBlockView({
   const t = useTranslation("quoteBlock");
   const avatarAlt = t("avatarAlt").replace("{author}", author);
 
+  if (config.citationLayout) {
+    return (
+      <section
+        data-figma-node="23983-53436"
+        className={`${config.container} ${className}`.trim()}
+        aria-labelledby={quoteId}
+      >
+        <figure className="relative mx-auto w-full max-w-[1216px] overflow-hidden rounded-[24px] bg-[var(--color-surface-invert-brand-lavender)] px-[var(--space-600)] py-[var(--space-1000)] md:px-[var(--space-1200)] md:py-[var(--space-1800)]">
+          <div
+            className="pointer-events-none absolute -right-10 -top-16 size-[280px] rounded-full bg-white/25"
+            aria-hidden
+          />
+          <div
+            className="pointer-events-none absolute -bottom-20 right-16 size-[320px] rounded-full bg-white/20"
+            aria-hidden
+          />
+          <blockquote id={quoteId} className="relative">
+            <p
+              className={`font-bricolage-grotesque font-medium text-[var(--color-content-invert-primary)] ${config.quote}`}
+            >
+              “{quote}”
+            </p>
+          </blockquote>
+          <figcaption className="relative mt-10 flex flex-col gap-1">
+            <cite
+              id={authorId}
+              className={`font-inter not-italic uppercase text-[var(--color-content-invert-primary)] ${config.author}`}
+            >
+              {author}
+            </cite>
+            {source ? (
+              <p
+                className={`font-inter uppercase text-[var(--color-content-invert-primary)] ${config.source}`}
+              >
+                {source}
+              </p>
+            ) : null}
+          </figcaption>
+        </figure>
+      </section>
+    );
+  }
+
   if (config.statementLayout) {
     const statementTextClass =
       "font-bricolage-grotesque text-medium-heading text-[var(--color-surface-default-tertiary)] md:text-xx-large-heading";