# Homepage Structure & Layout Analysis Report
## 參考 HTML vs Localhost 結構差異深度分析

**Date:** 2026-02-10
**Analyst:** UX Expert
**Status:** Critical Issues Found

---

## 🚨 關鍵發現

### 結構差異總覽

| 項目 | 參考 HTML | Localhost | 影響等級 |
|------|-----------|-----------|----------|
| Body 背景色 | #f2f2f2 | #f2f2f2 (已修復) | ✅ |
| Body 高度 | 3548px | 3835px (+287px) | ⚠️ |
| Painpoint Section | 獨立 section | 獨立 section | ✅ |
| Statistics Section | **獨立 H1 + section** | 合併在 Painpoint region 內 | ❌ CRITICAL |
| Service Features | **在 Footer 中** | 獨立的 ServiceFeatures section | ❌ CRITICAL |
| Client Cases | Carousel 輪播 | 靜態顯示 | ⚠️ |
| CTA Section | 按鈕連結 heyform | 按鈕連結 /contact-us | ⚠️ |

---

## 1. Statistics Section 被合併問題 ❌ CRITICAL

### 參考 HTML 結構
```
body
├── [Navigation]
├── [Hero Banner]
├── H1 "你可能會遇到的煩惱"
├── [Tabs]
├── [Tabpanel]
├── H1 "數據會說話"  ← 獨立的 H1
├── P "Statistics reveal the truth"
├── [Statistics Data: 0 至今協助商家數, 0.0% 提升成長率, ...]
├── H1 "客戶案例"  ← 獨立的 H1
└── ...
```

### Localhost 結構 (問題)
```
main
├── [Hero]
├── region "你可能會遇到的煩惱"
│   ├── H2 "你可能會遇到的煩惱"
│   ├── [Tabs]
│   ├── [Tabpanel]
│   ├── 0 + 服務客戶數  ← Statistics 被合併在這裡！
│   ├── 0 %% 廣告投資報酬率
│   ├── 0 + 年 行銷經驗
│   └── 0 %% 客戶滿意度
├── region "我們的服務"
└── region
    ├── P "客戶案例"
    └── ...
```

### 問題描述
**StatisticsSection.astro 的內容被錯誤地合併到 PainpointSection 的 `<main>` 區域內**

### 根本原因
根據 Accessibility Tree 顯示，Statistics 的數據 (0+, 0%%, 0+年, 0%%) 出現在 `region "你可能會遇到的煩惱"` 內部，而不是作為一個獨立的 section。

### 預期修復
檢查 `index.astro` 的組件順序，確保：
1. `StatisticsSection` 是一個獨立的 `<section>` 元素
2. 有自己的 H1 標題「數據會說話」
3. 與 PainpointSection 完全分離

---

## 2. Service Features 位置錯誤 ❌ CRITICAL

### 參考 HTML 結構
```
[Footer]
├── [Logo + Description]
├── [Contact Info]
├── H3 "聯絡我們"
├── H3 "行銷方案"  ← Services 在這裡！
│   └── UL
│       ├── LI Google 商家關鍵字
│       ├── LI Google Ads
│       ├── LI 社群代操
│       ├── LI 論壇行銷
│       ├── LI 網紅行銷
│       └── LI 形象影片
└── H3 "行銷放大鏡"
    └── UL [Blog Categories]
```

### Localhost 結構 (問題)
```
main
├── [Hero]
├── [Painpoint + Statistics]
├── section "我們的服務"  ← 不應該在 main 內！
│   ├── H2 "我們的服務"
│   ├── P "提供全方位..."
│   └── Grid [4 Service Cards]
└── [Client Cases]
```

### 問題描述
**Localhost 創建了一個獨立的 `ServiceFeatures` section，但參考 HTML 中 Services 只是在 Footer 的連結列表！**

### 影響
1. 頁面結構完全不同
2. 用戶體驗差異巨大
3. Localhost 多了一個不應該存在的主要內容區塊

### 預期修復
從 `index.astro` 中**移除** `<ServiceFeatures />` 組件，Services 應該只在 Footer 中顯示為連結列表。

---

## 3. Client Cases Carousel 差異 ⚠️

### 參考 HTML
- Carousel 輪播效果
- 顯示 "Slide X of Y" 指示器
- 上一頁/下一頁按鈕
- 每個案例有 H2 標題

### Localhost
- 靜態顯示 4 個客戶案例
- 沒有 carousel 效果
- 使用 H3 標題

### 預期修復
更新 `ClientCasesSection.astro` 實作真正的 carousel 輪播功能。

---

## 4. Body 高度差異 ⚠️

| 指標 | 參考 HTML | Localhost | 差異 |
|------|-----------|-----------|------|
| 總高度 | 3548px | 3835px | +287px (+8%) |

### 可能原因
1. Service Features section 額外增加的內容
2. Padding/margin 設定差異
3. 字體大小或間距差異

---

## 修復優先級與行動

### P0 - Critical (立即修復)

1. **移除 ServiceFeatures section**
   - 檔案: `apps/frontend/src/pages/index.astro`
   - 行動: 註解或移除 `<ServiceFeatures />` 組件

2. **分離 Statistics Section**
   - 檔案: `apps/frontend/src/pages/index.astro`
   - 確認: `StatisticsSection` 是獨立的 `<section>`
   - 確認: 有 H1 標題「數據會說話」

### P1 - High (優先修復)

3. **實作 Client Cases Carousel**
   - 檔案: `apps/frontend/src/sections/ClientCasesSection.astro`
   - 行動: 添加 carousel 輪播功能

4. **調整 Body 高度**
   - 檢查各 section 的 padding/margin
   - 確保與參考 HTML 一致

---

## 建議修復順序

1. ✅ 修復背景色 (已完成)
2. ⏳ 移除 ServiceFeatures section
3. ⏳ 驗證 Statistics Section 獨立性
4. ⏳ 實作 Carousel
5. ⏳ 重新截圖驗證

---

## 相關檔案清單

| 檔案 | 狀態 | 需要修改 |
|------|------|----------|
| `apps/frontend/src/pages/index.astro` | ❌ | 是 - 移除 ServiceFeatures |
| `apps/frontend/src/sections/ServiceFeatures.astro` | ⚠️ | 保留但不在首頁使用 |
| `apps/frontend/src/sections/PainpointSection.astro` | ✅ | 否 |
| `apps/frontend/src/sections/StatisticsSection.astro` | ⚠️ | 驗證獨立性 |
| `apps/frontend/src/sections/ClientCasesSection.astro` | ❌ | 是 - 添加 carousel |
| `apps/frontend/src/sections/CTASection.astro` | ⚠️ | 驗證連結正確性 |