diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 6fd96aa..ff0bf0e 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -114,6 +114,34 @@ jobs:
       - name: Run cargo test
         run: cargo test --all-targets --no-fail-fast
 
+  wasm-test:
+    name: wasm-pack test (headless Firefox)
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install nightly Rust
+        uses: dtolnay/rust-toolchain@nightly
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: Cache cargo registry and target
+        uses: Swatinem/rust-cache@v2
+        with:
+          key: wasm-test
+
+      - name: Install wasm-pack
+        # wasm-pack ships pre-built binaries; the official installer is the
+        # fastest path on Linux runners (cargo install would compile from
+        # source for several minutes).
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Run browser tests
+        # ubuntu-latest already ships Firefox; geckodriver is auto-fetched
+        # by wasm-pack in a version that matches the installed browser.
+        run: wasm-pack test --headless --firefox --test wasm
+
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 15
diff --git a/Cargo.lock b/Cargo.lock
index 95994bb..6dbab66 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -116,6 +116,16 @@ version = "1.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b96ec4966b5813e2c0507c1f86115c8c5abaadc3980879c3424042a02fd1ad3"
 
+[[package]]
+name = "cc"
+version = "1.2.62"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1dce859f0832a7d088c4f1119888ab94ef4b5d6795d1ce05afb7fe159d79f98"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
 [[package]]
 name = "cfg-if"
 version = "1.0.0"
@@ -318,6 +328,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -950,6 +966,16 @@ version = "2.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "78ca9ab1a0babb1e7d5695e3530886289c18cf2f87ec19a575a0abdce112e3a3"
 
+[[package]]
+name = "minicov"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4869b6a491569605d66d3952bcdf03df789e5b536e5f0cf7758a7f08a55ae24d"
+dependencies = [
+ "cc",
+ "walkdir",
+]
+
 [[package]]
 name = "next_tuple"
 version = "0.1.0"
@@ -981,11 +1007,14 @@ name = "odp"
 version = "0.1.0"
 dependencies = [
  "console_error_panic_hook",
+ "js-sys",
  "leptos",
  "leptos_meta",
  "leptos_router",
  "serde_json",
  "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test",
  "web-sys",
 ]
 
@@ -1449,6 +1478,12 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
 [[package]]
 name = "slab"
 version = "0.4.9"
@@ -1810,6 +1845,30 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "wasm-bindgen-test"
+version = "0.3.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "66c8d5e33ca3b6d9fa3b4676d774c5778031d27a578c2b007f905acf816152c3"
+dependencies = [
+ "js-sys",
+ "minicov",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-test-macro"
+version = "0.3.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17d5042cc5fa009658f9a7333ef24291b1291a25b6382dd68862a7f3b969f69b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "wasm-streams"
 version = "0.4.2"
diff --git a/Cargo.toml b/Cargo.toml
index 59b4cd9..842e6b3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,7 +12,13 @@ wasm-bindgen = "0.2.100"
 web-sys = { version = "0.3.77", features = ["Document", "Window", "console"] }
 
 [dev-dependencies]
+js-sys = "0.3"
 serde_json = "1"
+wasm-bindgen-futures = "0.4"
+wasm-bindgen-test = "0.3"
 
 [package.metadata.leptos]
-assets-dir="public"
\ No newline at end of file
+assets-dir="public"
+
+[profile.release]
+strip = true
diff --git a/index.html b/index.html
index 61562ff..6fd059e 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,20 @@
     <script defer src="https://d3js.org/d3.v7.min.js"></script>
     <script defer src="/repo_graph.js"></script>
 
-    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
+    <!--
+      `data-wasm-opt-params` forwards extra flags to wasm-opt. The bundled
+      wasm-opt v123 has bulk-memory disabled by default, but rustc 1.82+
+      emits `memory.copy` instructions, which fail validation. The two
+      `--enable-*` flags below match the features the rustc target enables.
+    -->
+    <link
+      data-trunk
+      rel="rust"
+      data-wasm-opt="z"
+      data-wasm-opt-params="--enable-bulk-memory --enable-nontrapping-float-to-int"
+      data-keep-debug="false"
+      data-weak-refs
+    />
     <link rel="icon" href="images/odpicon.ico" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;600&display=swap" rel="stylesheet">
   </head>
diff --git a/src/components/documentation_training.rs b/src/components/documentation_training.rs
index 75fa660..5a02001 100644
--- a/src/components/documentation_training.rs
+++ b/src/components/documentation_training.rs
@@ -1,7 +1,5 @@
-use crate::components::themed_icon::ThemedIcon;
-use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use crate::components::ui::{DocLinkItem, Heading, HeadingLevel, IconBlock, IconBlockSize, Text, TextSize};
 use leptos::prelude::*;
-use leptos_router::components::A;
 
 #[derive(Clone)]
 pub struct DocLink {
@@ -46,12 +44,7 @@ pub const DEFAULT_DOC_LINKS: &[DocLink] = &[
 pub fn DocumentationTraining(#[prop(default = DEFAULT_DOC_LINKS.to_vec())] links: Vec<DocLink>) -> impl IntoView {
     view! {
         <section class="flex flex-col md:flex-row items-start background_primary w-full overflow-x-hidden px-4 py-8 md:py-16 md:px-16 lg:px-32">
-            <div class="flex flex-col items-start w-full">
-                <ThemedIcon
-                    name="documentation"
-                    alt="Documentation Icon"
-                    class="w-[80px] h-[80px] md:w-[150px] md:h-[150px] object-contain mb-4 block"
-                />
+            <IconBlock name="documentation" alt="Documentation Icon" size=IconBlockSize::Hero>
                 <Heading level=HeadingLevel::H2 class="text-left break-words">
                     "Documentation"
                 </Heading>
@@ -59,35 +52,14 @@ pub fn DocumentationTraining(#[prop(default = DEFAULT_DOC_LINKS.to_vec())] links
                 <Text size=TextSize::Lead class="text-left break-words">
                     "Start developing with ODP"
                 </Text>
-            </div>
+            </IconBlock>
             <div class="hidden md:block w-[200px]"></div>
             <ul class="flex flex-col pt-4 w-full max-w-full break-words md:pt-4 md:w-[760px] md:max-w-[760px]">
                 {links
                     .into_iter()
                     .map(|link| {
                         view! {
-                            <li>
-                                <Show
-                                    when=move || link.external
-                                    fallback=move || {
-                                        view! {
-                                            <div class="link_mobile md:link_large internal-link no-underline">
-                                                <A href=link.href>
-                                                    <span class="no-underline">{"→ "}</span>
-                                                    <span class="underline">{link.title}</span>
-                                                </A>
-                                            </div>
-                                        }
-                                    }
-                                >
-                                    <div class="link_mobile md:link_large external-link no-underline">
-                                        <a href=link.href target="_blank" class="no-underline">
-                                            <span class="no-underline">{"→ "}</span>
-                                            <span class="underline">{link.title}</span>
-                                        </a>
-                                    </div>
-                                </Show>
-                            </li>
+                            <DocLinkItem href=link.href title=link.title external=link.external />
                         }
                     })
                     .collect_view()}
diff --git a/src/components/landing/closing_columns_section.rs b/src/components/landing/closing_columns_section.rs
new file mode 100644
index 0000000..9be48fa
--- /dev/null
+++ b/src/components/landing/closing_columns_section.rs
@@ -0,0 +1,32 @@
+//! Landing page section: closing two-column "Partner-Oriented Vision"
+//! / "Get Involved!" block.
+
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn ClosingColumnsSection() -> impl IntoView {
+    view! {
+        <Section class="py-20">
+            <div class="flex flex-col md:flex-row gap-16">
+                <div class="flex flex-col items-start flex-1">
+                    <Heading level=HeadingLevel::H3 class="text-left">
+                        {"Partner-Oriented Vision"}
+                    </Heading>
+                    <Text size=TextSize::Large class="text-left">
+                        {"ODP is an inclusive partnership open to OEMs, ODMs, silicon vendors, hardware developers, security researchers, and anyone committed to improving device software foundations."}
+                    </Text>
+                </div>
+                <div class="flex flex-col items-start flex-1">
+                    <Heading level=HeadingLevel::H3 class="text-left">
+                        {"Get Involved!"}
+                    </Heading>
+                    <Text size=TextSize::Large class="text-left">
+                        {"Explore our documentation, clone our public repositories, and contribute your expertise. Together, we can raise the standard for trusted devices."}
+                    </Text>
+                </div>
+            </div>
+        </Section>
+    }
+}
diff --git a/src/components/landing/hero_section.rs b/src/components/landing/hero_section.rs
new file mode 100644
index 0000000..cbee3bb
--- /dev/null
+++ b/src/components/landing/hero_section.rs
@@ -0,0 +1,28 @@
+//! Landing page section: hero introduction.
+
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn HeroSection() -> impl IntoView {
+    view! {
+        <Section>
+            <div class="flex flex-col md:flex-row gap-20 items-start">
+                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
+                    <Heading level=HeadingLevel::H1 class="break-words w-full text-left">
+                        {"An Open Collaboration for Secure, Modern Devices"}
+                    </Heading>
+                </div>
+                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
+                    <Text size=TextSize::Lead class="break-words w-full text-left">
+                        {"The Open Device Partnership (ODP) is a global initiative to make it easier for developers and device makers to build secure, efficient, and reliable client devices for cross-platform needs and certified environments."}
+                        <br />
+                        <br />
+                        {"By combining open standards with collaborative development practices, ODP reduces complexity, improves security, and accelerates innovation across diverse silicon and hardware platforms."}
+                    </Text>
+                </div>
+            </div>
+        </Section>
+    }
+}
diff --git a/src/components/landing/mod.rs b/src/components/landing/mod.rs
new file mode 100644
index 0000000..8604f93
--- /dev/null
+++ b/src/components/landing/mod.rs
@@ -0,0 +1,16 @@
+//! Per-section components for the landing page (`/`).
+//!
+//! [`crate::components::landing_page::LandingPage`] composes these
+//! sections in order. Each lives in its own file so the landing
+//! shell stays a flat, readable list of `<...Section />` calls
+//! instead of a 100-line view block.
+
+mod closing_columns_section;
+mod hero_section;
+mod projects_section;
+mod value_proposition_section;
+
+pub use closing_columns_section::ClosingColumnsSection;
+pub use hero_section::HeroSection;
+pub use projects_section::ProjectsSection;
+pub use value_proposition_section::ValuePropositionSection;
diff --git a/src/components/landing/projects_section.rs b/src/components/landing/projects_section.rs
new file mode 100644
index 0000000..67c48b4
--- /dev/null
+++ b/src/components/landing/projects_section.rs
@@ -0,0 +1,44 @@
+//! Landing page section: "ODP Projects" intro paragraph + the three
+//! project image-button tiles.
+
+use crate::components::image_button::ImageButton;
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn ProjectsSection() -> impl IntoView {
+    view! {
+        <Section class="py-32">
+            <div style="max-width: 960px;">
+                <Heading level=HeadingLevel::H2 class="text-left">
+                    {"ODP Projects"}
+                </Heading>
+                <Text size=TextSize::Large class="text-left max-w-full">
+                    {"While ODP's first projects focus on boot firmware and embedded controller software, the partnership welcomes new ideas aligned with our core goals: security, efficiency, and broad reusability."}
+                    <br />
+                    <br />
+                </Text>
+            </div>
+        </Section>
+        <Section class="pb-32">
+            <div class="flex flex-col md:flex-row gap-16 justify-start">
+                <ImageButton
+                    href="/boot-firmware"
+                    img_src="/images/patina.png"
+                    alt="Boot Firmware"
+                />
+                <ImageButton
+                    href="/embedded-controller"
+                    img_src="/images/ec.png"
+                    alt="Embedded Controller"
+                />
+                <ImageButton
+                    href="/windows-ec-services"
+                    img_src="/images/ec_services.png"
+                    alt="EC Services"
+                />
+            </div>
+        </Section>
+    }
+}
diff --git a/src/components/landing/value_proposition_section.rs b/src/components/landing/value_proposition_section.rs
new file mode 100644
index 0000000..8473b4b
--- /dev/null
+++ b/src/components/landing/value_proposition_section.rs
@@ -0,0 +1,38 @@
+//! Landing page section: "Value Proposition" -- three icon cards.
+
+use crate::components::section::{Section, Surface};
+use crate::components::ui::{Heading, HeadingLevel, ValuePropCard};
+use leptos::prelude::*;
+
+#[component]
+pub fn ValuePropositionSection() -> impl IntoView {
+    view! {
+        <Section surface=Surface::Secondary class="py-20">
+            <div>
+                <Heading level=HeadingLevel::H2 class="text-left">
+                    {"Value Proposition"}
+                </Heading>
+                <div class="flex flex-col md:flex-row gap-16">
+                    <ValuePropCard
+                        icon="lock"
+                        icon_alt="Security Icon"
+                        title="Enhanced Security"
+                        body="Security threats continue to evolve. ODP takes a proactive approach: reducing attack surfaces, using secure hardware features, leveraging the memory-safe Rust language, and designing every component with security-first principles."
+                    />
+                    <ValuePropCard
+                        icon="checkcircle"
+                        icon_alt="Interoperability Icon"
+                        title="Standardization"
+                        body="Many device firmware components are 'invisible plumbing' - necessary but costly to build and maintain. ODP's standards-based approach simplifies this infrastructure, maximizing reuse across devices, architectures (x86 and ARM), and generations."
+                    />
+                    <ValuePropCard
+                        icon="fastforward"
+                        icon_alt="Innovation Icon"
+                        title="Accelerated Development"
+                        body="Open collaboration means sharing solutions, reducing duplicated work, and speeding up the development of high-quality products."
+                    />
+                </div>
+            </div>
+        </Section>
+    }
+}
diff --git a/src/components/landing_page.rs b/src/components/landing_page.rs
index 36b7127..e2a7f97 100644
--- a/src/components/landing_page.rs
+++ b/src/components/landing_page.rs
@@ -1,121 +1,17 @@
-use crate::components::image_button::ImageButton;
-use crate::components::section::{Section, Surface};
-use crate::components::themed_icon::ThemedIcon;
-use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+//! Landing page (`/`) shell.
+//!
+//! The page is a flat sequence of section components. Each section
+//! lives in its own file under [`crate::components::landing`].
+
+use crate::components::landing::{ClosingColumnsSection, HeroSection, ProjectsSection, ValuePropositionSection};
 use leptos::prelude::*;
 
 #[component]
 pub fn LandingPage() -> impl IntoView {
     view! {
-        <Section>
-            <div class="flex flex-col md:flex-row gap-20 items-start">
-                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
-                    <Heading level=HeadingLevel::H1 class="break-words w-full text-left">
-                        {"An Open Collaboration for Secure, Modern Devices"}
-                    </Heading>
-                </div>
-                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
-                    <Text size=TextSize::Lead class="break-words w-full text-left">
-                        {"The Open Device Partnership (ODP) is a global initiative to make it easier for developers and device makers to build secure, efficient, and reliable client devices for cross-platform needs and certified environments."}
-                        <br />
-                        <br />
-                        {"By combining open standards with collaborative development practices, ODP reduces complexity, improves security, and accelerates innovation across diverse silicon and hardware platforms."}
-                    </Text>
-                </div>
-            </div>
-        </Section>
-        <Section surface=Surface::Secondary class="py-20">
-            <div>
-                <Heading level=HeadingLevel::H2 class="text-left">
-                    {"Value Proposition"}
-                </Heading>
-                <div class="flex flex-col md:flex-row gap-16">
-                    <div class="flex flex-col items-start w-full md:flex-1">
-                        <ThemedIcon name="lock" alt="Security Icon" class="icon" />
-                        <Heading level=HeadingLevel::H3 class="break-words w-full text-left">
-                            {"Enhanced Security"}
-                        </Heading>
-                        <Text size=TextSize::Large class="break-words w-full text-left">
-                            {"Security threats continue to evolve. ODP takes a proactive approach: reducing attack surfaces, using secure hardware features, leveraging the memory-safe Rust language, and designing every component with security-first principles."}
-                        </Text>
-                    </div>
-                    <div class="flex flex-col items-start w-full md:flex-1">
-                        <ThemedIcon name="checkcircle" alt="Interoperability Icon" class="icon" />
-                        <Heading level=HeadingLevel::H3 class="break-words w-full text-left">
-                            {"Standardization"}
-                        </Heading>
-                        <Text size=TextSize::Large class="break-words w-full text-left">
-                            {"Many device firmware components are 'invisible plumbing' - necessary but costly to build and maintain. ODP's standards-based approach simplifies this infrastructure, maximizing reuse across devices, architectures (x86 and ARM), and generations."}
-                        </Text>
-                    </div>
-                    <div class="flex flex-col items-start w-full md:flex-1">
-                        <ThemedIcon name="fastforward" alt="Innovation Icon" class="icon" />
-                        <Heading level=HeadingLevel::H3 class="break-words w-full text-left">
-                            {"Accelerated Development"}
-                        </Heading>
-                        <Text size=TextSize::Large class="break-words w-full text-left">
-                            {"Open collaboration means sharing solutions, reducing duplicated work, and speeding up the development of high-quality products."}
-                        </Text>
-                    </div>
-                </div>
-            </div>
-        </Section>
-
-        // ODP Projects Section
-        <Section class="py-32">
-            <div style="max-width: 960px;">
-                <Heading level=HeadingLevel::H2 class="text-left">
-                    {"ODP Projects"}
-                </Heading>
-                <Text size=TextSize::Large class="text-left max-w-full">
-                    {"While ODP's first projects focus on boot firmware and embedded controller software, the partnership welcomes new ideas aligned with our core goals: security, efficiency, and broad reusability."}
-                    <br />
-                    <br />
-                </Text>
-            </div>
-        </Section>
-
-        // Boot Firmware Buttons Section
-        <Section class="pb-32">
-            <div class="flex flex-col md:flex-row gap-16 justify-start">
-                <ImageButton
-                    href="/boot-firmware"
-                    img_src="/images/patina.png"
-                    alt="Boot Firmware"
-                />
-                <ImageButton
-                    href="/embedded-controller"
-                    img_src="/images/ec.png"
-                    alt="Embedded Controller"
-                />
-                <ImageButton
-                    href="/windows-ec-services"
-                    img_src="/images/ec_services.png"
-                    alt="EC Services"
-                />
-            </div>
-        </Section>
-
-        // Two Columns Section
-        <Section class="py-20">
-            <div class="flex flex-col md:flex-row gap-16">
-                <div class="flex flex-col items-start flex-1">
-                    <Heading level=HeadingLevel::H3 class="text-left">
-                        {"Partner-Oriented Vision"}
-                    </Heading>
-                    <Text size=TextSize::Large class="text-left">
-                        {"ODP is an inclusive partnership open to OEMs, ODMs, silicon vendors, hardware developers, security researchers, and anyone committed to improving device software foundations."}
-                    </Text>
-                </div>
-                <div class="flex flex-col items-start flex-1">
-                    <Heading level=HeadingLevel::H3 class="text-left">
-                        {"Get Involved!"}
-                    </Heading>
-                    <Text size=TextSize::Large class="text-left">
-                        {"Explore our documentation, clone our public repositories, and contribute your expertise. Together, we can raise the standard for trusted devices."}
-                    </Text>
-                </div>
-            </div>
-        </Section>
+        <HeroSection />
+        <ValuePropositionSection />
+        <ProjectsSection />
+        <ClosingColumnsSection />
     }
 }
diff --git a/src/components/main.rs b/src/components/main.rs
index 1ec9a3f..a00f1de 100644
--- a/src/components/main.rs
+++ b/src/components/main.rs
@@ -1,13 +1,13 @@
 use crate::components::themed_icon::ThemedIcon;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
 use leptos::prelude::*;
-use leptos_router::components::A;
 
 #[component]
 pub fn Main() -> impl IntoView {
     view! {
         <main class="background_primary">
-            <div class="mx-auto flex flex-col lg:flex-row items-start justify-between w-full px-2 sm:px-4">
-                <div class="pl-0 lg:pl-32 flex flex-col gap-6 w-full lg:w-auto">
+            <div class="mx-auto flex flex-col items-start w-full px-2 sm:px-4">
+                <div class="pl-0 lg:pl-32 flex flex-col gap-6 w-full">
                     <h1 class="h1 py-4 w-full max-w-full text-left break-words">
                         "Building the Future of Trusted System Software Together"
                     </h1>
@@ -15,32 +15,6 @@ pub fn Main() -> impl IntoView {
                         "Leading technology partners creating secure, reusable, and reliable firmware for modern client devices."
                     </p>
                 </div>
-
-                <div class="flex flex-col w-full lg:w-auto mt-4 lg:mt-0">
-                    <div
-                        style="border: none; text-decoration: none;"
-                        class="flex background_secondary w-full lg:w-[478px] h-[120px] lg:h-[176px] items-center justify-center px-4 lg:px-16"
-                    >
-                        <A href="/getting-started">
-                            <div class="flex flex-row items-center justify-center gap-4 w-full max-w-full">
-                                <span class="h3">"Getting started"</span>
-                                <span class="h3">"→"</span>
-                            </div>
-                        </A>
-                    </div>
-
-                    <div
-                        style="border: none; text-decoration: none;"
-                        class="flex background_tertiary w-full lg:w-[478px] h-[120px] lg:h-[176px] items-center justify-center px-4 lg:px-16"
-                    >
-                        <A href="/projects">
-                            <div class="flex flex-row items-center justify-center gap-4 w-full max-w-full">
-                                <span class="h3">"Projects"</span>
-                                <span class="h3">"→"</span>
-                            </div>
-                        </A>
-                    </div>
-                </div>
             </div>
 
             <div class="flex flex-col pt-10 px-2 sm:px-4 md:pl-[117px] w-full">
@@ -49,30 +23,22 @@ pub fn Main() -> impl IntoView {
                         <ThemedIcon
                             name="video"
                             alt="Video Icon"
-                            style="
-                            width: 150px;
-                            height: 150px;
-                            padding: 0;
-                            object-fit: contain;
-                            display: block;
-                            margin-bottom: 16px;
-                            "
+                            class="w-[150px] h-[150px] object-contain block mb-4"
                         />
-                        <span class="h2 block w-full max-w-full text-left break-words">
+                        <Heading
+                            level=HeadingLevel::H2
+                            class="w-full max-w-full text-left break-words"
+                        >
                             "Welcome"
-                        </span>
-                        <div style="height: 10px;"></div>
-                        <span class="p1 block w-full max-w-full text-left break-words">
+                        </Heading>
+                        <div class="h-2.5"></div>
+                        <Text size=TextSize::Lead class="w-full max-w-full text-left break-words">
                             "Learn how ODP projects help build secure, modern devices"
-                        </span>
+                        </Text>
                     </div>
-                    <div
-                        class="w-full lg:flex-[2] aspect-video rounded-lg overflow-hidden"
-                        style="max-width:100vw;"
-                    >
+                    <div class="w-full lg:flex-[2] aspect-video rounded-lg overflow-hidden max-w-screen">
                         <iframe
-                            class="w-full h-full"
-                            style="border-radius: 10px; display: block;"
+                            class="w-full h-full block rounded-[10px]"
                             src="https://www.youtube.com/embed/FMlPxYSY1LM?rel=0"
                             title="YouTube Video of the Open Device Partnership"
                             frameborder="0"
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 8eb6aef..8a53e3c 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -4,6 +4,7 @@ pub mod documentation_training;
 pub mod footer;
 pub mod header;
 pub mod image_button;
+pub mod landing;
 pub mod landing_page;
 pub mod main;
 pub mod partner;
diff --git a/src/components/project_introduction.rs b/src/components/project_introduction.rs
index 80747cf..038859d 100644
--- a/src/components/project_introduction.rs
+++ b/src/components/project_introduction.rs
@@ -1,5 +1,5 @@
 use crate::components::section::Section;
-use crate::components::ui::{Heading, HeadingLevel, Mono, Text, TextSize};
+use crate::components::ui::{Heading, HeadingLevel, LabeledSection, Text, TextSize};
 use leptos::prelude::*;
 use leptos_router::components::A;
 
@@ -44,16 +44,19 @@ pub fn ProjectIntroduction(
                     </div>
                 </div>
                 <div class="flex flex-col items-start px-2 md:px-0 w-full">
-                    <Mono class="text-left">{"WHAT"}</Mono>
-                    <p class="p2 text-left" inner_html=project_what></p>
-                    <Mono class="text-left">{"WHY"}</Mono>
-                    <Text size=TextSize::Large class="text-left">
-                        {project_why}
-                    </Text>
-                    <Mono class="text-left">{"WHO"}</Mono>
-                    <div class="link_mobile md:link block text-left">
-                        <A href=project_who>{"Learn more about the team →"}</A>
-                    </div>
+                    <LabeledSection label="WHAT">
+                        <p class="p2 text-left" inner_html=project_what></p>
+                    </LabeledSection>
+                    <LabeledSection label="WHY">
+                        <Text size=TextSize::Large class="text-left">
+                            {project_why}
+                        </Text>
+                    </LabeledSection>
+                    <LabeledSection label="WHO">
+                        <div class="link_mobile md:link block text-left">
+                            <A href=project_who>{"Learn more about the team →"}</A>
+                        </div>
+                    </LabeledSection>
                 </div>
             </div>
         </Section>
diff --git a/src/components/projects_component.rs b/src/components/projects_component.rs
index ea6fe3e..da6884c 100644
--- a/src/components/projects_component.rs
+++ b/src/components/projects_component.rs
@@ -1,33 +1,39 @@
 use crate::components::image_button::ImageButton;
-use crate::components::section::Section;
-use crate::components::ui::{Heading, HeadingLevel, Mono, Text, TextSize};
+use crate::components::ui::{
+    ArrowLink, Heading, HeadingLevel, LabeledSection, Section, Text, TextSize, TwoColumnIntro,
+};
 use leptos::prelude::*;
 
 #[component]
 pub fn ProjectsComponent() -> impl IntoView {
     view! {
-        <Section class="py-8 md:py-20 lg:py-32">
-            <div class="flex flex-col md:flex-row gap-10 md:gap-20">
-                <div class="flex flex-col items-start w-full md:flex-1">
+        <TwoColumnIntro
+            section_class="py-8 md:py-20 lg:py-32"
+            left=|| {
+                view! {
                     <Heading level=HeadingLevel::H1 class="text-left">
                         {"System Firmware Domains"}
                     </Heading>
                     <Heading level=HeadingLevel::H2 class="text-left">
                         {"Reusable foundations for secure, high-quality device platforms"}
                     </Heading>
-                </div>
-                <div class="flex flex-col items-start w-full md:flex-1 mt-8 md:mt-0">
-                    <Mono class="text-left">{"WHAT"}</Mono>
-                    <Text size=TextSize::Lead class="text-left">
-                        {"ODP supports development across three core areas of system firmware. Each domain is designed for modularity, security, and long-term reuse across hardware platforms."}
-                    </Text>
-                    <Mono class="text-left">{"WHY"}</Mono>
-                    <Text size=TextSize::Lead class="text-left">
-                        {"Modern computing devices need modern solutions that prioritize memory safety and security from the language on up."}
-                    </Text>
-                </div>
-            </div>
-        </Section>
+                }
+            }
+            right=|| {
+                view! {
+                    <LabeledSection label="WHAT">
+                        <Text size=TextSize::Lead class="text-left">
+                            {"ODP supports development across three core areas of system firmware. Each domain is designed for modularity, security, and long-term reuse across hardware platforms."}
+                        </Text>
+                    </LabeledSection>
+                    <LabeledSection label="WHY">
+                        <Text size=TextSize::Lead class="text-left">
+                            {"Modern computing devices need modern solutions that prioritize memory safety and security from the language on up."}
+                        </Text>
+                    </LabeledSection>
+                }
+            }
+        />
 
         // Projects Details Section
         <Section class="py-8 md:py-20 lg:py-32">
@@ -114,10 +120,5 @@ fn ProjectRow(
 
 #[component]
 fn ProjectLink(href: &'static str, title: &'static str) -> impl IntoView {
-    view! {
-        <a href=href class="link no-underline">
-            <span class="no-underline">{"→ "}</span>
-            <span class="underline">{title}</span>
-        </a>
-    }
+    view! { <ArrowLink href=href title=title /> }
 }
diff --git a/src/components/ui/announcement_card.rs b/src/components/ui/announcement_card.rs
new file mode 100644
index 0000000..1b5e8d3
--- /dev/null
+++ b/src/components/ui/announcement_card.rs
@@ -0,0 +1,19 @@
+//! `<AnnouncementCard>` -- the styled detail panel that renders one
+//! selected announcement on the announcements page.
+//!
+//! Bakes in the responsive padding, the title typography, and the
+//! body wrapper. Callers pass a `title` string and arbitrary children
+//! (the rendered press-release content).
+
+use leptos::prelude::*;
+
+/// One announcement detail card.
+#[component]
+pub fn AnnouncementCard(#[prop(into)] title: String, children: Children) -> impl IntoView {
+    view! {
+        <div class="p_mobile md:p">
+            <div class="h2 pb-4 md:pb-6">{title}</div>
+            <div class="p2">{children()}</div>
+        </div>
+    }
+}
diff --git a/src/components/ui/arrow_link.rs b/src/components/ui/arrow_link.rs
new file mode 100644
index 0000000..67f872b
--- /dev/null
+++ b/src/components/ui/arrow_link.rs
@@ -0,0 +1,113 @@
+//! `<ArrowLink>` -- a brand link prefixed with a non-underlined "→ "
+//! glyph and a single underlined label.
+//!
+//! This molecule appears verbatim across the documentation list, the
+//! project rows, and the getting-started page. External vs. internal
+//! routing is auto-detected from the `href`: anything starting with
+//! `http://` or `https://` falls through to a plain `<a target="_blank">`,
+//! everything else uses `leptos_router::components::A` so client-side
+//! navigation is preserved.
+
+use leptos::prelude::*;
+use leptos_router::components::A;
+
+/// Visual size of the link, mirroring [`crate::components::ui::LinkSize`].
+#[derive(Clone, Copy, Default)]
+pub enum ArrowLinkSize {
+    /// `link_mobile md:link` -- the default body-link size.
+    #[default]
+    Standard,
+    /// `link_mobile md:link_large` -- the larger size used by the
+    /// documentation list.
+    Large,
+}
+
+impl ArrowLinkSize {
+    fn class(self) -> &'static str {
+        match self {
+            ArrowLinkSize::Standard => "link no-underline",
+            ArrowLinkSize::Large => "link_mobile md:link_large no-underline",
+        }
+    }
+}
+
+/// Brand "arrow + label" link. Detects external URLs from the `href`
+/// scheme; pass `external=true` to force the external branch when the
+/// auto-detection is wrong (e.g. protocol-relative URLs).
+#[component]
+pub fn ArrowLink(
+    href: &'static str,
+    title: &'static str,
+    #[prop(default = ArrowLinkSize::Standard)] size: ArrowLinkSize,
+    #[prop(optional)] external: Option<bool>,
+) -> impl IntoView {
+    let is_external = external.unwrap_or_else(|| is_external_href(href));
+    let class_external = wrapper_class(size, true);
+    let class_internal = wrapper_class(size, false);
+    view! {
+        <Show
+            when=move || is_external
+            fallback={
+                let class_internal = class_internal.clone();
+                move || {
+                    view! {
+                        <div class=class_internal.clone()>
+                            <A href=href>
+                                <span class="no-underline">{"→ "}</span>
+                                <span class="underline">{title}</span>
+                            </A>
+                        </div>
+                    }
+                }
+            }
+        >
+            <div class=class_external.clone()>
+                <a href=href target="_blank" rel="noopener noreferrer" class="no-underline">
+                    <span class="no-underline">{"→ "}</span>
+                    <span class="underline">{title}</span>
+                </a>
+            </div>
+        </Show>
+    }
+}
+
+fn wrapper_class(size: ArrowLinkSize, external: bool) -> String {
+    let kind = if external { "external-link" } else { "internal-link" };
+    match size {
+        ArrowLinkSize::Standard => format!("link {kind} no-underline"),
+        ArrowLinkSize::Large => format!("link_mobile md:link_large {kind} no-underline"),
+    }
+}
+
+fn is_external_href(href: &str) -> bool {
+    href.starts_with("http://") || href.starts_with("https://")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn external_detection() {
+        assert!(is_external_href("https://example.com"));
+        assert!(is_external_href("http://example.com"));
+        assert!(!is_external_href("/community"));
+        assert!(!is_external_href("#anchor"));
+    }
+
+    #[test]
+    fn wrapper_class_matches_legacy() {
+        assert_eq!(
+            wrapper_class(ArrowLinkSize::Large, true),
+            "link_mobile md:link_large external-link no-underline"
+        );
+        assert_eq!(
+            wrapper_class(ArrowLinkSize::Large, false),
+            "link_mobile md:link_large internal-link no-underline"
+        );
+        assert_eq!(
+            wrapper_class(ArrowLinkSize::Standard, true),
+            "link external-link no-underline"
+        );
+    }
+}
diff --git a/src/components/ui/doc_link_item.rs b/src/components/ui/doc_link_item.rs
new file mode 100644
index 0000000..c1dc021
--- /dev/null
+++ b/src/components/ui/doc_link_item.rs
@@ -0,0 +1,22 @@
+//! `<DocLinkItem>` -- one row of the "Documentation" footer list.
+//!
+//! Wraps an [`ArrowLink`] (size [`ArrowLinkSize::Large`]) inside a
+//! semantic `<li>`. Extracted so the documentation list (and any
+//! future "list of brand links" variant) doesn't have to reach into
+//! the wrapper-`<li>` + `<ArrowLink>` shape every time.
+
+use crate::components::ui::{ArrowLink, ArrowLinkSize};
+use leptos::prelude::*;
+
+/// One `<li>` containing a large arrow-link. `external` overrides
+/// the [`ArrowLink`] auto-detection (the documentation list mixes
+/// in-app routes with external URLs and tracks the distinction
+/// per-item in [`crate::components::documentation_training::DocLink`]).
+#[component]
+pub fn DocLinkItem(href: &'static str, title: &'static str, external: bool) -> impl IntoView {
+    view! {
+        <li>
+            <ArrowLink href=href title=title size=ArrowLinkSize::Large external=external />
+        </li>
+    }
+}
diff --git a/src/components/ui/icon_block.rs b/src/components/ui/icon_block.rs
new file mode 100644
index 0000000..46f77d9
--- /dev/null
+++ b/src/components/ui/icon_block.rs
@@ -0,0 +1,79 @@
+//! `<IconBlock>` -- the "icon stacked above content" molecule.
+//!
+//! Recurs across the landing page (value-prop cards), the
+//! documentation footer, and the team hero. A [`ThemedIcon`] sits at
+//! the top of a left-aligned column; the children render below it.
+//! Sizing of the icon is parameterised so callers can pick between
+//! the two house defaults.
+
+use crate::components::themed_icon::ThemedIcon;
+use leptos::prelude::*;
+
+/// Icon size preset.
+#[derive(Clone, Copy, Default)]
+pub enum IconBlockSize {
+    /// `.icon` -- the standard value-prop / community card size.
+    #[default]
+    Standard,
+    /// `w-[80px] h-[80px] md:w-[150px] md:h-[150px]` -- the larger
+    /// hero / documentation-footer icon.
+    Hero,
+}
+
+impl IconBlockSize {
+    fn icon_class(self) -> &'static str {
+        match self {
+            IconBlockSize::Standard => "icon",
+            IconBlockSize::Hero => "w-[80px] h-[80px] md:w-[150px] md:h-[150px] object-contain mb-4 block",
+        }
+    }
+}
+
+/// Vertical "icon over content" column.
+#[component]
+pub fn IconBlock(
+    /// Icon basename in `/public/icons/{light,dark}/{name}.svg`.
+    name: &'static str,
+    /// Accessible label for the icon.
+    alt: &'static str,
+    #[prop(default = IconBlockSize::Standard)] size: IconBlockSize,
+    #[prop(into, default = String::new())] class: String,
+    children: Children,
+) -> impl IntoView {
+    let wrapper_class = compose_wrapper_class(&class);
+    view! {
+        <div class=wrapper_class>
+            <ThemedIcon name=name alt=alt class=size.icon_class() />
+            {children()}
+        </div>
+    }
+}
+
+fn compose_wrapper_class(extra: &str) -> String {
+    let base = "flex flex-col items-start w-full";
+    if extra.is_empty() {
+        base.to_string()
+    } else {
+        format!("{base} {extra}")
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn icon_class_presets() {
+        assert_eq!(IconBlockSize::Standard.icon_class(), "icon");
+        assert!(IconBlockSize::Hero.icon_class().contains("w-[80px]"));
+    }
+
+    #[test]
+    fn wrapper_class_composes_extras() {
+        assert_eq!(compose_wrapper_class(""), "flex flex-col items-start w-full");
+        assert_eq!(
+            compose_wrapper_class("md:flex-1"),
+            "flex flex-col items-start w-full md:flex-1"
+        );
+    }
+}
diff --git a/src/components/ui/labeled_section.rs b/src/components/ui/labeled_section.rs
new file mode 100644
index 0000000..5b546a9
--- /dev/null
+++ b/src/components/ui/labeled_section.rs
@@ -0,0 +1,15 @@
+//! `<LabeledSection>` -- a small caps "MONO" label followed by body
+//! content. Used to build the WHAT / WHY / WHO panels on the
+//! projects page and on every project introduction.
+
+use crate::components::ui::Mono;
+use leptos::prelude::*;
+
+/// Mono label + arbitrary body content.
+#[component]
+pub fn LabeledSection(label: &'static str, children: Children) -> impl IntoView {
+    view! {
+        <Mono class="text-left">{label}</Mono>
+        {children()}
+    }
+}
diff --git a/src/components/ui/mod.rs b/src/components/ui/mod.rs
index bfee56d..146e228 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -22,23 +22,39 @@
 //! Remove it once every primitive is in active use.
 #![allow(dead_code, unused_imports)]
 
+mod announcement_card;
+mod arrow_link;
 mod button;
 mod container;
+mod doc_link_item;
 mod grid;
 mod heading;
+mod icon_block;
+mod labeled_section;
 mod link;
 mod mono;
+mod project_tabs;
 mod stack;
 mod text;
+mod two_column_intro;
+mod value_prop_card;
 
+pub use announcement_card::AnnouncementCard;
+pub use arrow_link::{ArrowLink, ArrowLinkSize};
 pub use button::{Button, ButtonVariant, IconButton};
 pub use container::Container;
+pub use doc_link_item::DocLinkItem;
 pub use grid::Grid;
 pub use heading::{Heading, HeadingLevel};
+pub use icon_block::{IconBlock, IconBlockSize};
+pub use labeled_section::LabeledSection;
 pub use link::{Link, LinkSize};
 pub use mono::{Mono, MonoSize};
+pub use project_tabs::{ProjectId, ProjectTabs};
 pub use stack::{Stack, StackDirection};
 pub use text::{Text, TextSize};
+pub use two_column_intro::TwoColumnIntro;
+pub use value_prop_card::ValuePropCard;
 
 // Re-exports so callers can pull every primitive from a single path.
 pub use crate::components::section::{Section, Surface};
diff --git a/src/components/ui/project_tabs.rs b/src/components/ui/project_tabs.rs
new file mode 100644
index 0000000..b1c7e52
--- /dev/null
+++ b/src/components/ui/project_tabs.rs
@@ -0,0 +1,107 @@
+//! `<ProjectTabs>` -- horizontal tab strip for cross-project
+//! navigation.
+//!
+//! Once a visitor is on `/boot-firmware`, the only way to reach
+//! `/embedded-controller` or `/windows-ec-services` was to back out
+//! to the projects index. This molecule renders a row of router
+//! links to all three project pages, with the current page styled
+//! as the active tab and marked with `aria-current="page"` for
+//! assistive tech.
+//!
+//! Place near the top of each project page, immediately below the
+//! `<ProjectIntroduction>` hero.
+
+use crate::data::projects::{ProjectCopy, EC_SERVICES, EMBEDDED_CONTROLLER, PATINA};
+use leptos::prelude::*;
+use leptos_router::components::A;
+
+/// Identifier for the active project tab.
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum ProjectId {
+    Patina,
+    EmbeddedController,
+    EcServices,
+}
+
+impl ProjectId {
+    fn copy(self) -> &'static ProjectCopy {
+        match self {
+            ProjectId::Patina => &PATINA,
+            ProjectId::EmbeddedController => &EMBEDDED_CONTROLLER,
+            ProjectId::EcServices => &EC_SERVICES,
+        }
+    }
+}
+
+const ALL_PROJECTS: &[ProjectId] = &[ProjectId::Patina, ProjectId::EmbeddedController, ProjectId::EcServices];
+
+/// Cross-project tab strip.
+#[component]
+pub fn ProjectTabs(active: ProjectId) -> impl IntoView {
+    view! {
+        <nav
+            aria-label="Other ODP projects"
+            class="background_secondary w-full px-4 sm:px-8 md:px-16 lg:px-32 py-4 md:py-6"
+        >
+            <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-6">
+                <span class="mono text-left text-sm uppercase opacity-70">{"Other projects:"}</span>
+                <ul class="flex flex-row flex-wrap gap-3 md:gap-6">
+                    {ALL_PROJECTS
+                        .iter()
+                        .map(|id| {
+                            let id = *id;
+                            let project = id.copy();
+                            let is_active = id == active;
+                            view! { <ProjectTab project=project is_active=is_active /> }
+                        })
+                        .collect_view()}
+                </ul>
+            </div>
+        </nav>
+    }
+}
+
+#[component]
+fn ProjectTab(project: &'static ProjectCopy, is_active: bool) -> impl IntoView {
+    let class = tab_class(is_active);
+    let aria_current = if is_active { Some("page") } else { None };
+    view! {
+        <li>
+            <A href=project.route attr:class=class attr:aria-current=aria_current>
+                {project.short_label}
+            </A>
+        </li>
+    }
+}
+
+fn tab_class(active: bool) -> &'static str {
+    if active {
+        "link_mobile md:link font-bold underline aria-current-page"
+    } else {
+        "link_mobile md:link no-underline hover:underline"
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn tab_class_distinguishes_active() {
+        assert!(tab_class(true).contains("font-bold"));
+        assert!(tab_class(true).contains("underline"));
+        assert!(!tab_class(false).contains("font-bold"));
+    }
+
+    #[test]
+    fn project_id_copy_round_trips() {
+        assert_eq!(ProjectId::Patina.copy().route, "/boot-firmware");
+        assert_eq!(ProjectId::EmbeddedController.copy().route, "/embedded-controller");
+        assert_eq!(ProjectId::EcServices.copy().route, "/windows-ec-services");
+    }
+
+    #[test]
+    fn all_projects_covers_every_variant() {
+        assert_eq!(ALL_PROJECTS.len(), 3);
+    }
+}
diff --git a/src/components/ui/two_column_intro.rs b/src/components/ui/two_column_intro.rs
new file mode 100644
index 0000000..e12422b
--- /dev/null
+++ b/src/components/ui/two_column_intro.rs
@@ -0,0 +1,44 @@
+//! `<TwoColumnIntro>` -- the recurring "stack-on-mobile,
+//! side-by-side-on-md+" intro layout used by both
+//! [`crate::components::projects_component::ProjectsComponent`] and
+//! [`crate::components::project_introduction::ProjectIntroduction`].
+//!
+//! Provides the outer [`Section`] shell + the
+//! `flex flex-col md:flex-row` row. Callers pass two slot children
+//! (`left` and `right`); each slot becomes a column.
+
+use crate::components::section::Section;
+use leptos::prelude::*;
+
+/// Two-column intro layout.
+#[component]
+pub fn TwoColumnIntro(
+    /// Left column content. Accepts any `FnOnce() -> impl IntoView`.
+    #[prop(into)]
+    left: ViewFnOnce,
+    /// Right column content. Accepts any `FnOnce() -> impl IntoView`.
+    #[prop(into)]
+    right: ViewFnOnce,
+    /// Whether [`Section`] applies its default page padding.
+    #[prop(default = true)]
+    padded: bool,
+    /// Extra Tailwind classes appended to the section.
+    #[prop(into, default = String::new())]
+    section_class: String,
+    /// Tailwind class string for the inner row's `gap`. Defaults to
+    /// the `gap-10 md:gap-20` pairing used by the projects page.
+    #[prop(default = "gap-10 md:gap-20")]
+    gap: &'static str,
+) -> impl IntoView {
+    let row_class = format!("flex flex-col md:flex-row {gap}");
+    view! {
+        <Section padded=padded class=section_class>
+            <div class=row_class>
+                <div class="flex flex-col items-start w-full md:flex-1">{left.run()}</div>
+                <div class="flex flex-col items-start w-full md:flex-1 mt-8 md:mt-0">
+                    {right.run()}
+                </div>
+            </div>
+        </Section>
+    }
+}
diff --git a/src/components/ui/value_prop_card.rs b/src/components/ui/value_prop_card.rs
new file mode 100644
index 0000000..40bf44c
--- /dev/null
+++ b/src/components/ui/value_prop_card.rs
@@ -0,0 +1,31 @@
+//! `<ValuePropCard>` -- the icon + H3 + body card used on the
+//! landing page's "Value Proposition" row.
+//!
+//! Composes [`IconBlock`] with [`Heading`] (H3) and [`Text`]
+//! (Large). The wrapper grows to fill an equal share of its
+//! `md:flex-row` parent, matching the legacy Tailwind shape.
+
+use crate::components::ui::{Heading, HeadingLevel, IconBlock, Text, TextSize};
+use leptos::prelude::*;
+
+/// Single "Value Proposition" card.
+#[component]
+pub fn ValuePropCard(
+    /// Icon basename in `/public/icons/{light,dark}/{name}.svg`.
+    icon: &'static str,
+    /// Accessible label for the icon.
+    icon_alt: &'static str,
+    title: &'static str,
+    body: &'static str,
+) -> impl IntoView {
+    view! {
+        <IconBlock name=icon alt=icon_alt class="md:flex-1">
+            <Heading level=HeadingLevel::H3 class="break-words w-full text-left">
+                {title}
+            </Heading>
+            <Text size=TextSize::Large class="break-words w-full text-left">
+                {body}
+            </Text>
+        </IconBlock>
+    }
+}
diff --git a/src/data/announcements.rs b/src/data/announcements.rs
new file mode 100644
index 0000000..2021cd9
--- /dev/null
+++ b/src/data/announcements.rs
@@ -0,0 +1,58 @@
+//! Announcement metadata.
+//!
+//! Each [`Announcement`] is one row in the announcements page sidebar
+//! and one selectable detail panel. The detail content (the
+//! press-release prose) stays co-located with the page component
+//! that renders it -- this module only owns the *metadata* so adding
+//! a new announcement is a one-line struct literal here plus one
+//! match-arm in the page.
+
+/// One announcement entry.
+#[derive(Clone, Copy)]
+pub struct Announcement {
+    /// URL slug used in `/announcements?id={slug}`. Must be unique
+    /// and stable -- announcement permalinks rely on it.
+    pub slug: &'static str,
+    /// Short date-prefixed label shown in the sidebar list.
+    pub link_label: &'static str,
+    /// Full title shown above the detail panel content.
+    pub title: &'static str,
+}
+
+/// Canonical announcement list, in the order shown in the sidebar.
+pub const ANNOUNCEMENTS: &[Announcement] = &[Announcement {
+    slug: "welcome-patina-announcement",
+    link_label: "Oct-7-2025 Welcome Patina!",
+    title: "Patina Project to Launch at UEFI 2025 Developer Conference & Plugfest",
+}];
+
+/// Look up an announcement index by slug. Returns `None` if no
+/// announcement with that slug exists.
+pub fn index_of(slug: &str) -> Option<usize> {
+    ANNOUNCEMENTS.iter().position(|a| a.slug == slug)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn welcome_patina_is_first() {
+        assert_eq!(ANNOUNCEMENTS[0].slug, "welcome-patina-announcement");
+        assert_eq!(index_of("welcome-patina-announcement"), Some(0));
+    }
+
+    #[test]
+    fn unknown_slug_returns_none() {
+        assert_eq!(index_of("does-not-exist"), None);
+    }
+
+    #[test]
+    fn slugs_are_unique() {
+        let mut slugs: Vec<&str> = ANNOUNCEMENTS.iter().map(|a| a.slug).collect();
+        slugs.sort();
+        let len_before = slugs.len();
+        slugs.dedup();
+        assert_eq!(slugs.len(), len_before, "announcement slugs must be unique");
+    }
+}
diff --git a/src/data/mod.rs b/src/data/mod.rs
index 8c23ca1..fcfe730 100644
--- a/src/data/mod.rs
+++ b/src/data/mod.rs
@@ -5,6 +5,7 @@
 //! here lets contributors edit who appears on which team without
 //! touching layout code.
 
+pub mod announcements;
 pub mod partners;
 pub mod projects;
 pub mod teams;
diff --git a/src/data/projects.rs b/src/data/projects.rs
index a04b95f..dbd566b 100644
--- a/src/data/projects.rs
+++ b/src/data/projects.rs
@@ -8,6 +8,10 @@
 
 pub struct ProjectCopy {
     pub title: &'static str,
+    /// Short label for the cross-project navigation tabs (e.g. "Patina").
+    pub short_label: &'static str,
+    /// Site-relative route for this project's page (e.g. "/boot-firmware").
+    pub route: &'static str,
     pub summary: &'static str,
     pub what: &'static str,
     pub why: &'static str,
@@ -20,6 +24,8 @@ pub struct ProjectCopy {
 
 pub const PATINA: ProjectCopy = ProjectCopy {
     title: "Patina",
+    short_label: "Patina",
+    route: "/boot-firmware",
     summary: "Modern Boot Firmware",
     what: r#"Patina is a UEFI compatible firmware interface written in the Rust language with a focus on memory safety and composition. For Patina, we re-evaluated the good and the bad from today's UEFI boot firmware and used this opportunity to embrace new language capabilities, software architecture, programming paradigms, and industry supported tooling. Patina isn't designed to replace everything necessary for system boot but instead to provide a sustainable path forward with high return on investment. Learn more about Patina on our <a href="https://github.com/OpenDevicePartnership/patina" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">GitHub repository</a> and check out the <a href="https://opendevicepartnership.github.io/patina/" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">Documentation</a> page."#,
     why: "A lot has changed in the last quarter century. UEFI boot firmware has scaled remarkably well, seamlessly ushering in new generations of hardware for PCs, but as active maintainers of UEFI we know the systemic problems that can’t be addressed without significant change. We understand the challenges of supporting a vast, diverse ecosystem of hardware devices as unique as each user.  We see the nuance in our industry's partnerships and the supply chains critical for their success.  For this reason, we started the Patina project to build a future and a coalition ready for the next set of challenges.",
@@ -32,6 +38,8 @@ pub const PATINA: ProjectCopy = ProjectCopy {
 
 pub const EMBEDDED_CONTROLLER: ProjectCopy = ProjectCopy {
     title: "Secure Embedded Controller",
+    short_label: "Secure EC",
+    route: "/embedded-controller",
     summary: "A hardened firmware platform for modern embedded controllers",
     what: r#"The ODP Secure EC stack is a Rust-based firmware platform for modern embedded controllers, supporting both discrete and integrated ECs.
 
@@ -50,6 +58,8 @@ It’s a modern foundation for building reliable, adaptable EC firmware — not
 
 pub const EC_SERVICES: ProjectCopy = ProjectCopy {
     title: "Unified Embedded Controller Interface",
+    short_label: "EC Services",
+    route: "/windows-ec-services",
     summary: "",
     what: r#"The Unified Windows EC Service interface defines runtime coordination between firmware components using async message-passing. 
     Each service manages a domain — like power, battery, or host communication — and exposes a structured protocol. 
diff --git a/src/lib.rs b/src/lib.rs
index 2a8b907..5a07f75 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -4,7 +4,7 @@ use leptos_meta::*;
 use leptos_router::{components::*, path};
 
 // Modules
-mod components;
+pub mod components;
 mod data;
 mod pages;
 
diff --git a/src/pages/announcements.rs b/src/pages/announcements.rs
index 016b5bf..2fd9f6c 100644
--- a/src/pages/announcements.rs
+++ b/src/pages/announcements.rs
@@ -1,5 +1,7 @@
 use crate::components::footer::Footer;
 use crate::components::header::Header;
+use crate::components::ui::AnnouncementCard;
+use crate::data::announcements::{index_of, ANNOUNCEMENTS};
 use leptos::prelude::Effect;
 use leptos::prelude::*;
 use leptos_router::hooks::{use_location, use_navigate};
@@ -82,41 +84,40 @@ fn patina_press_release() -> impl IntoView {
     }
 }
 
+/// Map an announcement slug to its rendered detail content.
+fn render_content(slug: &str) -> AnyView {
+    match slug {
+        "welcome-patina-announcement" => patina_press_release().into_any(),
+        _ => view! { <p>"Content not found"</p> }.into_any(),
+    }
+}
+
+/// Parse the `id=` query parameter (without depending on a URL parser).
+/// Returns the slug substring up to the next `&`, if any.
+fn slug_from_query(search: &str) -> Option<&str> {
+    let id_start = search.find("id=")?;
+    let rest = &search[id_start + 3..];
+    Some(match rest.find('&') {
+        Some(end) => &rest[..end],
+        None => rest,
+    })
+}
+
 #[component]
 pub fn AnnouncementsPage() -> impl IntoView {
     let location = use_location();
     let navigate = use_navigate();
 
-    // List of announcement links and their content (display_text, title, slug)
-    let announcements = vec![(
-        "Oct-7-2025 Welcome Patina!",
-        "Patina Project to Launch at UEFI 2025 Developer Conference & Plugfest",
-        "welcome-patina-announcement",
-    )];
-
     let (selected, set_selected) = signal(0);
 
-    // Set selected from query param if present
+    // Sync the selected index from the `?id=slug` query param.
     {
         let location = location.clone();
-        let announcements_clone = announcements.clone();
         Effect::new(move |_| {
             let search = location.search.get();
-
-            // Check for new slug-based format: ?id=slug
-            if search.contains("id=") {
-                // Try to extract the id value more flexibly
-                if let Some(id_start) = search.find("id=") {
-                    let slug = &search[id_start + 3..];
-                    // Remove any trailing parameters
-                    let slug = if let Some(amp_pos) = slug.find('&') {
-                        &slug[..amp_pos]
-                    } else {
-                        slug
-                    };
-                    if let Some(idx) = announcements_clone.iter().position(|(_, _, s)| *s == slug) {
-                        set_selected.set(idx);
-                    }
+            if let Some(slug) = slug_from_query(&search) {
+                if let Some(idx) = index_of(slug) {
+                    set_selected.set(idx);
                 }
             }
         });
@@ -129,12 +130,12 @@ pub fn AnnouncementsPage() -> impl IntoView {
             <div class="flex flex-col lg:flex-row w-full flex-1 relative">
                 <div class="w-full lg:w-[450px] xl:w-[500px] min-h-[200px] lg:min-h-[600px] xl:min-h-[700px] overflow-y-auto background_tertiary z-10 p-2 md:p-4 lg:p-6 mb-4 lg:mb-0">
                     <ul class="space-y-2 md:space-y-4">
-                        {announcements
+                        {ANNOUNCEMENTS
                             .iter()
                             .enumerate()
-                            .map(|(i, (link, _, slug))| {
+                            .map(|(i, a)| {
                                 let navigate = navigate.clone();
-                                let slug = *slug;
+                                let slug = a.slug;
                                 view! {
                                     <li>
                                         <button
@@ -147,7 +148,7 @@ pub fn AnnouncementsPage() -> impl IntoView {
                                                 );
                                             }
                                         >
-                                            {*link}
+                                            {a.link_label}
                                         </button>
                                     </li>
                                 }
@@ -157,25 +158,21 @@ pub fn AnnouncementsPage() -> impl IntoView {
                 </div>
                 <div class="flex-1 min-h-[400px] lg:min-h-[600px] xl:min-h-[700px] background_primary rounded-tl-[20px] md:rounded-tl-[30px] lg:rounded-tl-[50px] -ml-0 lg:-ml-16 z-20 overflow-y-auto p-4 md:p-6 lg:p-10">
                     {move || {
-                        let (title, content): (String, AnyView) = if let Some((_, title, slug)) = announcements
-                            .get(selected.get())
-                        {
-                            let content = match *slug {
-                                "welcome-patina-announcement" => patina_press_release().into_any(),
-                                _ => view! { <p>"Content not found"</p> }.into_any(),
-                            };
-                            (title.to_string(), content)
+                        let idx = selected.get();
+                        if let Some(a) = ANNOUNCEMENTS.get(idx) {
+                            view! {
+                                <AnnouncementCard title=a
+                                    .title
+                                    .to_string()>{render_content(a.slug)}</AnnouncementCard>
+                            }
+                                .into_any()
                         } else {
-                            (
-                                "No announcement selected".to_string(),
-                                view! { <p>{""}</p> }.into_any(),
-                            )
-                        };
-                        view! {
-                            <div class="p_mobile md:p">
-                                <div class="h2 pb-4 md:pb-6">{title}</div>
-                                <div class="p2">{content}</div>
-                            </div>
+                            view! {
+                                <AnnouncementCard title="No announcement selected".to_string()>
+                                    <p>{""}</p>
+                                </AnnouncementCard>
+                            }
+                                .into_any()
                         }
                     }}
                 </div>
diff --git a/src/pages/boot_firmware.rs b/src/pages/boot_firmware.rs
index 313a3d6..092076f 100644
--- a/src/pages/boot_firmware.rs
+++ b/src/pages/boot_firmware.rs
@@ -1,6 +1,7 @@
 use crate::components::documentation_training::DocumentationTraining;
 use crate::components::project_introduction::ProjectIntroduction;
 use crate::components::repo_view::RepositoryGraph;
+use crate::components::ui::{ProjectId, ProjectTabs};
 use crate::data::projects::PATINA;
 
 use leptos::prelude::*;
@@ -18,6 +19,7 @@ pub fn BootFirmware() -> impl IntoView {
             big_image_url=PATINA.big_image_url
             small_image_url=PATINA.small_image_url
         />
+        <ProjectTabs active=ProjectId::Patina />
         <RepositoryGraph nodes=PATINA.nodes_json links=PATINA.links_json />
         <DocumentationTraining />
     }
diff --git a/src/pages/embedded_controller.rs b/src/pages/embedded_controller.rs
index 1a402c2..ff79d4f 100644
--- a/src/pages/embedded_controller.rs
+++ b/src/pages/embedded_controller.rs
@@ -1,6 +1,7 @@
 use crate::components::documentation_training::DocumentationTraining;
 use crate::components::project_introduction::ProjectIntroduction;
 use crate::components::repo_view::RepositoryGraph;
+use crate::components::ui::{ProjectId, ProjectTabs};
 use crate::data::projects::EMBEDDED_CONTROLLER;
 
 use leptos::prelude::*;
@@ -18,6 +19,7 @@ pub fn EmbeddedController() -> impl IntoView {
             big_image_url=EMBEDDED_CONTROLLER.big_image_url
             small_image_url=EMBEDDED_CONTROLLER.small_image_url
         />
+        <ProjectTabs active=ProjectId::EmbeddedController />
         <RepositoryGraph
             nodes=EMBEDDED_CONTROLLER.nodes_json
             links=EMBEDDED_CONTROLLER.links_json
diff --git a/src/pages/unified_ec_services.rs b/src/pages/unified_ec_services.rs
index 3faac4c..0d33f35 100644
--- a/src/pages/unified_ec_services.rs
+++ b/src/pages/unified_ec_services.rs
@@ -1,6 +1,7 @@
 use crate::components::documentation_training::DocumentationTraining;
 use crate::components::project_introduction::ProjectIntroduction;
 use crate::components::repo_view::RepositoryGraph;
+use crate::components::ui::{ProjectId, ProjectTabs};
 use crate::data::projects::EC_SERVICES;
 
 use leptos::prelude::*;
@@ -18,6 +19,7 @@ pub fn WindowsEcServices() -> impl IntoView {
             big_image_url=EC_SERVICES.big_image_url
             small_image_url=EC_SERVICES.small_image_url
         />
+        <ProjectTabs active=ProjectId::EcServices />
         <RepositoryGraph nodes=EC_SERVICES.nodes_json links=EC_SERVICES.links_json />
         <DocumentationTraining />
     }
diff --git a/tests/wasm.rs b/tests/wasm.rs
new file mode 100644
index 0000000..2a4e335
--- /dev/null
+++ b/tests/wasm.rs
@@ -0,0 +1,469 @@
+//! Browser-side integration tests.
+//!
+//! These run under `wasm-pack test --headless --chrome` (or `--firefox`)
+//! and exercise pieces of the design system that need a real DOM:
+//! the `<picture>` shape of `ThemedIcon`, the back-button anchor in
+//! `<TeamHero>`, and the `aria-expanded` toggle on the mobile nav.
+//!
+//! Pure-logic tests (graph JSON parsing, class-string composition)
+//! live as `#[cfg(test)] mod tests` blocks next to their owning
+//! source so they can run on the host with plain `cargo test`.
+//!
+//! For tests that need router context (`<A>` from `leptos_router`),
+//! we wrap the component in a tiny `<Router>` so the routing context
+//! is provided.
+
+#![cfg(target_arch = "wasm32")]
+
+use leptos::prelude::*;
+use leptos_router::components::Router;
+use odp::components::header::Header;
+use odp::components::landing::{ClosingColumnsSection, HeroSection, ProjectsSection, ValuePropositionSection};
+use odp::components::team_hero::TeamHero;
+use odp::components::themed_icon::ThemedIcon;
+use odp::components::ui::{
+    AnnouncementCard, ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, ProjectId, ProjectTabs,
+    TwoColumnIntro, ValuePropCard,
+};
+use wasm_bindgen::{JsCast, JsValue};
+use wasm_bindgen_test::*;
+use web_sys::HtmlElement;
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+fn document() -> web_sys::Document {
+    web_sys::window().unwrap().document().unwrap()
+}
+
+/// Yield to the event loop so queued Leptos effects (reactive
+/// attribute re-renders) flush before we assert on the DOM.
+async fn next_tick() {
+    let promise = js_sys::Promise::resolve(&JsValue::NULL);
+    wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+}
+
+/// Mount `view` into a freshly-created `<div>` appended to the body
+/// and return a handle to that container so the test can query it.
+/// Each call gets its own container so tests don't see each other's
+/// DOM.
+fn mount<F, V>(view: F) -> web_sys::Element
+where
+    F: FnOnce() -> V + 'static,
+    V: IntoView + 'static,
+{
+    let doc = document();
+    let container = doc.create_element("div").unwrap();
+    doc.body().unwrap().append_child(&container).unwrap();
+    let container_clone = container.clone();
+    leptos::mount::mount_to(container_clone.unchecked_into::<HtmlElement>(), view).forget();
+    container
+}
+
+#[wasm_bindgen_test]
+fn themed_icon_renders_picture_with_dark_source_and_light_img() {
+    let root = mount(|| {
+        view! { <ThemedIcon name="lock" alt="lock icon" /> }
+    });
+
+    let picture = root.query_selector("picture").unwrap().expect("picture");
+    let source = picture.query_selector("source").unwrap().expect("source");
+    let img = picture.query_selector("img").unwrap().expect("img");
+
+    assert!(source.get_attribute("srcset").unwrap().contains("/images/dark/lock"));
+    assert!(img.get_attribute("src").unwrap().contains("/images/light/lock"));
+    assert_eq!(img.get_attribute("alt").as_deref(), Some("lock icon"));
+}
+
+#[wasm_bindgen_test]
+fn team_hero_renders_back_button_anchor() {
+    let root = mount(|| {
+        view! { <TeamHero team_name="Patina team" description="d" /> }
+    });
+
+    let anchors = root.query_selector("a[href='javascript:history.back()']").unwrap();
+    assert!(anchors.is_some(), "expected at least one back-button anchor");
+}
+
+#[wasm_bindgen_test]
+async fn header_mobile_menu_toggles_aria_expanded() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <Header />
+            </Router>
+        }
+    });
+
+    let button = root
+        .query_selector("button[aria-controls='primary-mobile-nav']")
+        .unwrap()
+        .expect("hamburger button")
+        .unchecked_into::<HtmlElement>();
+
+    next_tick().await;
+    assert_eq!(button.get_attribute("aria-expanded").as_deref(), Some("false"));
+    button.click();
+    next_tick().await;
+    assert_eq!(button.get_attribute("aria-expanded").as_deref(), Some("true"));
+    button.click();
+    next_tick().await;
+    assert_eq!(button.get_attribute("aria-expanded").as_deref(), Some("false"));
+}
+
+#[wasm_bindgen_test]
+fn header_logo_is_wrapped_in_home_anchor() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <Header />
+            </Router>
+        }
+    });
+
+    let logo_anchor = root
+        .query_selector("a[aria-label='Open Device Partnership home']")
+        .unwrap()
+        .expect("logo anchor");
+
+    assert_eq!(logo_anchor.get_attribute("href").as_deref(), Some("/"));
+    assert!(
+        logo_anchor.query_selector("picture").unwrap().is_some(),
+        "logo anchor should wrap the themed-icon picture"
+    );
+}
+
+// ---------------------------------------------------------------------------
+// t30 — <ArrowLink>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn arrow_link_external_renders_target_blank_and_external_class() {
+    let root = mount(|| {
+        view! { <ArrowLink href="https://example.com" title="External" size=ArrowLinkSize::Large /> }
+    });
+
+    let wrapper = root.query_selector("div").unwrap().expect("wrapper div");
+    let class = wrapper.get_attribute("class").unwrap();
+    assert!(class.contains("external-link"), "wrapper class = {class}");
+    assert!(!class.contains("internal-link"));
+
+    let anchor = wrapper.query_selector("a").unwrap().expect("anchor");
+    assert_eq!(anchor.get_attribute("href").as_deref(), Some("https://example.com"));
+    assert_eq!(anchor.get_attribute("target").as_deref(), Some("_blank"));
+    assert_eq!(anchor.get_attribute("rel").as_deref(), Some("noopener noreferrer"));
+
+    // Arrow + label spans both present.
+    let spans = anchor.get_elements_by_tag_name("span");
+    assert_eq!(spans.length(), 2, "expected arrow + label spans");
+}
+
+#[wasm_bindgen_test]
+fn arrow_link_internal_renders_router_anchor_without_target() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <ArrowLink href="/community" title="Community" />
+            </Router>
+        }
+    });
+
+    let wrapper = root.query_selector("div").unwrap().expect("wrapper div");
+    let class = wrapper.get_attribute("class").unwrap();
+    assert!(class.contains("internal-link"), "wrapper class = {class}");
+    assert!(!class.contains("external-link"));
+
+    let anchor = wrapper.query_selector("a").unwrap().expect("anchor");
+    assert_eq!(anchor.get_attribute("href").as_deref(), Some("/community"));
+    assert!(
+        anchor.get_attribute("target").is_none(),
+        "internal links must not open new tab"
+    );
+}
+
+// ---------------------------------------------------------------------------
+// t31 — <IconBlock>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn icon_block_wraps_themed_icon_with_children() {
+    let root = mount(|| {
+        view! {
+            <IconBlock name="lock" alt="Lock">
+                <span class="probe-child">"hello"</span>
+            </IconBlock>
+        }
+    });
+
+    assert!(
+        root.query_selector("picture").unwrap().is_some(),
+        "IconBlock should render the ThemedIcon picture"
+    );
+    let child = root.query_selector(".probe-child").unwrap().expect("probe child");
+    assert_eq!(child.text_content().as_deref(), Some("hello"));
+}
+
+// ---------------------------------------------------------------------------
+// t32 — <ValuePropCard>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn value_prop_card_contains_icon_title_and_body() {
+    let root = mount(|| {
+        view! { <ValuePropCard icon="lock" icon_alt="Lock" title="Probe Title" body="Probe body text." /> }
+    });
+
+    assert!(
+        root.query_selector("picture").unwrap().is_some(),
+        "value-prop card should render the icon"
+    );
+    let html = root.inner_html();
+    assert!(html.contains("Probe Title"), "missing title in: {html}");
+    assert!(html.contains("Probe body text."), "missing body in: {html}");
+}
+
+// ---------------------------------------------------------------------------
+// t33 — landing page sections
+// ---------------------------------------------------------------------------
+
+fn assert_contains(root: &web_sys::Element, needle: &str) {
+    let html = root.inner_html();
+    assert!(html.contains(needle), "expected `{needle}` in section html");
+}
+
+#[wasm_bindgen_test]
+fn hero_section_renders_headline() {
+    let root = mount(|| view! { <HeroSection /> });
+    assert_contains(&root, "An Open Collaboration for Secure, Modern Devices");
+}
+
+#[wasm_bindgen_test]
+fn value_proposition_section_renders_three_cards() {
+    let root = mount(|| view! { <ValuePropositionSection /> });
+    assert_contains(&root, "Value Proposition");
+    assert_contains(&root, "Enhanced Security");
+    assert_contains(&root, "Standardization");
+    assert_contains(&root, "Accelerated Development");
+    let pictures = root.get_elements_by_tag_name("picture");
+    assert_eq!(pictures.length(), 3, "expected 3 value-prop card icons");
+}
+
+#[wasm_bindgen_test]
+fn projects_section_renders_intro_and_three_image_buttons() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <ProjectsSection />
+            </Router>
+        }
+    });
+    assert_contains(&root, "ODP Projects");
+    let imgs = root.get_elements_by_tag_name("img");
+    assert!(
+        imgs.length() >= 3,
+        "expected >=3 project tile images, got {}",
+        imgs.length()
+    );
+}
+
+#[wasm_bindgen_test]
+fn closing_columns_section_renders_both_columns() {
+    let root = mount(|| view! { <ClosingColumnsSection /> });
+    assert_contains(&root, "Partner-Oriented Vision");
+    assert_contains(&root, "Get Involved!");
+}
+
+// ---------------------------------------------------------------------------
+// t34 — <TwoColumnIntro> + <LabeledSection>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn two_column_intro_places_left_and_right_in_separate_columns() {
+    let root = mount(|| {
+        view! {
+            <TwoColumnIntro
+                left=|| view! { <span class="probe-left">"L"</span> }
+                right=|| view! { <span class="probe-right">"R"</span> }
+            />
+        }
+    });
+
+    let row = root
+        .query_selector(".flex.flex-col.md\\:flex-row")
+        .unwrap()
+        .expect("row");
+    let cols = row.children();
+    assert_eq!(cols.length(), 2, "expected exactly two columns");
+
+    let left_col = cols.item(0).unwrap();
+    let right_col = cols.item(1).unwrap();
+    assert!(
+        left_col.query_selector(".probe-left").unwrap().is_some(),
+        "left slot must render in first column"
+    );
+    assert!(
+        right_col.query_selector(".probe-right").unwrap().is_some(),
+        "right slot must render in second column"
+    );
+    // Right column gets the mobile-only top margin so the stacked
+    // mobile layout has breathing room.
+    let right_class = right_col.get_attribute("class").unwrap();
+    assert!(right_class.contains("mt-8"), "right column class = {right_class}");
+}
+
+#[wasm_bindgen_test]
+fn labeled_section_renders_uppercase_label_then_children() {
+    let root = mount(|| {
+        view! {
+            <LabeledSection label="WHAT">
+                <p class="probe-body">"body text"</p>
+            </LabeledSection>
+        }
+    });
+
+    let html = root.inner_html();
+    let label_pos = html.find("WHAT").expect("label present");
+    let body_pos = html.find("body text").expect("body present");
+    assert!(label_pos < body_pos, "label must precede body in source order");
+    // The label is wrapped in a Mono span (the `mono` brand class).
+    assert!(html.contains("WHAT"), "literal WHAT should be in DOM");
+}
+
+// ---------------------------------------------------------------------------
+// t35 — <DocLinkItem>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn doc_link_item_external_renders_li_with_arrow_link() {
+    let root = mount(|| {
+        view! {
+            <ul>
+                <DocLinkItem href="https://example.com/x" title="External Doc" external=true />
+            </ul>
+        }
+    });
+
+    let li = root.query_selector("li").unwrap().expect("li");
+    let anchor = li.query_selector("a").unwrap().expect("anchor inside li");
+    assert_eq!(anchor.get_attribute("href").as_deref(), Some("https://example.com/x"));
+    assert_eq!(anchor.get_attribute("target").as_deref(), Some("_blank"));
+    let html = li.inner_html();
+    assert!(html.contains("External Doc"), "title missing: {html}");
+}
+
+#[wasm_bindgen_test]
+fn doc_link_item_internal_uses_router_anchor() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <ul>
+                    <DocLinkItem href="/community" title="Community" external=false />
+                </ul>
+            </Router>
+        }
+    });
+
+    let li = root.query_selector("li").unwrap().expect("li");
+    let anchor = li.query_selector("a").unwrap().expect("anchor");
+    assert_eq!(anchor.get_attribute("href").as_deref(), Some("/community"));
+    assert!(
+        anchor.get_attribute("target").is_none(),
+        "internal link must not open new tab"
+    );
+}
+
+// ---------------------------------------------------------------------------
+// t36 — <AnnouncementCard>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn announcement_card_renders_title_and_body() {
+    let root = mount(|| {
+        view! {
+            <AnnouncementCard title="Probe Title">
+                <p class="probe-body">"Probe announcement body."</p>
+            </AnnouncementCard>
+        }
+    });
+
+    let html = root.inner_html();
+    assert!(html.contains("Probe Title"), "title missing: {html}");
+    assert!(html.contains("Probe announcement body."), "body missing: {html}");
+
+    let title_pos = html.find("Probe Title").unwrap();
+    let body_pos = html.find("Probe announcement body.").unwrap();
+    assert!(title_pos < body_pos, "title must precede body");
+
+    assert!(
+        root.query_selector(".probe-body").unwrap().is_some(),
+        "body element should be rendered as a child"
+    );
+}
+
+// ---------------------------------------------------------------------------
+// t37 — <ProjectTabs>
+// ---------------------------------------------------------------------------
+
+#[wasm_bindgen_test]
+fn project_tabs_render_three_tabs_with_active_marker() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <ProjectTabs active=ProjectId::EmbeddedController />
+            </Router>
+        }
+    });
+
+    let anchors = root.get_elements_by_tag_name("a");
+    assert_eq!(anchors.length(), 3, "expected exactly three project tabs");
+
+    let mut hrefs = Vec::new();
+    let mut active_count = 0;
+    for i in 0..anchors.length() {
+        let a = anchors.item(i).unwrap();
+        hrefs.push(a.get_attribute("href").unwrap_or_default());
+        if a.get_attribute("aria-current").as_deref() == Some("page") {
+            active_count += 1;
+            let class = a.get_attribute("class").unwrap_or_default();
+            assert!(class.contains("font-bold"), "active tab class should be bold: {class}");
+        }
+    }
+
+    assert_eq!(active_count, 1, "exactly one tab must carry aria-current=page");
+    assert!(
+        hrefs.iter().any(|h| h.ends_with("/boot-firmware")),
+        "patina link missing: {hrefs:?}"
+    );
+    assert!(
+        hrefs.iter().any(|h| h.ends_with("/embedded-controller")),
+        "ec link missing: {hrefs:?}"
+    );
+    assert!(
+        hrefs.iter().any(|h| h.ends_with("/windows-ec-services")),
+        "ec services link missing: {hrefs:?}"
+    );
+}
+
+#[wasm_bindgen_test]
+fn project_tabs_active_marker_matches_active_prop() {
+    let root = mount(|| {
+        view! {
+            <Router>
+                <ProjectTabs active=ProjectId::EcServices />
+            </Router>
+        }
+    });
+
+    let anchors = root.get_elements_by_tag_name("a");
+    let mut active_href = None;
+    for i in 0..anchors.length() {
+        let a = anchors.item(i).unwrap();
+        if a.get_attribute("aria-current").as_deref() == Some("page") {
+            active_href = a.get_attribute("href");
+        }
+    }
+    let href = active_href.expect("an active tab must exist");
+    assert!(
+        href.ends_with("/windows-ec-services"),
+        "active href should be EC Services route, got {href}"
+    );
+}