adilalloandCursor
c0ba3a3798
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>
100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
"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);
|