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

@@ -0,0 +1,18 @@
+"use client";
+
+/**
+ * Figma: "Section / Credits" (24240:1547)
+ */
+
+import { memo } from "react";
+import { useMessages } from "../../../contexts/MessagesContext";
+import CreditsView from "./Credits.view";
+
+const CreditsContainer = memo(() => {
+  const copy = useMessages().pages.about.credits;
+  return <CreditsView heading={copy.heading} rows={copy.rows} />;
+});
+
+CreditsContainer.displayName = "Credits";
+
+export default CreditsContainer;

app/components/sections/Credits/Credits.types.ts

@@ -0,0 +1,9 @@
+export type CreditRow = {
+  role: string;
+  name: string;
+};
+
+export interface CreditsViewProps {
+  heading: string;
+  rows: CreditRow[];
+}

app/components/sections/Credits/Credits.view.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { memo } from "react";
+import type { CreditsViewProps } from "./Credits.types";
+
+function CreditsView({ heading, rows }: CreditsViewProps) {
+  return (
+    <section
+      data-figma-node="24240:1547"
+      className="flex flex-col items-center bg-black px-[var(--space-400)] py-16 md:px-16 lg:px-20 lg:py-[var(--space-3000)]"
+      aria-labelledby="about-credits-heading"
+    >
+      <div className="flex w-full max-w-[800px] flex-col items-center gap-12">
+        <h2
+          id="about-credits-heading"
+          className="text-center font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
+        >
+          {heading}
+        </h2>
+        <dl className="m-0 flex w-full flex-col gap-5">
+          {rows.map((row) => (
+            <div
+              key={row.role}
+              className="flex flex-col gap-1 border-b border-[var(--color-border-default-tertiary)] pb-4"
+            >
+              <dt className="font-inter text-label-caps-xxs text-[var(--color-content-default-tertiary)] uppercase">
+                {row.role}
+              </dt>
+              <dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-primary)]">
+                {row.name}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+}
+
+CreditsView.displayName = "CreditsView";
+
+export default memo(CreditsView);

app/components/sections/Credits/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Credits.container";
+export type { CreditRow, CreditsViewProps } from "./Credits.types";