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>
81 lines
3.2 KiB
TypeScript
81 lines
3.2 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> = {
|
|
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);
|