# Homepage Visual Difference Report ## 參考 HTML vs Localhost 審查報告 **Date:** 2026-02-10 **Reference:** `file:///Users/pukpuk/Dev/website-enchun-mgr/research/www.enchun.tw/index.html` **Localhost:** `http://localhost:4321` --- ## 🚨 關鍵差異總覽 | 項目 | 參考 HTML | Localhost | 狀態 | |------|-----------|-----------|------| | Body 背景色 | `#f2f2f2` | `#ffffff` | ❌ CRITICAL | | 字體 | Noto Sans TC 19px | Noto Sans TC 19px | ✅ PASS | | Hero Section 標題 | 64.41px white | 64.41px white | ✅ PASS | | 痛點標題階層 | H1 | H2 | ⚠️ MINOR | --- ## 1. Body 背景色 - CRITICAL 差異 ### 問題 - **參考 HTML**: `rgb(242, 242, 242)` (#f2f2f2) - **Localhost**: `rgb(255, 255, 255)` (#ffffff) - **影響**: 整個頁面的背景色不正確，導致視覺感受明顯不同 ### 根本原因 **Layout.astro** 第 21 行使用 Tailwind class `bg-background`： ```astro ``` **theme.css** 第 63 行定義： ```css --color-background: #ffffff; /* Main background */ ``` **tailwind-config.mjs** 第 91 行： ```javascript background: '#FFFFFF', ``` ### 修復方案需要修改以下 3 個檔案： 1. **apps/frontend/src/styles/theme.css** - Line 63: `--color-background: #f2f2f2;` (原為 #ffffff) 2. **packages/shared/tailwind-config.mjs** - Line 91: `background: '#F2F2F2',` (原為 #FFFFFF) 3. **apps/frontend/src/sections/HeroSection.astro** (確認 hero 本身的背景色設定) --- ## 2. Painpoint Section (您的困擾) ### 參考 HTML 結構 - 主標題: **H1** "你可能會遇到的煩惱" - 字體大小: 34.2px (1.8em) - 顏色: `rgb(6, 40, 65)` (#062841) ### Localhost 結構 - 主標題: **H2** "您的困擾" - 需要驗證字體大小和顏色是否一致 ### 差異分析 1. **標題階層差異**: 參考使用 H1，實作使用 H2 2. **標題文字**: "你可能會遇到的煩惱" vs "您的困擾" ### 修復建議確認 PainpointSection.astro 中的標題階層和文字內容是否與設計稿一致。 --- ## 3. Statistics Section (數據會說話) ### 參考 HTML 結構 - 主標題: **H1** "數據會說話" - 字體大小: 34.2px - 顏色: `rgb(6, 40, 65)` (#062841) ### Localhost 結構 - 需要確認統計數字樣式 - 需要確認是否有動畫效果 ### 截圖觀察 - 參考 HTML 統計數字顯示為 0 (可能需要載入或靜態展示) - Localhost 需要確認實作狀態 --- ## 4. Service Features Section (服務項目) ### 參考 HTML 結構 - 4 個服務項目卡片 - 每個項目包含：圖示、標題、描述 ### Localhost 結構 - 需要確認卡片樣式、間距、hover 效果 --- ## 5. Client Cases Section (客戶案例) ### 參考 HTML 結構 - 主標題: **H1** "客戶案例" - Carousel 輪播展示 - 每個案例包含：圖片、標題 (H2)、描述 ### Localhost 結構 - 需要確認 carousel 實作 - 需要確認案例資料來源 --- ## 6. CTA Section ### 參考 HTML 結構 - 標題: **H3** "準備好開始新的旅程了嗎歡迎與我們聯絡" - 按鈕: "預約諮詢 phone_callback" - 連結: heyform 表單 ### Localhost 結構 - 需要確認按鈕樣式 - 需要確認連結正確性 --- ## 修復優先級 ### 🔴 P0 - Critical (立即修復) 1. **Body 背景色**: #f2f2f2 - 檔案: `theme.css`, `tailwind-config.mjs` ### 🟠 P1 - High (優先修復) 1. **Painpoint 標題階層**: H1 vs H2 - 檔案: `PainpointSection.astro` ### 🟡 P2 - Medium (盡快修復) 1. **Statistics 標題階層**: H1 - 檔案: `StatisticsSection.astro` 2. **Client Cases 標題階層**: H1 - 檔案: `ClientCasesSection.astro` --- ## 截圖對照 | Section | 參考 HTML | Localhost | |---------|-----------|-----------| | Hero | [reference-hero.png](reference-hero.png) | [localhost-hero.png](localhost-hero.png) | | Painpoint | [reference-painpoint.png](reference-painpoint.png) | [localhost-painpoint.png](localhost-painpoint.png) | | Statistics | [reference-statistics.png](reference-statistics.png) | [localhost-statistics.png](localhost-statistics.png) | | Services | [reference-services.png](reference-services.png) | [localhost-services.png](localhost-services.png) | | Clients | [reference-clients.png](reference-clients.png) | [localhost-clients.png](localhost-clients.png) | --- ## 下一步行動 1. ✅ **更新 CSS 變數** - 修改 theme.css 和 tailwind-config.mjs 2. ✅ **驗證標題階層** - 檢查各 section 的標題使用 3. ✅ **重新截圖驗證** - 修復後重新截圖比對 --- ## 相關檔案 - `/apps/frontend/src/layouts/Layout.astro` - `/apps/frontend/src/styles/theme.css` - `/packages/shared/tailwind-config.mjs` - `/apps/frontend/src/sections/HeroSection.astro` - `/apps/frontend/src/sections/PainpointSection.astro` - `/apps/frontend/src/sections/StatisticsSection.astro` - `/apps/frontend/src/sections/ServiceFeatures.astro` - `/apps/frontend/src/sections/ClientCasesSection.astro` - `/apps/frontend/src/sections/CTASection.astro`