pkupuk
f6b806617e
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
180 lines
4.9 KiB
Markdown
180 lines
4.9 KiB
Markdown
# 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
|
||
<body class="bg-background text-text font-sans min-h-screen flex flex-col">
|
||
```
|
||
|
||
**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`
|