fix(web): resolve remaining UI/UX audit issues — text contrast, CTA unification, image localization

- Footer ICP text color #64748b → #475569 (WCAG AA)
- index.astro decorative arrows text-slate-400 → text-slate-500
- CTA.astro scoped CSS replaced with shared btn-primary-gradient/glass-card-premium
- Unsplash external images localized to /public/images/

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/CTA.astro

@@ -9,60 +9,17 @@ interface Props {
 const { title, description, href, variant = 'primary' } = Astro.props;
 ---
 
-<div class="cta">
+<div style="text-align: center;">
-  <a href={href} class:list={['button', variant]}>{title}</a>
+  <a
-  {description && <p class="description">{description}</p>}
+    href={href}
-</div>
+    class:list={[
-
+      'inline-block px-8 py-3 text-sm font-semibold no-underline rounded-full transition-all duration-300',
-<style>
+      variant === 'primary'
-  .cta {
+        ? 'btn-primary-gradient text-white'
-    text-align: center;
+        : 'glass-card-premium text-navy hover:bg-white'
-  }
+    ]}
-
+  >
-  .button {
+    {title}
-    display: inline-block;
+  </a>
-    padding: 0.75rem 2rem;
+  {description && <p class="mt-3 text-sm text-on-surface-variant">{description}</p>}
-    font-size: 0.875rem;
+</div>
-    font-weight: 600;
-    text-decoration: none;
-    border-radius: 9999px;
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    font-family: var(--font-family-inter);
-    letter-spacing: 0.03em;
-  }
-
-  .button.primary {
-    background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
-    color: #ffffff;
-    border: none;
-    box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2);
-  }
-
-  .button.primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
-    filter: brightness(1.1);
-    text-decoration: none;
-  }
-
-  .button.secondary {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(12px);
-    color: #131b2c;
-    border: 1px solid #e2e8f0;
-    box-shadow: 0 4px 12px rgba(18, 26, 43, 0.06);
-  }
-
-  .button.secondary:hover {
-    background: #ffffff;
-    transform: translateY(-1px);
-    box-shadow: 0 12px 24px rgba(18, 26, 43, 0.08);
-    text-decoration: none;
-  }
-
-  .description {
-    margin-top: 0.75rem;
-    font-size: 0.875rem;
-    color: var(--color-on-surface-variant);
-  }
-</style>

src/components/Footer.astro

@@ -25,7 +25,7 @@ const footerLinks = [
     <p style="font-size: 12px; color: #475569; text-align: center;">
       © {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.
     </p>
-    <p style="font-size: 12px; color: #64748b; text-align: center; margin-top: 8px;">
+    <p style="font-size: 12px; color: #475569; text-align: center; margin-top: 8px;">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="footer-link">冀ICP备2026016484号</a>
     </p>
   </div>

src/pages/index.astro

@@ -210,7 +210,7 @@ import Footer from '../components/Footer.astro';
 
         <!-- Arrow -->
         <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
-          <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
+          <span class="material-symbols-outlined text-slate-500 text-xl">arrow_forward</span>
         </div>
 
         <!-- Step 2 -->
@@ -226,7 +226,7 @@ import Footer from '../components/Footer.astro';
 
         <!-- Arrow -->
         <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
-          <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
+          <span class="material-symbols-outlined text-slate-500 text-xl">arrow_forward</span>
         </div>
 
         <!-- Step 3 - Elevated center -->
@@ -242,7 +242,7 @@ import Footer from '../components/Footer.astro';
 
         <!-- Arrow -->
         <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
-          <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
+          <span class="material-symbols-outlined text-slate-500 text-xl">arrow_forward</span>
         </div>
 
         <!-- Step 4 -->
@@ -258,7 +258,7 @@ import Footer from '../components/Footer.astro';
 
         <!-- Loop back arrow -->
         <div class="absolute -bottom-4 left-[6%] right-[6%] flex items-center justify-center z-0">
-          <div class="flex items-center gap-1 text-[10px] text-slate-400 font-medium tracking-widest uppercase">
+          <div class="flex items-center gap-1 text-[10px] text-slate-500 font-medium tracking-widest uppercase">
             <span class="material-symbols-outlined text-xs">replay</span>
             循环迭代
           </div>

src/pages/philosophy.astro

@@ -30,7 +30,7 @@ import Footer from '../components/Footer.astro';
       <!-- Cinematic Abstract Visual -->
       <div class="mt-24 w-full max-w-5xl mx-auto relative glass-panel rounded-2xl p-2">
         <div class="relative w-full aspect-video rounded-xl overflow-hidden bg-surface-container-high border border-white/50">
-          <img alt="Knowledge Path" width="1200" height="675" class="w-full h-full object-cover mix-blend-multiply opacity-90" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=675&fit=crop" />
+          <img alt="Knowledge Path" width="1200" height="675" class="w-full h-full object-cover mix-blend-multiply opacity-90" src="/images/knowledge-path.jpg" />
           <div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
         </div>
       </div>

src/pages/product.astro

@@ -68,7 +68,7 @@ const painPoints = [
           <div class="relative glass-card-premium rounded-[2rem] p-4 mx-auto overflow-hidden border border-white/60 shadow-2xl">
             <img
               alt="知习 产品界面展示"
-              src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=800&fit=crop"
+              src="/images/product-hero.jpg"
               width="1200" height="800"
               class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]"
             />