feat(home): upgrade hero with lightbox banner, infra stats grid, tech pills, and category shortcuts

src/pages/index.astro

@@ -32,7 +32,7 @@ const featuredMetrics: Record<string, string> = {
 
 <BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
   <section class="hero">
-    <div class="hero-content">
+    <div class="hero-intro">
       <div class="hero-id">
         <picture>
           <source srcset={SITE.photo.smallWebp} type="image/webp" />
@@ -53,32 +53,90 @@ const featuredMetrics: Record<string, string> = {
         platform, CI/CD, workflow automation and this blog. I write up what broke, what the
         evidence said, and how I fixed it.
       </p>
-      <p class="hero-cta">
+      <div class="hero-pills" aria-label="Core tech stack">
+        <span class="hero-pills-label">Stack:</span>
+        <a class="tech-pill" href="/tags/docker/">Docker</a>
+        <a class="tech-pill" href="/tags/self-hosting/">Self-Hosting</a>
+        <a class="tech-pill" href="/tags/n8n/">n8n</a>
+        <a class="tech-pill" href="/tags/ai/">Local GPU AI</a>
+        <a class="tech-pill" href="/tags/python/">Python</a>
+        <a class="tech-pill" href="/tags/php/">PHP</a>
+        <a class="tech-pill" href="/tags/security/">Security</a>
+      </div>
+    </div>
+
+    <div class="hero-visual">
+      <button
+        type="button"
+        class="hero-banner-card"
+        onclick="document.getElementById('arch-lightbox')?.showModal()"
+        aria-label="View full architecture diagram"
+      >
+        <picture>
+          <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
+          <img
+            class="hero-banner-img"
+            src="/images/hero-banner.jpg"
+            alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
+            width="1024"
+            height="572"
+            loading="eager"
+            fetchpriority="high"
+            decoding="async"
+          />
+        </picture>
+        <span class="hero-banner-zoom-badge">🔍 View full architecture</span>
+      </button>
+
+      <div class="hero-infra-grid" aria-label="Infrastructure stats">
+        <div class="infra-stat-card">
+          <div class="infra-stat-val">162</div>
+          <div class="infra-stat-label">Containers in Prod</div>
+        </div>
+        <div class="infra-stat-card">
+          <div class="infra-stat-val">3 Hosts</div>
+          <div class="infra-stat-label">Unraid · Synology · VPS</div>
+        </div>
+        <div class="infra-stat-card">
+          <div class="infra-stat-val">78</div>
+          <div class="infra-stat-label">Compose Stacks</div>
+        </div>
+        <div class="infra-stat-card">
+          <div class="infra-stat-val">91</div>
+          <div class="infra-stat-label">Bilingual Write-ups</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hero-actions">
+      <div class="hero-cta">
         <a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
         <a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
         <a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
-      </p>
+      </div>
       <p class="hero-note">
         {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
       </p>
     </div>
-    <div class="hero-banner-card">
-      <picture>
-        <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
-        <img
-          class="hero-banner-img"
-          src="/images/hero-banner.jpg"
-          alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
-          width="1024"
-          height="572"
-          loading="eager"
-          fetchpriority="high"
-          decoding="async"
-        />
-      </picture>
-    </div>
   </section>
 
+  <dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
+    <div class="arch-lightbox-inner">
+      <button type="button" class="arch-lightbox-close" aria-label="Close" onclick="this.closest('dialog').close()">&times;</button>
+      <img
+        src="/images/hero-banner-2x.webp"
+        alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
+        width="2048"
+        height="1144"
+        loading="lazy"
+      />
+      <div class="arch-lightbox-caption">
+        <span>From Code to Production — Systems Architecture &amp; DevOps Infrastructure</span>
+        <span class="arch-lightbox-hint">ESC / Click outside to close</span>
+      </div>
+    </div>
+  </dialog>
+
   <section id="featured">
     <h2>Featured</h2>
   <div class="featured-bento-grid">
@@ -120,7 +178,16 @@ const featuredMetrics: Record<string, string> = {
   </section>
 
   <section>
-    <h2>Latest posts</h2>
+    <div class="section-head-with-nav">
+      <h2>Latest posts</h2>
+      <div class="section-nav-pills" aria-label="Category shortcuts">
+        <a class="section-nav-pill" href="/categories/case-studies/">case-studies</a>
+        <a class="section-nav-pill" href="/categories/devops/">devops</a>
+        <a class="section-nav-pill" href="/categories/tutorials/">tutorials</a>
+        <a class="section-nav-pill" href="/categories/notes/">notes</a>
+        <a class="section-nav-pill section-nav-all" href="/posts/">All {posts.length} →</a>
+      </div>
+    </div>
     {posts.length === 0 ? (
       <p><em>No posts yet — check back soon.</em></p>
     ) : (