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

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/sections/YourTurn/YourTurn.container.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * Figma: "Section / Your Turn" (24239:1397)
+ */
+
+import { memo, useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { fetchAuthSession } from "../../../../lib/create/api";
+import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
+import AskOrganizerInquiryModal from "../../modals/AskOrganizerInquiry";
+import YourTurnView from "./YourTurn.view";
+
+const YourTurnContainer = memo(() => {
+  const router = useRouter();
+  const copy = useMessages().pages.about.yourTurn;
+  const [signedIn, setSignedIn] = useState(false);
+  const [inquiryOpen, setInquiryOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchAuthSession()
+      .then(({ user }) => {
+        if (!cancelled) setSignedIn(Boolean(user));
+      })
+      .catch(() => {
+        /* guest fallback */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const onCreateRule = useCallback(() => {
+    prepareFreshCreateFlowEntrySync({ signedIn });
+    router.push("/create/informational");
+  }, [router, signedIn]);
+
+  return (
+    <>
+      <YourTurnView
+        heading={copy.heading}
+        body={copy.body}
+        createRule={copy.createRule}
+        facilitator={copy.facilitator}
+        facilitatorHref={copy.facilitatorHref}
+        questionsLead={copy.questionsLead}
+        faq={copy.faq}
+        faqHref={copy.faqHref}
+        or={copy.or}
+        askOrganizer={copy.askOrganizer}
+        illustrationCaption={copy.illustrationCaption}
+        onCreateRule={onCreateRule}
+        onAskOrganizer={() => setInquiryOpen(true)}
+      />
+      <AskOrganizerInquiryModal
+        isOpen={inquiryOpen}
+        onClose={() => setInquiryOpen(false)}
+      />
+    </>
+  );
+});
+
+YourTurnContainer.displayName = "YourTurn";
+
+export default YourTurnContainer;

app/components/sections/YourTurn/YourTurn.types.ts

@@ -0,0 +1,15 @@
+export interface YourTurnViewProps {
+  heading: string;
+  body: string;
+  createRule: string;
+  facilitator: string;
+  facilitatorHref: string;
+  questionsLead: string;
+  faq: string;
+  faqHref: string;
+  or: string;
+  askOrganizer: string;
+  illustrationCaption: string;
+  onCreateRule: () => void;
+  onAskOrganizer: () => void;
+}

app/components/sections/YourTurn/YourTurn.view.tsx

@@ -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);

app/components/sections/YourTurn/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./YourTurn.container";
+export type { YourTurnViewProps } from "./YourTurn.types";