From 77fcbce9ea2fa6c8862018a7ea75d73421d45f53 Mon Sep 17 00:00:00 2001
From: johnny1093 <46250921+jsmorabito@users.noreply.github.com>
Date: Fri, 9 Oct 2026 17:05:28 -0400
Subject: [PATCH] ENG-2380 Extract shared section header and align Foundations
 section width on landing page

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/website/app/(home)/page.tsx              | 29 +----------------
 .../app/components/FoundationsSection.tsx     | 10 +++---
 apps/website/app/components/SectionHeader.tsx | 31 +++++++++++++++++++
 3 files changed, 38 insertions(+), 32 deletions(-)
 create mode 100644 apps/website/app/components/SectionHeader.tsx

diff --git a/apps/website/app/(home)/page.tsx b/apps/website/app/(home)/page.tsx
index d48b0aa88..68a6e7fd7 100644
--- a/apps/website/app/(home)/page.tsx
+++ b/apps/website/app/(home)/page.tsx
@@ -18,6 +18,7 @@ import { getAllBlogs } from "~/(home)/blog/readBlogs";
 import { FoundationsSection } from "~/components/FoundationsSection";
 import { Logo } from "~/components/Logo";
 import { PlatformBadge } from "~/components/PlatformBadge";
+import { SectionHeader } from "~/components/SectionHeader";
 import { TeamPerson } from "~/components/TeamPerson";
 import { TEAM_MEMBERS } from "~/data/constants";
 import { STATIC_NEWS_ITEMS } from "~/data/news";
@@ -201,34 +202,6 @@ const SUPPORTERS: Supporter[] = [
   },
 ];
 
-type SectionHeaderProps = {
-  description?: string;
-  eyebrow: string;
-  isWide?: boolean;
-  title: string;
-};
-
-const SectionHeader = ({
-  description,
-  eyebrow,
-  isWide = false,
-  title,
-}: SectionHeaderProps): ReactElement => (
-  <div className={isWide ? "max-w-none md:flex-1" : "max-w-3xl"}>
-    <p className="text-sm font-semibold uppercase tracking-[0.18em] text-secondary">
-      {eyebrow}
-    </p>
-    <h2 className="mt-3 text-3xl font-semibold tracking-tight text-primary sm:text-4xl">
-      {title}
-    </h2>
-    {description && (
-      <p className="mt-4 text-lg leading-8 text-neutral-dark/75">
-        {description}
-      </p>
-    )}
-  </div>
-);
-
 const ArrowLink = ({
   children,
   href,
diff --git a/apps/website/app/components/FoundationsSection.tsx b/apps/website/app/components/FoundationsSection.tsx
index cfb174e49..4155efe42 100644
--- a/apps/website/app/components/FoundationsSection.tsx
+++ b/apps/website/app/components/FoundationsSection.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import Image from "next/image";
 import { ScaledStage } from "~/components/ScaledStage";
+import { SectionHeader } from "~/components/SectionHeader";
 
 // Card size in the Figma frame; positions below use these coordinates.
 const CARD_WIDTH = 570;
@@ -504,10 +505,11 @@ const ProtocolCard = (): ReactElement => (
 
 export const FoundationsSection = (): ReactElement => (
   <section className="bg-white px-5 pb-8 pt-16 sm:px-6 lg:pb-12 lg:pt-24">
-    <div id="foundations" className="mx-auto max-w-6xl scroll-mt-20">
-      <h2 className="text-3xl font-semibold tracking-tight text-primary sm:text-4xl">
-        Foundations
-      </h2>
+    <div id="foundations" className="mx-auto max-w-7xl scroll-mt-20">
+      <SectionHeader
+        eyebrow="Foundations"
+        title="A shared structure for research work in motion"
+      />
       <div className="mt-10 grid gap-8 md:grid-cols-2">
         <NodesCard />
         <RelationsCard />
diff --git a/apps/website/app/components/SectionHeader.tsx b/apps/website/app/components/SectionHeader.tsx
new file mode 100644
index 000000000..c9831eb66
--- /dev/null
+++ b/apps/website/app/components/SectionHeader.tsx
@@ -0,0 +1,31 @@
+import type { ReactElement } from "react";
+
+type SectionHeaderProps = {
+  description?: string;
+  eyebrow?: string;
+  isWide?: boolean;
+  title: string;
+};
+
+export const SectionHeader = ({
+  description,
+  eyebrow,
+  isWide = false,
+  title,
+}: SectionHeaderProps): ReactElement => (
+  <div className={isWide ? "max-w-none md:flex-1" : "max-w-3xl"}>
+    {eyebrow && (
+      <p className="mb-3 text-sm font-semibold uppercase tracking-[0.18em] text-secondary">
+        {eyebrow}
+      </p>
+    )}
+    <h2 className="text-3xl font-semibold tracking-tight text-primary sm:text-4xl">
+      {title}
+    </h2>
+    {description && (
+      <p className="mt-4 text-lg leading-8 text-neutral-dark/75">
+        {description}
+      </p>
+    )}
+  </div>
+);