# 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`
