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/NarrativeBlock/NarrativeBlock.container.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * Figma: "Section / Narrative Block" (24237:1241)
+ */
+
+import { memo, useCallback, useState } from "react";
+import { useMessages } from "../../../contexts/MessagesContext";
+import AskOrganizerInquiryModal from "../../modals/AskOrganizerInquiry";
+import NarrativeBlockView from "./NarrativeBlock.view";
+
+const NarrativeBlockContainer = memo(() => {
+  const copy = useMessages().pages.about.narrativeBlock;
+  const [inquiryOpen, setInquiryOpen] = useState(false);
+  const openInquiry = useCallback(() => setInquiryOpen(true), []);
+  const closeInquiry = useCallback(() => setInquiryOpen(false), []);
+
+  return (
+    <>
+      <NarrativeBlockView
+        heading={copy.heading}
+        paragraphs={copy.paragraphs}
+        addHeading={copy.addHeading}
+        addLine={copy.addLine}
+        shareExperiences={copy.shareExperiences}
+        helpBuild={copy.helpBuild}
+        helpBuildHref={copy.helpBuildHref}
+        onShareExperiences={openInquiry}
+      />
+      <AskOrganizerInquiryModal isOpen={inquiryOpen} onClose={closeInquiry} />
+    </>
+  );
+});
+
+NarrativeBlockContainer.displayName = "NarrativeBlock";
+
+export default NarrativeBlockContainer;

app/components/sections/NarrativeBlock/NarrativeBlock.types.ts

@@ -0,0 +1,10 @@
+export interface NarrativeBlockViewProps {
+  heading: string;
+  paragraphs: string[];
+  addHeading: string;
+  addLine: string;
+  shareExperiences: string;
+  helpBuild: string;
+  helpBuildHref: string;
+  onShareExperiences: () => void;
+}

app/components/sections/NarrativeBlock/NarrativeBlock.view.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../../buttons/Button";
+import type { NarrativeBlockViewProps } from "./NarrativeBlock.types";
+
+function NarrativeBlockView({
+  heading,
+  paragraphs,
+  addHeading,
+  addLine,
+  shareExperiences,
+  helpBuild,
+  helpBuildHref,
+  onShareExperiences,
+}: NarrativeBlockViewProps) {
+  return (
+    <section
+      data-figma-node="24237:1241"
+      className="flex flex-col items-center gap-10 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
+      aria-labelledby="about-narrative-heading"
+    >
+      <div className="flex w-full max-w-[800px] flex-col gap-8 lg:gap-10">
+        <h2
+          id="about-narrative-heading"
+          className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
+        >
+          {heading}
+        </h2>
+        <div className="flex flex-col gap-8">
+          {paragraphs.map((paragraph) => (
+            <p
+              key={paragraph}
+              className="font-inter text-paragraph-l text-[var(--color-content-default-secondary)] lg:text-paragraph-xl"
+            >
+              {paragraph}
+            </p>
+          ))}
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-default-primary)]">
+              {addHeading}
+            </h3>
+            <p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
+              {addLine}
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-4">
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="medium"
+              onClick={onShareExperiences}
+            >
+              {shareExperiences}
+            </Button>
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="medium"
+              href={helpBuildHref}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {helpBuild}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+NarrativeBlockView.displayName = "NarrativeBlockView";
+
+export default memo(NarrativeBlockView);

app/components/sections/NarrativeBlock/index.tsx

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