Rebuild the About page from the current marketing frames, and leave the unapproved sentences off the page.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-11-03 16:59:36 -07:00
1 parent 3dee3a587b
commit 2101676429
@@ -0,0 +1,89 @@
+"use client";
+
+import { memo } from "react";
+import { getAssetPath } from "../../../../lib/assetUtils";
+import type { ParticipantSelectionViewProps } from "./ParticipantSelection.types";
+
+function ParticipantArt() {
+  return (
+    <div
+      className="relative mx-auto aspect-[540/555] w-full max-w-[420px] pr-12 lg:mx-0 lg:w-[540px] lg:max-w-none lg:shrink-0 lg:pr-0"
+      aria-hidden
+    >
+      {/* eslint-disable @next/next/no-img-element -- decorative Figma shapes */}
+      <img
+        src={getAssetPath("assets/shapes/about-participant-circles.svg")}
+        alt=""
+        width={282}
+        height={282}
+        className="absolute top-0 left-0 h-auto w-[52.2%]"
+      />
+      <img
+        src={getAssetPath("assets/shapes/about-participant-rings.svg")}
+        alt=""
+        width={334}
+        height={334}
+        className="absolute top-[6.3%] left-[38.15%] h-auto w-[61.85%]"
+      />
+      <img
+        src={getAssetPath("assets/shapes/about-participant-clover.svg")}
+        alt=""
+        width={200}
+        height={200}
+        className="absolute top-[57.4%] left-[25.7%] h-auto w-[37%] rotate-[60deg]"
+      />
+      {/* eslint-enable @next/next/no-img-element */}
+    </div>
+  );
+}
+
+function ParticipantSelectionView({
+  heading,
+  body,
+  groups,
+  footnote,
+}: ParticipantSelectionViewProps) {
+  return (
+    <section
+      data-figma-node="24227:30762"
+      className="flex flex-col gap-4 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-20 lg:flex-row lg:items-center lg:justify-center lg:gap-8 lg:px-[var(--space-2400)]"
+      aria-labelledby="about-participant-heading"
+    >
+      <ParticipantArt />
+      <div className="flex w-full min-w-0 flex-col gap-12 lg:max-w-[928px] lg:flex-1">
+        <div className="flex flex-col gap-4">
+          <h2
+            id="about-participant-heading"
+            className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-heading-xxl"
+          >
+            {heading}
+          </h2>
+          <p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-l">
+            {body}
+          </p>
+        </div>
+        <div>
+          <ul className="m-0 list-none p-0">
+            {groups.map((group, index) => (
+              <li
+                key={group}
+                className={`border-b border-[var(--color-border-default-secondary)] py-4 font-inter text-paragraph-xs text-[var(--color-content-default-primary)] lg:text-paragraph-m ${
+                  index === 0 ? "border-t" : ""
+                }`}
+              >
+                {group}
+              </li>
+            ))}
+          </ul>
+          <p className="pt-6 font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)] lg:text-paragraph-s">
+            {footnote}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+ParticipantSelectionView.displayName = "ParticipantSelectionView";
+
+export default memo(ParticipantSelectionView);