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