pukpuklouis/website-enchun-mgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
df1efb488159cdfceaf110192a4900b628e29ff8
website-enchun-mgr/screenshots/UX-Visual-Difference-Report.md
pkupuk f6b806617e docs: add research assets, screenshots and guides 
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
2026-02-11 11:51:35 +08:00

4.9 KiB
Raw Blame History

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：

<body class="bg-background text-text font-sans min-h-screen flex flex-col">

theme.css 第 63 行定義：

--color-background: #ffffff; /* Main background */

tailwind-config.mjs 第 91 行：

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 localhost-hero.png
Painpoint reference-painpoint.png localhost-painpoint.png
Statistics reference-statistics.png localhost-statistics.png
Services reference-services.png localhost-services.png
Clients reference-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