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

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * Figma: "Section / History" (24220:30635)
+ */
+
+import { memo } from "react";
+import { useMessages } from "../../../contexts/MessagesContext";
+import HistoryView from "./History.view";
+import type { HistoryItem } from "./History.types";
+
+const HistoryContainer = memo(() => {
+  const copy = useMessages().pages.about.history;
+  return (
+    <HistoryView heading={copy.heading} items={copy.items as HistoryItem[]} />
+  );
+});
+
+HistoryContainer.displayName = "History";
+
+export default HistoryContainer;

app/components/sections/History/History.types.ts

@@ -0,0 +1,24 @@
+export type HistoryAccent = "brand" | "positive";
+
+export type HistoryRun = {
+  text: string;
+  emphasis?: boolean;
+};
+
+export type HistoryItem =
+  | {
+      kind: "entry";
+      date: string;
+      accent: HistoryAccent;
+      body: HistoryRun[];
+    }
+  | {
+      kind: "callout";
+      title: string;
+      body: string;
+    };
+
+export interface HistoryViewProps {
+  heading: string;
+  items: HistoryItem[];
+}

app/components/sections/History/History.view.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { memo } from "react";
+import type { HistoryAccent, HistoryItem, HistoryViewProps } from "./History.types";
+
+const ACCENT_CLASS: Record<HistoryAccent, string> = {
+  brand: "bg-[var(--color-content-default-brand-primary)]",
+  positive: "bg-[var(--color-surface-default-positive-primary)]",
+};
+
+const DATE_CLASS =
+  "font-bricolage-grotesque text-display-xxs text-[var(--color-content-default-primary)]";
+
+const BODY_CLASS =
+  "font-inter text-paragraph-m text-[var(--color-content-default-secondary)]";
+
+function DateMark({ date, accent }: { date: string; accent: HistoryAccent }) {
+  return (
+    <div className="flex w-full flex-col gap-1 md:w-[140px] md:shrink-0">
+      <p className={`${DATE_CLASS} whitespace-nowrap`}>{date}</p>
+      <span className={`h-0.5 w-8 ${ACCENT_CLASS[accent]}`} aria-hidden />
+    </div>
+  );
+}
+
+function HistoryItemView({ item }: { item: HistoryItem }) {
+  if (item.kind === "callout") {
+    return (
+      <aside className="flex flex-col gap-5 border-l-[3px] border-[var(--color-content-default-brand-primary)] pl-6">
+        <p className={DATE_CLASS}>{item.title}</p>
+        <p className={BODY_CLASS}>{item.body}</p>
+      </aside>
+    );
+  }
+
+  return (
+    <div
+      className={`flex flex-col gap-4 md:flex-row md:gap-8 ${
+        item.accent === "positive" ? "pt-6" : ""
+      }`}
+    >
+      <DateMark date={item.date} accent={item.accent} />
+      <p className={`min-w-0 flex-1 ${BODY_CLASS}`}>
+        {item.body.map((run, index) =>
+          run.emphasis ? (
+            <em key={index} className="italic">
+              {run.text}
+            </em>
+          ) : (
+            <span key={index}>{run.text}</span>
+          ),
+        )}
+      </p>
+    </div>
+  );
+}
+
+function HistoryView({ heading, items }: HistoryViewProps) {
+  return (
+    <section
+      data-figma-node="24220:30635"
+      className="flex flex-col items-center gap-10 bg-black px-[var(--space-400)] py-12 md:gap-16 md:px-[var(--space-1800)] md:py-[88px]"
+      aria-labelledby="about-history-heading"
+    >
+      <h2
+        id="about-history-heading"
+        className="w-full max-w-[800px] text-center font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
+      >
+        {heading}
+      </h2>
+      <div className="flex w-full max-w-[800px] flex-col gap-8 md:gap-10">
+        {items.map((item, index) => (
+          <HistoryItemView key={item.kind === "entry" ? item.date : index} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+HistoryView.displayName = "HistoryView";
+
+export default memo(HistoryView);

app/components/sections/History/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./History.container";
+export type { HistoryItem, HistoryViewProps } from "./History.types";