Add code splitting

app/blog/[slug]/page.tsx

@@ -1,15 +1,26 @@
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import dynamic from "next/dynamic";
 import {
   getBlogPostBySlug,
   getAllBlogPosts as getAllPosts,
   type BlogPost,
 } from "../../../lib/content";
 import ContentBanner from "../../components/ContentBanner";
-import RelatedArticles from "../../components/RelatedArticles";
 import AskOrganizer from "../../components/AskOrganizer";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
+// Code split RelatedArticles - blog-specific, below the fold
+const RelatedArticles = dynamic(
+  () => import("../../components/RelatedArticles"),
+  {
+    loading: () => (
+      <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
+    ),
+    ssr: true,
+  },
+);
+
 // AskOrganizer data - same as index page
 const askOrganizerData = {
   title: "Still have questions?",

app/layout.tsx

@@ -1,10 +1,18 @@
 import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import dynamic from "next/dynamic";
 import "./globals.css";
-import Footer from "./components/Footer";
 import ConditionalHeader from "./components/ConditionalHeader";
 
+// Code split Footer - below the fold, can be lazy loaded
+const Footer = dynamic(() => import("./components/Footer"), {
+  loading: () => (
+    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
+  ),
+  ssr: true, // Keep SSR for SEO
+});
+
 const inter = Inter({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700"],

app/page.tsx

@@ -1,11 +1,43 @@
-import NumberedCards from "./components/NumberedCards";
+import dynamic from "next/dynamic";
 import HeroBanner from "./components/HeroBanner";
-import LogoWall from "./components/LogoWall";
-import RuleStack from "./components/RuleStack";
-import QuoteBlock from "./components/QuoteBlock";
-import FeatureGrid from "./components/FeatureGrid";
 import AskOrganizer from "./components/AskOrganizer";
 
+// Code split below-the-fold components to reduce initial bundle size
+const LogoWall = dynamic(() => import("./components/LogoWall"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[200px]" />
+  ),
+  ssr: true,
+});
+
+const NumberedCards = dynamic(() => import("./components/NumberedCards"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
+  ),
+  ssr: true,
+});
+
+const RuleStack = dynamic(() => import("./components/RuleStack"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
+  ),
+  ssr: true,
+});
+
+const FeatureGrid = dynamic(() => import("./components/FeatureGrid"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[500px]" />
+  ),
+  ssr: true,
+});
+
+const QuoteBlock = dynamic(() => import("./components/QuoteBlock"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
+  ),
+  ssr: true,
+});
+
 export default function Page() {
   const heroBannerData = {
     title: "Collaborate",