docs: add research assets, screenshots and guides

Include supplementary documentation, research notes on Lexical/UX, and setup guides.

screenshots/final-difference-report.md

@@ -0,0 +1,95 @@
+# Homepage Visual Differences - Final Report
+
+## 修復日期：2026-02-10
+
+---
+
+## ✅ 已完成的修復
+
+### 1. PainpointSection (你的困擾 / 你可能會遇到的煩惱)
+
+| 項目 | 參考 HTML | 修復前 | 修復後 |
+|------|-----------|--------|--------|
+| Section 標題 | 你可能會遇到的煩惱 | 您的困擾 | ✅ 已修復 |
+| Tab 1 | 行銷公司難找 | 流量不見了 | ✅ 已修復 |
+| Tab 2 | 宣傳方法太多難選擇 | 轉換率低 | ✅ 已修復 |
+| Tab 3 | 數位轉型太難 | (缺失) | ✅ 已修復 |
+| Tab 4 | 廣告行銷像燒錢 | (缺失) | ✅ 已修復 |
+| Panel 描述 | 市場上有太多行銷公司... | 網站流量持續下滑... | ✅ 已修復 |
+| Solution 文字 | 我們有解決方法 | (缺失) | ✅ 已修復 |
+| Solution 連結 | about-enchun.html | (缺失) | ✅ 已修復 |
+
+### 2. StatisticsSection (數據會說話)
+
+| 項目 | 參考 HTML | 修復前 | 修復後 |
+|------|-----------|--------|--------|
+| Section 標題 | 數據會說話 | 數據會說話 | ✅ 已匹配 |
+| Subtitle | Statistics reveal the truth | (缺失) | ✅ 已加入 |
+| 統計 1 | 至今協助商家數 | 服務客戶數 | ✅ 已修復 |
+| 統計 2 | 提升成長率 150.0% | 廣告投資報酬率 85% | ✅ 已修復 |
+| 統計 3 | 客戶滿意度 98.0% | 客戶滿意度 98% | ✅ 已修復 |
+| 統計 4 | 客戶續約率 95.0% | 行銷經驗 10+年 | ✅ 已修復 |
+
+### 3. ClientCasesSection (客戶案例)
+
+| 項目 | 參考 HTML | 修復前 | 修復後 |
+|------|-----------|--------|--------|
+| Section 標題 | 客戶案例 | 客戶案例 | ✅ 已匹配 |
+| Subtitle | clients who work with us | (缺失) | ✅ 已加入 |
+| 描述 | 恩群數位的客戶真實示範... | (缺失) | ✅ 已加入 |
+| 案例 1 | 落日精品咖啡 - 王孟梵老闆 | 王先生 | ✅ 已修復 |
+| 案例 2 | Gee hair salon - Ivan店長 | 李小姐 | ✅ 已修復 |
+| 案例 3 | 高雄欣興租車 - ANDY店長 | 陳先生 | ✅ 已修復 |
+| 案例 4 | 這健小事運動工作室 - Nash嘉慶老闆 | 張小姐 | ✅ 已修復 |
+| 案例 5 | 即刻體能運動空間 - Peter老闆 | (缺失) | ✅ 已加入 |
+
+### 4. CTASection (準備好開始新的旅程了嗎)
+
+| 項目 | 參考 HTML | 修復前 | 修復後 |
+|------|-----------|--------|--------|
+| 標題 | 準備好開始新的旅程了嗎 歡迎與我們聯絡 | 準備好開始新的旅程了嗎 | ✅ 已修復 |
+| 按鈕文字 | 預約諮詢 phone_callback | 立即聯絡 | ✅ 已修復 |
+| 按鈕連結 | heyform 表單 | /contact-us | ✅ 已修復 |
+
+---
+
+## ✅ 確認正確的項目 (無需修改)
+
+### 顏色 (100% 匹配)
+- Body 背景: #f2f2f2 ✅
+- 主標題: #062841 ✅
+- Enchun Blue: #23608c ✅
+- Link Blue: #3083bf ✅
+- Notification Red: #d84038 ✅
+- Amber: #f6c456 ✅
+- Tropical Blue: #c7e4fa ✅
+
+### 字體 (100% 匹配)
+- Noto Sans TC ✅
+- 基礎字體大小: 19px ✅
+
+---
+
+## 🔄 需要驗證的項目
+
+1. **Video Background** - 需要確認 video 檔案是否正確載入
+2. **Portfolio Preview Section** - 需要確認內容是否與參考匹配
+3. **Service Features Section** - 參考 HTML 沒有這個獨立 section，需要確認是否應該移除
+
+---
+
+## 📁 修改的檔案
+
+1. `apps/frontend/src/sections/PainpointSection.astro` - 更新標題、tabs、solution 連結
+2. `apps/frontend/src/sections/StatisticsSection.astro` - 更新統計資料
+3. `apps/frontend/src/sections/ClientCasesSection.astro` - 更新客戶案例
+4. `apps/frontend/src/sections/CTASection.astro` - 更新標題和按鈕連結
+
+---
+
+## 🎯 下一步建議
+
+1. 在瀏覽器中視覺驗證所有修復
+2. 檢查 video 背景是否正確播放
+3. 確認 Portfolio Preview Section 是否需要調整
+4. 檢查響應式設計 (mobile/tablet)