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>
74 lines
3.1 KiB
TypeScript
74 lines
3.1 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";
|
|
|
|
function WhoRunsItView({ className = "" }: { className?: string }) {
|
|
const copy = useMessages().pages.workshops.whoRunsIt;
|
|
|
|
return (
|
|
<section
|
|
data-figma-node="24265-50769"
|
|
className={`bg-[var(--color-surface-default-primary)] py-[var(--space-1800)] pl-0 pr-[var(--space-400)] md:pr-[var(--space-1200)] lg:py-[120px] lg:pr-[var(--space-2400)] ${className}`}
|
|
>
|
|
<div className="flex w-full flex-col items-start gap-12 lg:flex-row lg:items-center lg:gap-20">
|
|
<div
|
|
className="relative aspect-square w-full max-w-[419px] shrink-0 overflow-hidden bg-[var(--color-content-invert-brand-royal)]"
|
|
aria-hidden
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma mark */}
|
|
<img
|
|
src="/assets/marketing/workshops/who-runs-it-shape.svg"
|
|
alt=""
|
|
className="absolute inset-0 size-full object-cover"
|
|
/>
|
|
<div className="absolute bottom-0 left-0 h-1/2 w-full overflow-hidden bg-[var(--color-surface-invert-brand-lime)]">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma mark */}
|
|
<img
|
|
src="/assets/marketing/workshops/who-runs-it-mark.svg"
|
|
alt=""
|
|
className="size-full object-cover object-left"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-8 pr-[var(--space-400)] lg:pr-0">
|
|
<h2 className="x-large-heading text-[var(--color-content-default-primary)]">
|
|
{copy.title}
|
|
</h2>
|
|
<ul className="flex flex-col gap-8 md:flex-row md:flex-wrap md:gap-16">
|
|
{copy.people.map((person) => (
|
|
<li key={person.id} className="flex min-w-[240px] flex-1 gap-4">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-[16px] font-bold leading-6 text-[var(--color-content-default-primary)]">
|
|
{person.name}
|
|
</p>
|
|
<p className="small-paragraph text-[var(--color-content-default-secondary)]">
|
|
{person.bio}
|
|
</p>
|
|
</div>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- facilitator portrait from Figma */}
|
|
<img
|
|
src={person.image}
|
|
alt={person.imageAlt}
|
|
width={84}
|
|
height={84}
|
|
className="size-[84px] shrink-0 rounded-full border-2 border-white/40 object-cover"
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="border-t border-[var(--color-border-default-secondary)] pt-6">
|
|
<Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
|
|
{copy.button}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default memo(WhoRunsItView);
|