From 546acb868ab2c612154e2fd0c22b76c11a5439e1 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Sun, 3 May 2026 14:20:39 +0800
Subject: [PATCH] feat: comprehensive frontend design improvements

- Show code card on mobile (was hidden)
- Fix blog post detail page hero styling
- Remove duplicate Blog link from footer
- Fix language cards grid: 5 cols only on xl
- Consistent supporter logos (white bg, no dark:invert)
- Fix CTA section dark mode contrast
- Mobile nav drawer opens from left
- Update Ronald Tse bio (Annotated EXPRESS, SUMA framework)
- Add breadcrumbs to all pages (about, membership, privacy, tos,
  supporters, leadership, standards, learn, blog, languages)
---
 content/people/ronald-tse.adoc      | 10 +++----
 src/components/layout/TheFooter.vue |  1 -
 src/components/layout/TheHeader.vue |  6 ++--
 src/pages/about.vue                 |  5 ++++
 src/pages/blog/[slug].vue           | 45 +++++++++++++++--------------
 src/pages/blog/index.vue            |  5 ++++
 src/pages/index.vue                 | 22 +++++---------
 src/pages/languages/index.vue       |  5 ++++
 src/pages/leadership/index.vue      |  9 ++++--
 src/pages/learn/index.vue           |  5 ++++
 src/pages/membership.vue            |  5 ++++
 src/pages/privacy.vue               |  5 ++++
 src/pages/standards/index.vue       |  5 ++++
 src/pages/supporters/index.vue      |  5 ++++
 src/pages/tos.vue                   |  5 ++++
 15 files changed, 92 insertions(+), 46 deletions(-)

diff --git a/content/people/ronald-tse.adoc b/content/people/ronald-tse.adoc
index 74196b8..e4c1b51 100644
--- a/content/people/ronald-tse.adoc
+++ b/content/people/ronald-tse.adoc
@@ -7,14 +7,14 @@ categories: founders
 
 == Secretary, EXPRESS Language Foundation
 
-Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation,
-managing organizational operations and administrative functions.
+Ronald Tse is a founding member and Secretary of the EXPRESS Language Foundation.
+He is the Founder and CEO of Ribose.
 
 == Contributions
 
-Tse has been actively involved in open source and open standards communities,
-bringing experience in governance, community building, and technical standards
-development to the foundation.
+* Project Leader for Annotated EXPRESS
+* Designer of the SUMA framework (STEP Unified Model Architecture), used to publish the ISO 10303 STEP Resource Library and Application Protocols
+* Convener of ISO/TC 154/WG 5, expert in ISO/TC 184/SC 4/WG 13 and multiple other ISO committees
 
 == At ELF
 
diff --git a/src/components/layout/TheFooter.vue b/src/components/layout/TheFooter.vue
index 7bbbb02..fe7b845 100644
--- a/src/components/layout/TheFooter.vue
+++ b/src/components/layout/TheFooter.vue
@@ -59,7 +59,6 @@ import { siteData } from '@/data/site'
             <li><RouterLink to="/leadership" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Leadership</RouterLink></li>
             <li><RouterLink to="/supporters" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Supporters</RouterLink></li>
             <li><RouterLink to="/membership" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Membership</RouterLink></li>
-            <li><RouterLink to="/blog" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink></li>
             <li><RouterLink to="/privacy" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Privacy</RouterLink></li>
             <li><RouterLink to="/tos" class="text-gray-600 dark:text-gray-400 hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Terms of Service</RouterLink></li>
           </ul>
diff --git a/src/components/layout/TheHeader.vue b/src/components/layout/TheHeader.vue
index 9bf62ef..13b53ce 100644
--- a/src/components/layout/TheHeader.vue
+++ b/src/components/layout/TheHeader.vue
@@ -166,13 +166,13 @@ onMounted(() => {
           <div class="fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm" @click="closeMobile" />
           <Transition
             enter-active-class="transition duration-300"
-            enter-from-class="translate-x-full"
+            enter-from-class="-translate-x-full"
             enter-to-class="translate-x-0"
             leave-active-class="transition duration-200"
             leave-from-class="translate-x-0"
-            leave-to-class="translate-x-full"
+            leave-to-class="-translate-x-full"
           >
-            <div id="mobile-nav" class="fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
+            <div id="mobile-nav" class="fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-navy shadow-2xl">
               <div class="flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
                 <span class="font-serif font-bold text-gray-900 dark:text-white">Navigation</span>
                 <button @click="closeMobile" class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-md min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Close menu">
diff --git a/src/pages/about.vue b/src/pages/about.vue
index d7bf0d8..25cca50 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'about')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'About' }}</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">About</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'About' }}</h1>
       </div>
diff --git a/src/pages/blog/[slug].vue b/src/pages/blog/[slug].vue
index 1cf90bb..ebf310e 100644
--- a/src/pages/blog/[slug].vue
+++ b/src/pages/blog/[slug].vue
@@ -13,32 +13,35 @@ function formatDate(date: string) {
 </script>
 
 <template>
-  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+  <div>
     <template v-if="content">
-      <!-- Breadcrumb -->
-      <nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
-        <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
-        <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
-        <RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
-        <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
-        <span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
-      </nav>
+      <!-- Hero -->
+      <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
+        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+          <nav class="text-sm text-gray-400 dark:text-gray-500 mb-8">
+            <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+            <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
+            <RouterLink to="/blog" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Blog</RouterLink>
+            <span class="mx-2 text-gray-300 dark:text-gray-600">/</span>
+            <span class="text-gray-600 dark:text-gray-300">{{ content.title }}</span>
+          </nav>
 
-      <!-- Meta -->
-      <div class="mb-8">
-        <div class="flex flex-wrap items-center gap-2 mb-4">
-          <span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
-          <span v-for="cat in content.categories" :key="cat" class="text-[0.65rem] px-2 py-0.5 rounded-full bg-elf-blue/8 dark:bg-elf-blue/8 text-elf-blue dark:text-elf-blue font-medium tracking-wide">
-            {{ cat }}
-          </span>
-        </div>
-        <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
-        <div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          By {{ content.authors.map((a) => a.name).join(', ') }}
+          <div class="flex flex-wrap items-center gap-2 mb-4">
+            <span v-if="content.date" class="font-mono text-xs text-gray-400 dark:text-gray-500">{{ formatDate(content.date) }}</span>
+            <span v-for="cat in content.categories" :key="cat" class="text-[0.65rem] px-2 py-0.5 rounded-full bg-elf-blue/8 dark:bg-elf-blue/8 text-elf-blue dark:text-elf-blue font-medium tracking-wide">
+              {{ cat }}
+            </span>
+          </div>
+          <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">{{ content.title }}</h1>
+          <div v-if="content.authors?.length" class="mt-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            By {{ content.authors.map((a) => a.name).join(', ') }}
+          </div>
         </div>
       </div>
 
-      <AsciiDocContent :html="content.body" />
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
+        <AsciiDocContent :html="content.body" />
+      </div>
     </template>
     <div v-else class="text-center py-20">
       <p class="text-2xl font-serif font-bold text-gray-900 dark:text-white">Post not found</p>
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index 3ce1f7b..73dc65c 100644
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -15,6 +15,11 @@ function formatDate(date: string) {
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-12">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Blog</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">News</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Blog</h1>
         <p class="mt-3 text-gray-500 dark:text-gray-400">News and updates from the EXPRESS Language Foundation</p>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index fe07cfe..be131bf 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -197,7 +197,7 @@ const milestones = [
           </div>
 
           <!-- EXPRESS code card with typewriter -->
-          <div class="hidden lg:flex items-start justify-center w-[420px] shrink-0 mt-10">
+          <div class="flex items-start justify-center w-full lg:w-[420px] shrink-0 mt-8 lg:mt-10">
             <div class="w-full rounded-2xl border border-gray-200/60 dark:border-gray-700/40 bg-white dark:bg-navy-light shadow-2xl shadow-elf-blue/5 dark:shadow-black/20 overflow-hidden">
               <div class="flex items-center gap-2 px-4 py-2.5 border-b border-gray-100 dark:border-gray-700/40 bg-gray-50/80 dark:bg-navy">
                 <span class="w-2.5 h-2.5 rounded-full bg-red-400/70" />
@@ -229,7 +229,7 @@ const milestones = [
           </div>
         </AnimatedSection>
 
-        <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
+        <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5">
           <AnimatedSection v-for="(lang, i) in languages" :key="lang.name" :style="{ transitionDelay: `${i * 60}ms` }">
             <RouterLink :to="`/languages/${lang.slug}`" class="block rounded-xl border bg-white dark:bg-navy-light p-6 transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" :style="{ borderColor: `${lang.color}33` }">
               <img :src="lang.icon" :alt="lang.name" class="h-8 w-auto mb-3" />
@@ -291,16 +291,10 @@ const milestones = [
           </div>
         </AnimatedSection>
         <AnimatedSection>
-          <div class="flex flex-wrap gap-8 items-center justify-center">
-            <img src="/images/supporters/supporter-boeing.svg" alt="Boeing" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-md.svg" alt="McDonnell Douglas" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-ge.svg" alt="General Electric" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-nist.svg" alt="NIST" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-pdes.png" alt="PDES Inc." class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-steptools.svg" alt="STEP Tools" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-jotneconnect.svg" alt="Jotne EPM Technology" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-afnet.svg" alt="AFNeT Services" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
-            <img src="/images/supporters/supporter-ribose.svg" alt="Ribose" class="h-12 w-auto opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300 dark:invert dark:opacity-50 dark:hover:opacity-90" />
+          <div class="flex flex-wrap gap-6 items-center justify-center">
+            <div v-for="logo in ['supporter-boeing.svg','supporter-md.svg','supporter-ge.svg','supporter-nist.svg','supporter-pdes.png','supporter-steptools.svg','supporter-jotneconnect.svg','supporter-afnet.svg','supporter-ribose.svg']" :key="logo" class="h-14 flex items-center rounded-lg bg-white p-2">
+              <img :src="`/images/supporters/${logo}`" :alt="logo.replace('supporter-','').replace(/\.\w+$/,'')" class="max-h-10 w-auto mx-auto object-contain" />
+            </div>
           </div>
           <p class="text-center mt-8">
             <RouterLink to="/supporters" class="text-sm font-medium text-elf-blue dark:text-elf-blue hover:underline">
@@ -399,9 +393,9 @@ const milestones = [
     </section>
 
     <!-- About / CTA -->
-    <section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-navy-light">
+    <section class="relative overflow-hidden py-24 bg-elf-blue dark:bg-elf-blue-dark">
       <div class="absolute inset-0 pointer-events-none opacity-10">
-        <svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-elf-blue">
+        <svg viewBox="0 0 200 200" fill="none" class="absolute -right-20 top-0 w-96 h-96 text-white dark:text-white">
           <path d="M40 40L100 100L40 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
           <path d="M160 40L100 100L160 160" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
         </svg>
diff --git a/src/pages/languages/index.vue b/src/pages/languages/index.vue
index 64662bc..da6b7cf 100644
--- a/src/pages/languages/index.vue
+++ b/src/pages/languages/index.vue
@@ -65,6 +65,11 @@ const languages = [
     <!-- Hero section -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Languages</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Language Family</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white leading-tight">The EXPRESS Language Family</h1>
         <p class="mt-4 text-lg text-gray-500 dark:text-gray-400 max-w-2xl">
diff --git a/src/pages/leadership/index.vue b/src/pages/leadership/index.vue
index 1b58313..2705866 100644
--- a/src/pages/leadership/index.vue
+++ b/src/pages/leadership/index.vue
@@ -29,7 +29,7 @@ const officers: Person[] = [
     name: 'Ronald Tse',
     slug: 'ronald-tse',
     role: 'Secretary',
-    desc: 'Manages organizational operations and administrative functions of the foundation.',
+    desc: 'Project Leader for Annotated EXPRESS and designer of the SUMA framework (STEP Unified Model Architecture) used to publish the ISO 10303 STEP Resource Library and Application Protocols. Founder and CEO of Ribose.',
     photo: '/images/people/ronald-tse.jpg',
   },
 ]
@@ -114,7 +114,7 @@ const founders: Person[] = [
     name: 'Ronald Tse',
     slug: 'ronald-tse',
     role: 'Secretary',
-    desc: 'Manages organizational operations and administrative functions of the foundation.',
+    desc: 'Project Leader for Annotated EXPRESS and designer of the SUMA framework (STEP Unified Model Architecture) used to publish the ISO 10303 STEP Resource Library and Application Protocols. Founder and CEO of Ribose.',
     photo: '/images/people/ronald-tse.jpg',
   },
 ]
@@ -125,6 +125,11 @@ const founders: Person[] = [
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Leadership</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Organization</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Leadership &amp; Founders</h1>
         <p class="mt-4 text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">
diff --git a/src/pages/learn/index.vue b/src/pages/learn/index.vue
index 0966777..d0715c3 100644
--- a/src/pages/learn/index.vue
+++ b/src/pages/learn/index.vue
@@ -9,6 +9,11 @@ import BaseCard from '@/components/ui/BaseCard.vue'
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Learn</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Learning</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Learn EXPRESS</h1>
         <p class="mt-4 text-gray-500 dark:text-gray-400 max-w-xl leading-relaxed">
diff --git a/src/pages/membership.vue b/src/pages/membership.vue
index b2dcc6f..9fd5b5c 100644
--- a/src/pages/membership.vue
+++ b/src/pages/membership.vue
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'membership')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Membership' }}</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Join Us</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'Membership' }}</h1>
       </div>
diff --git a/src/pages/privacy.vue b/src/pages/privacy.vue
index 4f8ea0f..5e945ba 100644
--- a/src/pages/privacy.vue
+++ b/src/pages/privacy.vue
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'privacy')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Privacy Policy' }}</span>
+        </nav>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'Privacy Policy' }}</h1>
       </div>
     </div>
diff --git a/src/pages/standards/index.vue b/src/pages/standards/index.vue
index 896bf79..21bcdcf 100644
--- a/src/pages/standards/index.vue
+++ b/src/pages/standards/index.vue
@@ -33,6 +33,11 @@ const references = [
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-12">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Standards &amp; References</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Specifications</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Standards &amp; References</h1>
         <p class="mt-3 text-gray-500 dark:text-gray-400 max-w-xl">
diff --git a/src/pages/supporters/index.vue b/src/pages/supporters/index.vue
index b790527..ea72a41 100644
--- a/src/pages/supporters/index.vue
+++ b/src/pages/supporters/index.vue
@@ -71,6 +71,11 @@ const supporters: Supporter[] = [
     <!-- Hero -->
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-16">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">Supporters</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Community</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">Supporters</h1>
         <p class="mt-4 text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">
diff --git a/src/pages/tos.vue b/src/pages/tos.vue
index 9dac7a1..602789c 100644
--- a/src/pages/tos.vue
+++ b/src/pages/tos.vue
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'tos')
   <div>
     <div class="bg-gradient-to-b from-slate-50 to-white dark:from-navy dark:to-navy-light/30 pt-12 pb-8">
       <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav class="text-sm text-gray-400 dark:text-gray-500 mb-6 flex items-center gap-1.5">
+          <RouterLink to="/" class="hover:text-elf-blue dark:hover:text-elf-blue transition-colors">Home</RouterLink>
+          <span>/</span>
+          <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Terms of Service' }}</span>
+        </nav>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'Terms of Service' }}</h1>
       </div>
     </div>