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/(marketing)/about/page.tsx

@@ -1,86 +1,50 @@
 import type { Metadata } from "next";
 import messages from "../../../messages/en/index";
-import {
-  ASSETS,
-  getAssetPath,
-  governanceBookletPath,
-  structureBeforeCrisisPath,
-} from "../../../lib/assetUtils";
 import { getTranslation } from "../../../lib/i18n/getTranslation";
 import { routeMetadata } from "../../../lib/siteMetadata";
-import AboutHeader from "../../components/type/AboutHeader";
-import type { AboutHeaderSegment } from "../../components/type/AboutHeader";
-import Stats from "../../components/sections/Stats";
-import type { StatItem } from "../../components/sections/Stats";
-import TripleTextBlock from "../../components/type/TripleTextBlock";
-import type { TripleTextBlockColumn } from "../../components/type/TripleTextBlock";
-import Book from "../../components/sections/Book";
-import FaqAccordion from "../../components/sections/Accordion";
-import type { FaqAccordionItem } from "../../components/sections/Accordion";
+import CenteredHeader from "../../components/sections/CenteredHeader";
+import History from "../../components/sections/History";
+import ParticipantSelection from "../../components/sections/ParticipantSelection";
+import FourQuestions from "../../components/sections/FourQuestions";
+import RebuildProcess from "../../components/sections/RebuildProcess";
+import NarrativeBlock from "../../components/sections/NarrativeBlock";
+import YourTurn from "../../components/sections/YourTurn";
+import Credits from "../../components/sections/Credits";
 import QuoteBlock from "../../components/sections/QuoteBlock";
 import AskOrganizer from "../../components/sections/AskOrganizer";
 
 export const metadata: Metadata = routeMetadata("/about", {
   title: messages.metadata.about.title,
+  description: messages.metadata.about.description,
 });
 
-function asArray<T>(value: unknown): T[] {
-  return Array.isArray(value) ? value : [];
-}
-
 export default function AboutPage() {
   const t = (key: string) => getTranslation(messages, key);
-
   const page = messages.pages.about;
 
-  const headerSegments = asArray<AboutHeaderSegment>(page.aboutHeader.segments);
-  const statsItems = asArray<StatItem>(page.stats.items);
-
-  const faqItems = asArray<FaqAccordionItem>(page.faq.items);
-  const tripleColumns = asArray<TripleTextBlockColumn>(page.tripleTextBlock.columns);
-
-  const askOrganizerData = {
-    title: t("pages.home.askOrganizer.title"),
-    subtitle: t("pages.home.askOrganizer.subtitle"),
-    buttonText: t("pages.home.askOrganizer.buttonText"),
-  };
-
   return (
     <div className="min-h-screen bg-black">
-      <AboutHeader segments={headerSegments} />
-      <Stats
-        titlePrefix={page.stats.titlePrefix}
-        titleEmphasis={page.stats.titleEmphasis}
-        titleSuffix={page.stats.titleSuffix}
-        asOfPrefix={page.stats.asOfPrefix}
-        items={statsItems}
-      />
-      <TripleTextBlock columns={tripleColumns} />
-      <Book
-        title={page.structureBeforeCrisis.title}
-        description={page.structureBeforeCrisis.description}
-        buttonText={page.structureBeforeCrisis.buttonText}
-        buttonHref={getAssetPath(structureBeforeCrisisPath())}
-        imageSrc={getAssetPath(ASSETS.STRUCTURE_BEFORE_CRISIS_COVER)}
-        imageAlt={page.structureBeforeCrisis.imageAlt}
-      />
-      <Book
-        title={page.communityRules.title}
-        description={page.communityRules.description}
-        buttonText={page.communityRules.buttonText}
-        buttonHref={getAssetPath(governanceBookletPath())}
-        imageSrc={getAssetPath(ASSETS.COMMUNITY_RULES_COVER)}
-        imageAlt={page.communityRules.imageAlt}
-      />
-      <FaqAccordion title={page.faq.title} items={faqItems} />
+      <CenteredHeader />
       <QuoteBlock
         variant="statement"
-        id="about-statement-quote"
-        quote={page.quote.paragraph1}
-        quoteSecondary={page.quote.paragraph2}
+        id="about-opening-statement"
+        statementStacked
+        quote={page.openingStatement.paragraph1}
+        quoteSecondary={page.openingStatement.paragraph2}
       />
-      <section className="bg-[var(--color-surface-default-primary)]">
-        <AskOrganizer {...askOrganizerData} />
+      <History />
+      <ParticipantSelection />
+      <FourQuestions />
+      <RebuildProcess />
+      <NarrativeBlock />
+      <YourTurn />
+      <Credits />
+      <section className="bg-black">
+        <AskOrganizer
+          title={t("pages.home.askOrganizer.title")}
+          subtitle={t("pages.home.askOrganizer.subtitle")}
+          buttonText={t("pages.home.askOrganizer.buttonText")}
+        />
       </section>
     </div>
   );