docs: add research assets, screenshots and guides

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

screenshots/difference-list-and-fix-plan.md

@@ -0,0 +1,98 @@
+# Homepage Visual Differences - Full List & Fix Plan
+
+## 分析日期：2026-02-10
+
+### 🔍 分析方法
+- agent-browser + getComputedStyle API
+- 直接比對 Reference HTML 與 Localhost:4321
+- 截圖視覺比對
+
+---
+
+## ✅ 已確認正確的項目
+
+### 顏色 (100% 匹配)
+| 元素 | 參考 HTML | Localhost | 狀態 |
+|------|-----------|-----------|------|
+| Body 背景 | #f2f2f2 | #f2f2f2 | ✅ |
+| 主標題顏色 | #062841 | #062841 | ✅ |
+| 白色 | #ffffff | #ffffff | ✅ |
+| Enchun Blue | #23608c | #23608c | ✅ |
+| Link Blue | #3083bf | #3083bf | ✅ |
+| Notification Red | #d84038 | #d84038 | ✅ |
+| Amber | #f6c456 | #f6c456 | ✅ |
+| Tropical Blue | #c7e4fa | #c7e4fa | ✅ |
+| 文字主色 | #333333 | #333333 | ✅ |
+
+### 字體 (100% 匹配)
+- Noto Sans TC ✅
+- 基礎字體大小：19px ✅
+
+---
+
+## ❌ 發現的差異 (需要修復)
+
+### 1. Painpoint Section (您的困擾) 🔴 已修復
+
+| 項目 | 參考 HTML | 原實作 | 狀態 |
+|------|-----------|--------|------|
+| Section 標題 | 你可能會遇到的煩惱 | 您的困擾 | ✅ 已修復 |
+| Tab 1 | 行銷公司難找 | 流量不見了 | ✅ 已修復 |
+| Tab 2 | 宣傳方法太多難選擇 | 轉換率低 | ✅ 已修復 |
+| Tab 3 | 數位轉型太難 | (缺失) | ✅ 已修復 |
+| Tab 4 | 廣告行銷像燒錢 | (缺失) | ✅ 已修復 |
+| Panel 描述 | 市場上有太多行銷公司... | 網站流量持續下滑... | ✅ 已修復 |
+| Solution 文字 | 我們有解決方法 | (缺失) | ✅ 已修復 |
+| Solution 連結 | about-enchun.html | (缺失) | ✅ 已修復 |
+
+### 2. 其他需要檢查的區域
+
+#### Statistics Section (數據會說話)
+- 參考標題：「數據會說話」
+- 需要檢查：數字格式、標籤文字
+
+#### Service Features Section
+- 參考沒有這個獨立 section
+- 需要確認：這是否應該被整合到其他區域
+
+#### Client Cases Section (客戶案例)
+- 參考標題：「客戶案例」
+- 需要檢查：Carousel 結構、客戶評論內容
+
+#### Portfolio Preview Section
+- 需要檢查：網格佈局、卡片樣式
+
+#### CTA Section
+- 參考標題：「準備好開始新的旅程了嗎 歡迎與我們聯絡」
+- 參考按鈕：「預約諮詢 phone_callback」連接到 heyform
+- 需要檢查：按鈕文字、連結目標
+
+---
+
+## 📋 修復計劃
+
+### Phase 1: 內容修復 (高優先級) 🔴
+- [x] PainpointSection - 標題和 tabs 內容
+- [x] PainpointSection - 加入「我們有解決方法」和連結
+- [ ] StatisticsSection - 檢查數字和標籤
+- [ ] ClientCasesSection - 檢查客戶評論內容
+- [ ] CTASection - 更新按鈕文字和連結
+
+### Phase 2: Layout/Spacing 調整 (中優先級) 🟡
+- [ ] Section 間距比對
+- [ ] Padding/Margin 調整
+- [] 響應式斷點驗證
+
+### Phase 3: 細節修復 (低優先級) 🟢
+- [ ] 動畫效果比對
+- [ ] Hover 狀態檢查
+- [ ] Mobile 版本驗證
+
+---
+
+## 🎯 下一步行動
+
+1. 立即修復 StatisticsSection 內容
+2. 更新 ClientCasesSection 的客戶評論
+3. 調整 CTASection 的按鈕和連結
+4. 完整的視覺測試