Implement about page

2026-05-13 23:08:36 -06:00
parent d2dfa099a2
commit b6b9b63608
69 changed files with 1834 additions and 28 deletions
@@ -0,0 +1,73 @@
+import messages from "../../../messages/en/index";
+import { getTranslation } from "../../../lib/i18n/getTranslation";
+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 QuoteBlock from "../../components/sections/QuoteBlock";
+import AskOrganizer from "../../components/sections/AskOrganizer";
+
+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 statsAsOf =
+    typeof page.stats.asOf === "string"
+      ? page.stats.asOf
+      : String(page.stats.asOf ?? "");
+
+  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}
+        items={statsItems.map((item) => ({
+          ...item,
+          asOf: statsAsOf,
+        }))}
+      />
+      <TripleTextBlock columns={tripleColumns} />
+      <Book
+        title={page.book.title}
+        description={page.book.description}
+        buttonText={page.book.buttonText}
+        buttonHref={page.book.buttonHref}
+        imageAlt={page.book.imageAlt}
+      />
+      <FaqAccordion title={page.faq.title} items={faqItems} />
+      <QuoteBlock
+        variant="statement"
+        id="about-statement-quote"
+        quote={page.quote.paragraph1}
+        quoteSecondary={page.quote.paragraph2}
+      />
+      <section className="bg-[var(--color-surface-default-primary)]">
+        <AskOrganizer {...askOrganizerData} />
+      </section>
+    </div>
+  );
+}