From 75c330d484c206646cbfd8c759f19df48eadb871 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:04:34 -0700
Subject: [PATCH 01/13] t28: Remove redundant home-hero CTA boxes

The home hero shipped two large CTA tiles -- "Getting started" and
"Projects" -- right under a navigation bar that already has both as
top-level links. The duplication was visually loud and added two
hard-coded fixed-pixel widths (lg:w-[478px], h-[176px]) plus inline
styles that fought the surrounding flex layout.

This commit drops the tiles and lets the headline + subtitle span
the row. The Welcome + video block underneath is unchanged.

Drive-by typography migration of the Welcome block onto <Heading> /
<Text> from the design system, and a couple of inline-style ->
Tailwind cleanups (object-contain block mb-4, rounded-[10px],
max-w-screen) that were left over from earlier passes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/main.rs | 62 ++++++++++--------------------------------
 1 file changed, 14 insertions(+), 48 deletions(-)

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"

From b4e44fd624fe551b7907f04f4af3304834337fb5 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:19:58 -0700
Subject: [PATCH 02/13] t29: Add wasm-bindgen-test browser tests and CI job

Adds DOM-level browser tests using wasm-bindgen-test, runnable via
`wasm-pack test --headless --firefox --test wasm`. These cover behavior
the host-side `cargo test` cannot reach.

Tests in `tests/wasm.rs`:

* `themed_icon_renders_picture_with_dark_source_and_light_img` -
  `<ThemedIcon>` emits the expected `<picture>/<source>/<img>`
  shape with the prefers-color-scheme media query.
* `team_hero_renders_back_button_anchor` - `<TeamHero>` renders
  the history.back() anchor.
* `header_logo_is_wrapped_in_home_anchor` - clicking the logo
  navigates to `/` (the t27 logo-as-home behavior).
* `header_mobile_menu_toggles_aria_expanded` - the mobile burger
  toggles `aria-expanded` correctly. The assertion is async with
  a microtask flush helper because Leptos applies reactive
  attribute updates on the next microtask, not synchronously with
  the click handler.

Infrastructure:

* `wasm-bindgen-test`, `wasm-bindgen-futures`, and `js-sys` added
  as dev-dependencies.
* `mod components` -> `pub mod components` in `src/lib.rs` so
  integration tests can reach the UI types. `data` and `pages`
  remain private.
* New `wasm-test` job in `.github/workflows/ci.yaml` runs the
  browser tests headlessly under Firefox on `ubuntu-latest`
  (which ships Firefox by default; wasm-pack auto-fetches a
  matching geckodriver).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/workflows/ci.yaml |  28 +++++++++
 Cargo.lock                |  59 ++++++++++++++++++
 Cargo.toml                |   3 +
 src/lib.rs                |   2 +-
 tests/wasm.rs             | 128 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 219 insertions(+), 1 deletion(-)
 create mode 100644 tests/wasm.rs

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..ab0f42d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,7 +12,10 @@ 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
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/tests/wasm.rs b/tests/wasm.rs
new file mode 100644
index 0000000..d65add8
--- /dev/null
+++ b/tests/wasm.rs
@@ -0,0 +1,128 @@
+//! 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::team_hero::TeamHero;
+use odp::components::themed_icon::ThemedIcon;
+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"
+    );
+}

From 8a9bb61013d0366a8e3189f0ca1a743825676140 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:24:14 -0700
Subject: [PATCH 03/13] t30: Extract <ArrowLink> molecule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "→ label" link with separate non-underlined arrow span and
underlined label appeared verbatim in three places. Hoist it into
`components/ui/arrow_link.rs` as a reusable design-system molecule
that auto-detects external URLs (uses `<a target=_blank rel=...>`)
vs. internal routes (uses `leptos_router::components::A`) from the
`href` scheme.

Migrated:
* `DocumentationTraining` -- the 5-link "Documentation" footer
  list now collapses to a single `<ArrowLink size=Large
  external=link.external />` per item.
* `ProjectsComponent::ProjectLink` -- now a thin wrapper that
  forwards to `<ArrowLink>`.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/documentation_training.rs |  29 ++----
 src/components/projects_component.rs     |   9 +-
 src/components/ui/arrow_link.rs          | 113 +++++++++++++++++++++++
 src/components/ui/mod.rs                 |   2 +
 4 files changed, 124 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ui/arrow_link.rs

diff --git a/src/components/documentation_training.rs b/src/components/documentation_training.rs
index 75fa660..a46de84 100644
--- a/src/components/documentation_training.rs
+++ b/src/components/documentation_training.rs
@@ -1,7 +1,6 @@
 use crate::components::themed_icon::ThemedIcon;
-use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use crate::components::ui::{ArrowLink, ArrowLinkSize, Heading, HeadingLevel, Text, TextSize};
 use leptos::prelude::*;
-use leptos_router::components::A;
 
 #[derive(Clone)]
 pub struct DocLink {
@@ -67,26 +66,12 @@ pub fn DocumentationTraining(#[prop(default = DEFAULT_DOC_LINKS.to_vec())] links
                     .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>
+                                <ArrowLink
+                                    href=link.href
+                                    title=link.title
+                                    size=ArrowLinkSize::Large
+                                    external=link.external
+                                />
                             </li>
                         }
                     })
diff --git a/src/components/projects_component.rs b/src/components/projects_component.rs
index ea6fe3e..9babadd 100644
--- a/src/components/projects_component.rs
+++ b/src/components/projects_component.rs
@@ -1,6 +1,6 @@
 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, Mono, Text, TextSize};
 use leptos::prelude::*;
 
 #[component]
@@ -114,10 +114,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/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/mod.rs b/src/components/ui/mod.rs
index bfee56d..22cec8f 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -22,6 +22,7 @@
 //! Remove it once every primitive is in active use.
 #![allow(dead_code, unused_imports)]
 
+mod arrow_link;
 mod button;
 mod container;
 mod grid;
@@ -31,6 +32,7 @@ mod mono;
 mod stack;
 mod text;
 
+pub use arrow_link::{ArrowLink, ArrowLinkSize};
 pub use button::{Button, ButtonVariant, IconButton};
 pub use container::Container;
 pub use grid::Grid;

From 058a3c050393416a2ca5d577d2ad15dd4d41d4b3 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:26:54 -0700
Subject: [PATCH 04/13] t31: Extract <IconBlock> molecule

The "themed icon stacked above content in a left-aligned column"
pattern recurs across the landing page value-prop cards, the
documentation footer, and the team hero. Hoist it into
`components/ui/icon_block.rs` with two size presets:

* `IconBlockSize::Standard` -- the `.icon` size used by the
  value-prop / community cards.
* `IconBlockSize::Hero` -- the larger 80/150px responsive icon
  used by the documentation footer and other hero rows.

Migrated the documentation footer's icon column to `<IconBlock>`
as the first consumer; remaining call sites land in t32 (value-prop
cards) and follow-on commits.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/documentation_training.rs | 14 ++---
 src/components/ui/icon_block.rs          | 79 ++++++++++++++++++++++++
 src/components/ui/mod.rs                 |  2 +
 3 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/icon_block.rs

diff --git a/src/components/documentation_training.rs b/src/components/documentation_training.rs
index a46de84..beb9f40 100644
--- a/src/components/documentation_training.rs
+++ b/src/components/documentation_training.rs
@@ -1,5 +1,6 @@
-use crate::components::themed_icon::ThemedIcon;
-use crate::components::ui::{ArrowLink, ArrowLinkSize, Heading, HeadingLevel, Text, TextSize};
+use crate::components::ui::{
+    ArrowLink, ArrowLinkSize, Heading, HeadingLevel, IconBlock, IconBlockSize, Text, TextSize,
+};
 use leptos::prelude::*;
 
 #[derive(Clone)]
@@ -45,12 +46,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>
@@ -58,7 +54,7 @@ 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
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/mod.rs b/src/components/ui/mod.rs
index 22cec8f..6a6c4d6 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -27,6 +27,7 @@ mod button;
 mod container;
 mod grid;
 mod heading;
+mod icon_block;
 mod link;
 mod mono;
 mod stack;
@@ -37,6 +38,7 @@ pub use button::{Button, ButtonVariant, IconButton};
 pub use container::Container;
 pub use grid::Grid;
 pub use heading::{Heading, HeadingLevel};
+pub use icon_block::{IconBlock, IconBlockSize};
 pub use link::{Link, LinkSize};
 pub use mono::{Mono, MonoSize};
 pub use stack::{Stack, StackDirection};

From 2802969ae7ca2d62417049e1bbc942054a2ebee0 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:29:06 -0700
Subject: [PATCH 05/13] t32: Extract <ValuePropCard> molecule

The three landing-page Value Proposition cards shared an
icon+H3+body shape. Hoist into `components/ui/value_prop_card.rs`,
which composes [\IconBlock\] + [\Heading\] (H3) + [\Text\]
(Large) and applies the `md:flex-1` equal-share Tailwind class so
the cards still split the row evenly.

The landing-page section drops from 3x10-line raw blocks to 3x6-line
`<ValuePropCard ... />` calls.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/landing_page.rs       | 48 +++++++++++-----------------
 src/components/ui/mod.rs             |  2 ++
 src/components/ui/value_prop_card.rs | 31 ++++++++++++++++++
 3 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ui/value_prop_card.rs

diff --git a/src/components/landing_page.rs b/src/components/landing_page.rs
index 36b7127..0e46df4 100644
--- a/src/components/landing_page.rs
+++ b/src/components/landing_page.rs
@@ -1,7 +1,6 @@
 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};
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize, ValuePropCard};
 use leptos::prelude::*;
 
 #[component]
@@ -30,33 +29,24 @@ pub fn LandingPage() -> impl IntoView {
                     {"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>
+                    <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/ui/mod.rs b/src/components/ui/mod.rs
index 6a6c4d6..afe3d69 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -32,6 +32,7 @@ mod link;
 mod mono;
 mod stack;
 mod text;
+mod value_prop_card;
 
 pub use arrow_link::{ArrowLink, ArrowLinkSize};
 pub use button::{Button, ButtonVariant, IconButton};
@@ -43,6 +44,7 @@ pub use link::{Link, LinkSize};
 pub use mono::{Mono, MonoSize};
 pub use stack::{Stack, StackDirection};
 pub use text::{Text, TextSize};
+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/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>
+    }
+}

From 90ca81dc6ed01467ff605a6db5ee75e18fd8c3c8 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:35:58 -0700
Subject: [PATCH 06/13] t33: Split landing_page.rs into per-section files

The 100-line landing-page view block was a single `LandingPage`
component holding four logically distinct sections back-to-back:
hero, value proposition, projects intro + tiles, and the closing
two-column call-to-action.

Hoist each into its own file under `src/components/landing/`:

* `hero_section.rs` -- `<HeroSection>`
* `value_proposition_section.rs` -- `<ValuePropositionSection>`
* `projects_section.rs` -- `<ProjectsSection>` (intro + tiles)
* `closing_columns_section.rs` -- `<ClosingColumnsSection>`

`components/landing_page.rs` collapses to an 18-line shell that
renders the four sections in order. The new `landing` module is
registered in `components/mod.rs`.

No visual changes; the rendered DOM is identical, just sourced from
smaller files.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../landing/closing_columns_section.rs        |  32 +++++
 src/components/landing/hero_section.rs        |  28 +++++
 src/components/landing/mod.rs                 |  16 +++
 src/components/landing/projects_section.rs    |  44 +++++++
 .../landing/value_proposition_section.rs      |  38 ++++++
 src/components/landing_page.rs                | 114 ++----------------
 src/components/mod.rs                         |   1 +
 7 files changed, 169 insertions(+), 104 deletions(-)
 create mode 100644 src/components/landing/closing_columns_section.rs
 create mode 100644 src/components/landing/hero_section.rs
 create mode 100644 src/components/landing/mod.rs
 create mode 100644 src/components/landing/projects_section.rs
 create mode 100644 src/components/landing/value_proposition_section.rs

diff --git a/src/components/landing/closing_columns_section.rs b/src/components/landing/closing_columns_section.rs
new file mode 100644
index 0000000..b2e6a44
--- /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..b24a30a
--- /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..d155a16
--- /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..fa31831
--- /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..3a2bd60
--- /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 0e46df4..e2a7f97 100644
--- a/src/components/landing_page.rs
+++ b/src/components/landing_page.rs
@@ -1,111 +1,17 @@
-use crate::components::image_button::ImageButton;
-use crate::components::section::{Section, Surface};
-use crate::components::ui::{Heading, HeadingLevel, Text, TextSize, ValuePropCard};
+//! 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">
-                    <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>
-
-        // 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/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;

From da6fa1c9cdf94f5380b19b424f454f4faa500f0a Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:35:58 -0700
Subject: [PATCH 07/13] t38: Backfill wasm-bindgen-test coverage for t30-t33

Tier 5's stated rationale for landing wasm-bindgen-test (t29)
second was that later refactors get safety-netted by browser tests
as they go in. The molecule and section commits (t30-t33) shipped
without matching DOM tests; this commit closes that gap.

Adds eight tests in `tests/wasm.rs`:

* `arrow_link_external_renders_target_blank_and_external_class` -
  external href produces `target="_blank"`,
  `rel="noopener noreferrer"`, and the `external-link` wrapper
  class with both arrow and label spans present.
* `arrow_link_internal_renders_router_anchor_without_target` -
  internal href produces an `internal-link` wrapper, no `target`
  attribute, and routes via `leptos_router::A` (wrapped in
  `<Router>`).
* `icon_block_wraps_themed_icon_with_children` - `<IconBlock>`
  emits a `<picture>` followed by the supplied children.
* `value_prop_card_contains_icon_title_and_body` - title and
  body strings are present alongside the icon.
* `hero_section_renders_headline`,
  `value_proposition_section_renders_three_cards`,
  `projects_section_renders_intro_and_three_image_buttons`,
  `closing_columns_section_renders_both_columns` - each landing
  section composes correctly and exposes its known unique copy.

Reuses the existing `mount` helper. Switches from
`Element::query_selector_all` (not in our web-sys feature set) to
`Element::get_elements_by_tag_name` for tag-count assertions.

No production code changes. `cargo test` (host): 40 pass.
`wasm-pack test --headless --firefox --test wasm`: 12 pass.

Going forward: every new molecule/section in t34-t37 lands with
its DOM test in the same commit.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 tests/wasm.rs | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)

diff --git a/tests/wasm.rs b/tests/wasm.rs
index d65add8..54273b2 100644
--- a/tests/wasm.rs
+++ b/tests/wasm.rs
@@ -18,8 +18,10 @@
 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::{ArrowLink, ArrowLinkSize, IconBlock, ValuePropCard};
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_test::*;
 use web_sys::HtmlElement;
@@ -126,3 +128,143 @@ fn header_logo_is_wrapped_in_home_anchor() {
         "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!");
+}

From f6ded7c1cf998cc6572d4c68f6fc6f6616c86891 Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:41:34 -0700
Subject: [PATCH 08/13] t34: Extract <TwoColumnIntro> and <LabeledSection>
 molecules

Two intro layouts shared a "stack-on-mobile, two-columns-on-md+"
shape: the projects-page hero (System Firmware Domains) and every
project introduction hero. Both also rendered a recurring
`<Mono>{LABEL}</Mono>` + body block (WHAT / WHY / WHO).

* New `ui/two_column_intro.rs` -- `<TwoColumnIntro left=.. right=.. />`
  bakes in the [\Section\] shell, the responsive flex row, and the
  `mt-8 md:mt-0` mobile-spacing on the right column. Slot props
  use [\ViewFnOnce\] so callers pass plain `|| view! { ... }`
  closures instead of boxed children.
* New `ui/labeled_section.rs` -- `<LabeledSection label="WHAT">..</LabeledSection>`
  emits a Mono label followed by the supplied body content, removing
  the manual Mono+body pairing at every call site.

Migrated:
* `projects_component.rs` -- the System Firmware Domains hero row
  is now a single `<TwoColumnIntro>` + two `<LabeledSection>`s.
* `project_introduction.rs` -- WHAT / WHY / WHO blocks now use
  `<LabeledSection>`.

t38-mandate honored: two new wasm tests in `tests/wasm.rs`:
* `two_column_intro_places_left_and_right_in_separate_columns`
  -- asserts the row has exactly two children, the slots land in
  the correct one, and the right column carries the `mt-8` mobile
  spacing.
* `labeled_section_renders_uppercase_label_then_children` --
  asserts source-order (label before body) and label presence.

`cargo test`: 40 pass. `wasm-pack test --headless --firefox`:
14 pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Cargo.toml                             |  5 ++-
 index.html                             |  2 +-
 src/components/project_introduction.rs | 25 ++++++-----
 src/components/projects_component.rs   | 42 +++++++++++--------
 src/components/ui/labeled_section.rs   | 15 +++++++
 src/components/ui/mod.rs               |  4 ++
 src/components/ui/two_column_intro.rs  | 44 +++++++++++++++++++
 tests/wasm.rs                          | 58 +++++++++++++++++++++++++-
 8 files changed, 163 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ui/labeled_section.rs
 create mode 100644 src/components/ui/two_column_intro.rs

diff --git a/Cargo.toml b/Cargo.toml
index ab0f42d..842e6b3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -18,4 +18,7 @@ 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..20ca348 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     <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 />
+    <link data-trunk rel="rust" data-wasm-opt="z" 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/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 9babadd..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::{ArrowLink, 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">
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 afe3d69..57993f5 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -28,10 +28,12 @@ mod container;
 mod grid;
 mod heading;
 mod icon_block;
+mod labeled_section;
 mod link;
 mod mono;
 mod stack;
 mod text;
+mod two_column_intro;
 mod value_prop_card;
 
 pub use arrow_link::{ArrowLink, ArrowLinkSize};
@@ -40,10 +42,12 @@ pub use container::Container;
 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 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.
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/tests/wasm.rs b/tests/wasm.rs
index 54273b2..e34c063 100644
--- a/tests/wasm.rs
+++ b/tests/wasm.rs
@@ -21,7 +21,7 @@ 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::{ArrowLink, ArrowLinkSize, IconBlock, ValuePropCard};
+use odp::components::ui::{ArrowLink, ArrowLinkSize, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard};
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_test::*;
 use web_sys::HtmlElement;
@@ -268,3 +268,59 @@ fn closing_columns_section_renders_both_columns() {
     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");
+}

From 4e6fe9f59e0907851ecdae0833c525e9054f120f Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:43:44 -0700
Subject: [PATCH 09/13] t35: Extract <DocLinkItem> molecule

Documentation footer rendered each link as `<li><ArrowLink size=Large external=link.external .../></li>`. Hoist into `ui/doc_link_item.rs` so the wrapper-li shape lives in one place and any future "list of brand links" surface (e.g. the announcements card in t36) can reuse it without re-deriving the size + li wrapping rules.

Migrated `DocumentationTraining` to use `<DocLinkItem href title external />`.

t38-mandate: two new wasm tests in `tests/wasm.rs`:
* `doc_link_item_external_renders_li_with_arrow_link` -- external href produces `<li>` containing an anchor with `target=_blank` and the title text.
* `doc_link_item_internal_uses_router_anchor` -- internal href produces an anchor without `target`, wrapped in `<Router>` so `leptos_router::A` has its context.

`cargo test`: 40 pass. `wasm-pack test --headless --firefox`: 16 pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/documentation_training.rs | 13 +------
 src/components/ui/doc_link_item.rs       | 22 +++++++++++
 src/components/ui/mod.rs                 |  2 +
 tests/wasm.rs                            | 47 +++++++++++++++++++++++-
 4 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ui/doc_link_item.rs

diff --git a/src/components/documentation_training.rs b/src/components/documentation_training.rs
index beb9f40..5a02001 100644
--- a/src/components/documentation_training.rs
+++ b/src/components/documentation_training.rs
@@ -1,6 +1,4 @@
-use crate::components::ui::{
-    ArrowLink, ArrowLinkSize, Heading, HeadingLevel, IconBlock, IconBlockSize, Text, TextSize,
-};
+use crate::components::ui::{DocLinkItem, Heading, HeadingLevel, IconBlock, IconBlockSize, Text, TextSize};
 use leptos::prelude::*;
 
 #[derive(Clone)]
@@ -61,14 +59,7 @@ pub fn DocumentationTraining(#[prop(default = DEFAULT_DOC_LINKS.to_vec())] links
                     .into_iter()
                     .map(|link| {
                         view! {
-                            <li>
-                                <ArrowLink
-                                    href=link.href
-                                    title=link.title
-                                    size=ArrowLinkSize::Large
-                                    external=link.external
-                                />
-                            </li>
+                            <DocLinkItem href=link.href title=link.title external=link.external />
                         }
                     })
                     .collect_view()}
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/mod.rs b/src/components/ui/mod.rs
index 57993f5..46d965b 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -25,6 +25,7 @@
 mod arrow_link;
 mod button;
 mod container;
+mod doc_link_item;
 mod grid;
 mod heading;
 mod icon_block;
@@ -39,6 +40,7 @@ mod value_prop_card;
 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};
diff --git a/tests/wasm.rs b/tests/wasm.rs
index e34c063..d9cf034 100644
--- a/tests/wasm.rs
+++ b/tests/wasm.rs
@@ -21,7 +21,9 @@ 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::{ArrowLink, ArrowLinkSize, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard};
+use odp::components::ui::{
+    ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard,
+};
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_test::*;
 use web_sys::HtmlElement;
@@ -324,3 +326,46 @@ fn labeled_section_renders_uppercase_label_then_children() {
     // 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"
+    );
+}

From 28c419e80959bfdfd3829c5d786c0a5f9a88fd7a Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:51:33 -0700
Subject: [PATCH 10/13] t36: Extract <AnnouncementCard> +
 src/data/announcements.rs

Two coupled cleanups for the announcements page:

* New `src/data/announcements.rs` -- `Announcement` struct
  (slug / link_label / title) and an `ANNOUNCEMENTS` slice as
  the canonical source of announcement metadata. Also exposes
  `index_of(slug) -> Option<usize>` so the URL `?id=` lookup
  doesn't have to re-implement linear search at the call site.
  Three host-side unit tests cover slug uniqueness and index_of.

* New `ui/announcement_card.rs` -- `<AnnouncementCard title=>..</>`
  bakes in the styled detail-panel wrapper (responsive padding,
  `h2` title row, `p2` body) so the page no longer has to spell
  out the typography classes inline.

* Refactored `pages/announcements.rs`:
  - Imports the data module instead of defining the announcement
    list inline.
  - Renders each detail panel via `<AnnouncementCard>`.
  - Extracted `slug_from_query()` so the `?id=` parsing has
    a name and is no longer entangled with the effect closure.
  - Effect now uses `index_of()` to convert slug -> index.

t38-mandate: one new wasm test in `tests/wasm.rs` --
`announcement_card_renders_title_and_body` asserts the title is
present, the body children render, and the title precedes the body
in source order.

`cargo test`: 43 pass (3 new in announcements.rs).
`wasm-pack test --headless --firefox`: 17 pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/ui/announcement_card.rs | 19 ++++++
 src/components/ui/mod.rs               |  2 +
 src/data/announcements.rs              | 58 +++++++++++++++++
 src/data/mod.rs                        |  1 +
 src/pages/announcements.rs             | 89 +++++++++++++-------------
 tests/wasm.rs                          | 30 ++++++++-
 6 files changed, 152 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/announcement_card.rs
 create mode 100644 src/data/announcements.rs

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/mod.rs b/src/components/ui/mod.rs
index 46d965b..1d3124d 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -22,6 +22,7 @@
 //! Remove it once every primitive is in active use.
 #![allow(dead_code, unused_imports)]
 
+mod announcement_card;
 mod arrow_link;
 mod button;
 mod container;
@@ -37,6 +38,7 @@ 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;
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/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/tests/wasm.rs b/tests/wasm.rs
index d9cf034..0dc047d 100644
--- a/tests/wasm.rs
+++ b/tests/wasm.rs
@@ -22,7 +22,7 @@ use odp::components::landing::{ClosingColumnsSection, HeroSection, ProjectsSecti
 use odp::components::team_hero::TeamHero;
 use odp::components::themed_icon::ThemedIcon;
 use odp::components::ui::{
-    ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard,
+    AnnouncementCard, ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard,
 };
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_test::*;
@@ -369,3 +369,31 @@ fn doc_link_item_internal_uses_router_anchor() {
         "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"
+    );
+}

From db5f3ccf328740ee3029871a93eacc21117d45ea Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 12:55:42 -0700
Subject: [PATCH 11/13] t37: cross-project tab strip on each project page

Add a horizontal <ProjectTabs> nav rendered between the project
hero and the repository graph on each of the three project pages
(/boot-firmware, /embedded-controller, /windows-ec-services). The
active tab carries aria-current="page" and is bolded; the other
two tabs are plain router links to the sibling project pages, so
visitors can hop directly between projects without backing out
to /projects.

ProjectCopy gains short_label and route fields so the tabs derive
their links and labels from the existing data module rather than
hard-coding strings in the component.

Tests: two new wasm-bindgen tests (tabs render exactly three
anchors with the correct hrefs and aria-current; the active marker
follows the active prop) plus three host unit tests on the data
mapping.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/ui/mod.rs          |   2 +
 src/components/ui/project_tabs.rs | 107 ++++++++++++++++++++++++++++++
 src/data/projects.rs              |  10 +++
 src/pages/boot_firmware.rs        |   2 +
 src/pages/embedded_controller.rs  |   2 +
 src/pages/unified_ec_services.rs  |   2 +
 tests/wasm.rs                     |  72 +++++++++++++++++++-
 7 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/project_tabs.rs

diff --git a/src/components/ui/mod.rs b/src/components/ui/mod.rs
index 1d3124d..146e228 100644
--- a/src/components/ui/mod.rs
+++ b/src/components/ui/mod.rs
@@ -33,6 +33,7 @@ mod icon_block;
 mod labeled_section;
 mod link;
 mod mono;
+mod project_tabs;
 mod stack;
 mod text;
 mod two_column_intro;
@@ -49,6 +50,7 @@ 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;
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/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/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
index 0dc047d..2a4e335 100644
--- a/tests/wasm.rs
+++ b/tests/wasm.rs
@@ -22,7 +22,8 @@ use odp::components::landing::{ClosingColumnsSection, HeroSection, ProjectsSecti
 use odp::components::team_hero::TeamHero;
 use odp::components::themed_icon::ThemedIcon;
 use odp::components::ui::{
-    AnnouncementCard, ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, TwoColumnIntro, ValuePropCard,
+    AnnouncementCard, ArrowLink, ArrowLinkSize, DocLinkItem, IconBlock, LabeledSection, ProjectId, ProjectTabs,
+    TwoColumnIntro, ValuePropCard,
 };
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_test::*;
@@ -397,3 +398,72 @@ fn announcement_card_renders_title_and_body() {
         "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}"
+    );
+}

From e2f32e580cd980dcc5fe6aa2970db814fc7bb2ed Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 13:00:24 -0700
Subject: [PATCH 12/13] build: enable bulk-memory in release wasm-opt

	runk build --release failed with a flood of wasm-validator errors
along the lines of:

    [wasm-validator error in function NNNN] unexpected false:
    memory.copy operations require bulk memory operations
    [--enable-bulk-memory-opt]

Trunk's bundled wasm-opt (binaryen v123) does not enable the
bulk-memory feature by default, but rustc 1.82+ (and several of our
dependencies) emit `memory.copy` instructions, so wasm-opt rejects
the staged wasm before it can be optimised.

Forward `--enable-bulk-memory` and `--enable-nontrapping-float-to-int`
to wasm-opt via Trunk's `data-wasm-opt-params` attribute on the
`rust` link in `index.html`. These are the same target features
the rustc wasm32 target enables, so the optimiser now accepts the
input and the release pipeline succeeds.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 index.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 20ca348..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-keep-debug="false" 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>

From 21248212f1ccec018360b8bf7bfb8a8543fc333c Mon Sep 17 00:00:00 2001
From: Felipe Balbi <felipe.balbi@microsoft.com>
Date: Fri, 15 May 2026 13:10:06 -0700
Subject: [PATCH 13/13] Run dos2unix

---
 .../landing/closing_columns_section.rs        | 64 +++++++-------
 src/components/landing/hero_section.rs        | 56 ++++++------
 src/components/landing/mod.rs                 | 32 +++----
 src/components/landing/projects_section.rs    | 88 +++++++++----------
 .../landing/value_proposition_section.rs      | 76 ++++++++--------
 5 files changed, 158 insertions(+), 158 deletions(-)

diff --git a/src/components/landing/closing_columns_section.rs b/src/components/landing/closing_columns_section.rs
index b2e6a44..9be48fa 100644
--- a/src/components/landing/closing_columns_section.rs
+++ b/src/components/landing/closing_columns_section.rs
@@ -1,32 +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>
-    }
-}
+//! 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
index b24a30a..cbee3bb 100644
--- a/src/components/landing/hero_section.rs
+++ b/src/components/landing/hero_section.rs
@@ -1,28 +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>
-    }
-}
+//! 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
index d155a16..8604f93 100644
--- a/src/components/landing/mod.rs
+++ b/src/components/landing/mod.rs
@@ -1,16 +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;
+//! 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
index fa31831..67c48b4 100644
--- a/src/components/landing/projects_section.rs
+++ b/src/components/landing/projects_section.rs
@@ -1,44 +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>
-    }
-}
+//! 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
index 3a2bd60..8473b4b 100644
--- a/src/components/landing/value_proposition_section.rs
+++ b/src/components/landing/value_proposition_section.rs
@@ -1,38 +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>
-    }
-}
+//! 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>
+    }
+}