feat: add promotional banner for Chinese locale pages

- Blue-purple gradient banner linking to frontend interview course
- Only visible on zh-Hans/zh-Hant pages, hidden on English
- Dismissible per session via sessionStorage
- WCAG AA compliant contrast, keyboard accessible
- Responsive layout adjustments for mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: childrentime

packages/website-astro/src/components/Banner.astro

@@ -0,0 +1,129 @@
+---
+import { type Locale } from '../i18n/translations'
+
+interface Props {
+  locale?: Locale
+}
+
+const { locale = 'en' } = Astro.props
+
+const showBanner = locale === 'zh-Hans' || locale === 'zh-Hant'
+
+const text = locale === 'zh-Hant'
+  ? '前端面試秘籍 — 系統化面試準備課程'
+  : '前端面试秘籍 — 系统化面试准备课程'
+
+const cta = '立即查看'
+---
+
+{showBanner && (
+  <div class="top-banner" id="top-banner">
+    <a href="https://jingtongit.com/courses/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E7%A7%98%E7%B1%8D" target="_blank" rel="noopener">
+      <span class="top-banner-text">{text}</span>
+      <span class="top-banner-cta">{cta} &rarr;</span>
+    </a>
+    <button class="top-banner-close" id="top-banner-close" aria-label="关闭">&times;</button>
+  </div>
+)}
+
+<style>
+  .top-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--banner-h);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #1d4ed8, #4338ca, #6d28d9);
+    color: #fff;
+    font-size: 0.82rem;
+    z-index: 101;
+  }
+  .top-banner a {
+    color: #fff;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .top-banner a:hover .top-banner-cta {
+    background: rgba(255,255,255,0.3);
+  }
+  .top-banner a:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  .top-banner-text {
+    font-weight: 500;
+  }
+  .top-banner-cta {
+    font-weight: 700;
+    background: rgba(255,255,255,0.15);
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 0.78rem;
+    transition: background 0.15s;
+  }
+  .top-banner-close {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: rgba(255,255,255,0.7);
+    font-size: 1.1rem;
+    cursor: pointer;
+    min-width: 36px;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+  .top-banner-close:hover {
+    color: #fff;
+    background: rgba(255,255,255,0.1);
+  }
+  .top-banner-close:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: -2px;
+  }
+  .top-banner.hidden {
+    display: none;
+  }
+
+  @media (max-width: 480px) {
+    .top-banner {
+      font-size: 0.74rem;
+      padding: 0 40px 0 8px;
+    }
+    .top-banner-cta {
+      font-size: 0.7rem;
+      padding: 2px 6px;
+    }
+  }
+</style>
+
+<script is:inline>
+  (function() {
+    if (sessionStorage.getItem('banner-closed')) {
+      var banner = document.getElementById('top-banner');
+      if (banner) {
+        banner.classList.add('hidden');
+        document.documentElement.style.setProperty('--banner-h', '0px');
+      }
+    }
+    document.getElementById('top-banner-close')?.addEventListener('click', function() {
+      var banner = document.getElementById('top-banner');
+      if (banner) {
+        banner.classList.add('hidden');
+        document.documentElement.style.setProperty('--banner-h', '0px');
+        sessionStorage.setItem('banner-closed', '1');
+      }
+    });
+  })();
+</script>

packages/website-astro/src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css'
+import Banner from '../components/Banner.astro'
 
 import type { Locale } from '../i18n/translations'
 
@@ -174,6 +175,11 @@ const structuredData = {
     (function(){
       const t = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
       document.documentElement.setAttribute('data-theme', t);
+      var p = window.location.pathname;
+      var isCN = p.startsWith('/zh-Hans') || p.startsWith('/zh-Hant');
+      if (!isCN || sessionStorage.getItem('banner-closed')) {
+        document.documentElement.style.setProperty('--banner-h', '0px');
+      }
     })();
   </script>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -185,6 +191,7 @@ const structuredData = {
   <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" /></noscript>
 </head>
 <body>
+  <Banner locale={locale} />
   <slot />
   <script is:inline src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
   <script is:inline>

packages/website-astro/src/styles/global.css

@@ -31,6 +31,7 @@
   /* Sidebar */
   --sidebar-w: 260px;
   --navbar-h: 56px;
+  --banner-h: 36px;
 
   /* Spacing (4pt grid) */
   --sp-1: 4px;
@@ -79,7 +80,7 @@ html {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   scroll-behavior: smooth;
-  scroll-padding-top: calc(var(--navbar-h) + 24px);
+  scroll-padding-top: calc(var(--navbar-h) + var(--banner-h) + 24px);
 }
 
 body {
@@ -98,7 +99,7 @@ a:hover {
 /* --- Navbar --- */
 .navbar {
   position: fixed;
-  top: 0;
+  top: var(--banner-h);
   left: 0;
   right: 0;
   height: var(--navbar-h);
@@ -140,15 +141,15 @@ a:hover {
 
 /* --- Layout --- */
 .page-shell {
-  padding-top: var(--navbar-h);
+  padding-top: calc(var(--navbar-h) + var(--banner-h));
   display: flex;
   min-height: 100dvh;
 }
 
 /* --- Sidebar --- */
 .sidebar {
   position: fixed;
-  top: var(--navbar-h);
+  top: calc(var(--navbar-h) + var(--banner-h));
   left: 0;
   bottom: 0;
   width: var(--sidebar-w);
@@ -229,10 +230,10 @@ a:hover {
 /* --- Table of Contents (right sidebar) --- */
 .toc {
   position: sticky;
-  top: var(--navbar-h);
+  top: calc(var(--navbar-h) + var(--banner-h));
   flex-shrink: 0;
   width: 220px;
-  height: calc(100dvh - var(--navbar-h));
+  height: calc(100dvh - var(--navbar-h) - var(--banner-h));
   overflow-y: auto;
   padding: var(--sp-8) var(--sp-5) var(--sp-8) var(--sp-4);
   font-size: 0.8rem;