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,102 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../../buttons/Button";
+import Link from "../../navigation/Link";
+import type { YourTurnViewProps } from "./YourTurn.types";
+
+const COLOR_BARS = [
+  "bg-[var(--color-lavender-lavender200)]",
+  "bg-[var(--color-surface-invert-brand-teal)]",
+  "bg-[var(--color-surface-invert-brand-secondary)]",
+  "bg-[var(--color-surface-invert-brand-red)]",
+] as const;
+
+function YourTurnView({
+  heading,
+  body,
+  createRule,
+  facilitator,
+  facilitatorHref,
+  questionsLead,
+  faq,
+  faqHref,
+  or,
+  askOrganizer,
+  illustrationCaption,
+  onCreateRule,
+  onAskOrganizer,
+}: YourTurnViewProps) {
+  return (
+    <section
+      data-figma-node="24239:1397"
+      className="border-b border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-tertiary)] px-[var(--space-600)] py-12 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
+      aria-labelledby="about-your-turn-heading"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 lg:flex-row lg:items-start lg:gap-12">
+        <div className="flex w-full flex-col gap-8 lg:max-w-[472px] lg:shrink-0 lg:gap-12">
+          <div className="flex flex-col gap-5 lg:gap-6">
+            <div className="flex h-1 w-[184px] gap-1.5 lg:h-3 lg:w-[400px]" aria-hidden>
+              {COLOR_BARS.map((bar) => (
+                <span key={bar} className={`h-full flex-1 rounded-sm ${bar}`} />
+              ))}
+            </div>
+            <h2
+              id="about-your-turn-heading"
+              className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
+            >
+              {heading}
+            </h2>
+            <p className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)]">
+              {body}
+            </p>
+          </div>
+          <div className="flex flex-col gap-3 md:flex-row md:gap-4">
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="large"
+              className="w-full justify-center md:w-auto"
+              onClick={onCreateRule}
+            >
+              {createRule}
+            </Button>
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="large"
+              className="w-full justify-center md:w-auto"
+              href={facilitatorHref}
+            >
+              {facilitator}
+            </Button>
+          </div>
+          <p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
+            {questionsLead}{" "}
+            <Link href={faqHref} variant="paragraph" theme="dark" type="primary">
+              {faq}
+            </Link>{" "}
+            {or}{" "}
+            <Link
+              variant="paragraph"
+              theme="dark"
+              type="primary"
+              onClick={onAskOrganizer}
+            >
+              {askOrganizer}
+            </Link>
+          </p>
+        </div>
+        <div className="flex h-[246px] w-full flex-col items-start justify-end rounded-[var(--radius-300)] border border-dashed border-[var(--color-border-default-tertiary)] bg-[var(--color-surface-default-secondary)] p-6 lg:h-[340px] lg:flex-1">
+          <p className="font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)]">
+            {illustrationCaption}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+YourTurnView.displayName = "YourTurnView";
+
+export default memo(YourTurnView);