From 7b55e544f589501f8686388702bfd5d7598ff36b Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Sun, 3 May 2026 16:42:34 +0800
Subject: [PATCH] fix: frontend polish round 2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make language cards fully clickable (not just 'Learn more')
- Add missing breadcrumb on references page
- Add section labels to privacy and TOS pages
- Fix people page content width (max-w-4xl → max-w-3xl)
- Enhance 404 page with EXPRESS code snippet
- Make homepage supporter logos clickable links
---
 src/pages/404.vue             | 23 +++++++++++++++++++++--
 src/pages/index.vue           |  4 ++--
 src/pages/languages/index.vue |  8 ++++----
 src/pages/people/[slug].vue   |  6 +++---
 src/pages/privacy.vue         |  1 +
 src/pages/references.vue      |  5 +++++
 src/pages/tos.vue             |  1 +
 7 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/pages/404.vue b/src/pages/404.vue
index 59f5c7e..e070766 100644
--- a/src/pages/404.vue
+++ b/src/pages/404.vue
@@ -1,7 +1,26 @@
 <template>
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
-    <p class="font-mono text-8xl text-elf-blue/20 dark:text-elf-blue/20">404</p>
-    <h1 class="mt-4 text-2xl font-serif font-bold text-gray-900 dark:text-white">Page not found</h1>
+    <div class="mx-auto max-w-md rounded-2xl border border-gray-200/60 dark:border-gray-700/40 bg-white dark:bg-navy-light shadow-xl shadow-elf-blue/5 dark:shadow-black/20 overflow-hidden mb-8">
+      <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" />
+        <span class="w-2.5 h-2.5 rounded-full bg-amber-400/70" />
+        <span class="w-2.5 h-2.5 rounded-full bg-emerald-400/70" />
+        <span class="ml-2 text-[0.7rem] font-mono text-gray-400 dark:text-gray-500">404.exp</span>
+      </div>
+      <div class="p-5 font-mono text-[0.8rem] leading-[1.8] text-left text-gray-700 dark:text-gray-300">
+        <span class="text-elf-blue dark:text-elf-blue">SCHEMA</span> NotFound;<br />
+        <br />
+        <span class="text-elf-blue dark:text-elf-blue">ENTITY</span> page;<br />
+        &nbsp;&nbsp;url : <span class="text-amber-600 dark:text-amber-400">STRING</span>;<br />
+        &nbsp;&nbsp;status : <span class="text-amber-600 dark:text-amber-400">INTEGER</span> := 404;<br />
+        &nbsp;&nbsp;<span class="text-elf-blue dark:text-elf-blue">WHERE</span><br />
+        &nbsp;&nbsp;&nbsp;&nbsp;WR1: <span class="text-emerald-600 dark:text-emerald-400">FALSE</span>;<br />
+        <span class="text-elf-blue dark:text-elf-blue">END_ENTITY</span>;<br />
+        <br />
+        <span class="text-elf-blue dark:text-elf-blue">END_SCHEMA</span>;<span class="inline-block w-[2px] h-[1.1em] bg-elf-blue dark:bg-elf-blue align-middle animate-[cursor-blink_1s_step-end_infinite]" />
+      </div>
+    </div>
+    <h1 class="text-2xl font-serif font-bold text-gray-900 dark:text-white">Page not found</h1>
     <p class="mt-2 text-gray-500 dark:text-gray-400">The page you're looking for doesn't exist.</p>
     <RouterLink to="/" class="mt-6 inline-flex items-center px-6 py-3 rounded-lg bg-elf-blue dark:bg-elf-blue text-white dark:text-navy font-medium hover:bg-elf-blue-dark dark:hover:bg-elf-blue/90 transition-colors">
       Go home
diff --git a/src/pages/index.vue b/src/pages/index.vue
index be131bf..55aaaf1 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -292,9 +292,9 @@ const milestones = [
         </AnimatedSection>
         <AnimatedSection>
           <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">
+            <RouterLink 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" to="/supporters" class="h-14 flex items-center rounded-lg bg-white p-2 hover:shadow-md transition-shadow">
               <img :src="`/images/supporters/${logo}`" :alt="logo.replace('supporter-','').replace(/\.\w+$/,'')" class="max-h-10 w-auto mx-auto object-contain" />
-            </div>
+            </RouterLink>
           </div>
           <p class="text-center mt-8">
             <RouterLink to="/supporters" class="text-sm font-medium text-elf-blue dark:text-elf-blue hover:underline">
diff --git a/src/pages/languages/index.vue b/src/pages/languages/index.vue
index da6b7cf..2a571d7 100644
--- a/src/pages/languages/index.vue
+++ b/src/pages/languages/index.vue
@@ -82,7 +82,7 @@ const languages = [
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
       <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
         <AnimatedSection v-for="(lang, i) in languages" :key="lang.id" :style="{ transitionDelay: `${i * 80}ms` }">
-          <div :class="['rounded-xl border p-6 bg-white dark:bg-navy-light hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5']" :style="{ borderColor: `${lang.color}33` }">
+          <RouterLink :to="`/languages/${lang.slug}`" class="block rounded-xl border p-6 bg-white dark:bg-navy-light hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5" :style="{ borderColor: `${lang.color}33` }">
             <div class="flex items-center gap-3 mb-4">
               <img :src="lang.icon" :alt="lang.name" class="h-10 w-auto" />
               <div>
@@ -98,11 +98,11 @@ const languages = [
                 {{ feat }}
               </li>
             </ul>
-            <RouterLink :to="`/languages/${lang.slug}`" class="inline-flex items-center text-sm font-medium transition-colors hover:underline" :style="{ color: lang.color }">
+            <span class="inline-flex items-center text-sm font-medium transition-colors" :style="{ color: lang.color }">
               Learn more
               <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-            </RouterLink>
-          </div>
+            </span>
+          </RouterLink>
         </AnimatedSection>
       </div>
 
diff --git a/src/pages/people/[slug].vue b/src/pages/people/[slug].vue
index 7e2ca2a..4d8144f 100644
--- a/src/pages/people/[slug].vue
+++ b/src/pages/people/[slug].vue
@@ -13,7 +13,7 @@ const content: ContentData | null = await useContent('people', slug)
     <template v-if="content">
       <!-- 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">
+        <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>
@@ -36,12 +36,12 @@ const content: ContentData | null = await useContent('people', slug)
         </div>
       </div>
 
-      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
+      <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="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
+    <div v-else class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
       <p class="text-2xl font-serif font-bold text-gray-900 dark:text-white">Person not found</p>
       <RouterLink to="/leadership" class="mt-4 inline-block text-elf-blue dark:text-elf-blue hover:underline">&larr; Back to Leadership</RouterLink>
     </div>
diff --git a/src/pages/privacy.vue b/src/pages/privacy.vue
index 5e945ba..494c014 100644
--- a/src/pages/privacy.vue
+++ b/src/pages/privacy.vue
@@ -14,6 +14,7 @@ const content: ContentData | null = await useContent('pages', 'privacy')
           <span>/</span>
           <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Privacy Policy' }}</span>
         </nav>
+        <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Legal</p>
         <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/references.vue b/src/pages/references.vue
index 9c19af0..578f253 100644
--- a/src/pages/references.vue
+++ b/src/pages/references.vue
@@ -9,6 +9,11 @@ const content: ContentData | null = await useContent('pages', 'references')
   <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 || 'References' }}</span>
+        </nav>
         <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Resources</p>
         <h1 class="text-3xl sm:text-4xl font-serif font-bold text-gray-900 dark:text-white">{{ content?.title || 'References' }}</h1>
       </div>
diff --git a/src/pages/tos.vue b/src/pages/tos.vue
index 602789c..d66c9aa 100644
--- a/src/pages/tos.vue
+++ b/src/pages/tos.vue
@@ -14,6 +14,7 @@ const content: ContentData | null = await useContent('pages', 'tos')
           <span>/</span>
           <span class="text-gray-700 dark:text-gray-300">{{ content?.title || 'Terms of Service' }}</span>
         </nav>
+        <p class="font-mono text-xs tracking-[0.2em] uppercase text-elf-blue dark:text-elf-blue mb-3">Legal</p>
         <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>