docs: add research assets, screenshots and guides

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

screenshots/visual-difference-report.md

@@ -0,0 +1,92 @@
+# Homepage Visual Difference Report
+## Reference HTML vs Localhost:4321
+
+**Date:** 2026-02-10
+**Analysis Method:** agent-browser + getComputedStyle API
+
+---
+
+## 📊 Summary of Differences
+
+### ✅ Matched Colors
+| Color | RGB | Hex | Usage |
+|-------|-----|-----|-------|
+| White | rgb(255, 255, 255) | #ffffff | Backgrounds |
+| Text Primary | rgb(51, 51, 51) | #333333 | Primary text |
+| Enchun Blue | rgb(35, 96, 140) | #23608c | Links, branding |
+| Link Blue | rgb(48, 131, 191) | #3083bf | Links |
+| Dark Blue | rgb(6, 40, 65) | #062841 | Headings |
+| Notification Red | rgb(216, 64, 56) | #d84038 | CTA buttons |
+| Amber/Yellow | rgb(246, 196, 86) | #f6c456 | Accents |
+| Tropical Blue | rgb(199, 228, 250) | #c7e4fa | Footer bg |
+| Grey Light | rgb(242, 242, 242) | #f2f2f2 | Section backgrounds |
+| Grey Border | rgb(224, 224, 224) | #e0e0e0 | Borders |
+| Grey Muted | rgb(130, 130, 130) | #828282 | Secondary text |
+
+### ⚠️ Key Findings
+
+1. **Body Background**: Both use #f2f2f2 correctly ✅
+2. **Primary Colors**: All colors match between reference and localhost ✅
+3. **Typography**: Both use Noto Sans TC ✅
+
+### 🔍 Section-by-Section Analysis
+
+#### Hero Section
+- **Background**: Dark blue (#062841) - MATCH ✅
+- **Title Color**: White (#ffffff) - MATCH ✅
+- **Font Size**: 64.41px (reference) vs similar (localhost) - NEEDS VERIFICATION
+
+#### Painpoint Section ("你可能會遇到的煩惱")
+- **Heading Color**: rgb(6, 40, 65) / #062841 - MATCH ✅
+- **Font Size**: 34.2px - NEEDS VERIFICATION
+
+#### Statistics Section ("數據會說話")
+- **Heading Color**: rgb(6, 40, 65) / #062841 - MATCH ✅
+- **Font Size**: 34.2px - NEEDS VERIFICATION
+
+#### Client Cases Section ("客戶案例")
+- **Heading Color**: rgb(6, 40, 65) / #062841 - MATCH ✅
+- **Font Size**: 34.2px - NEEDS VERIFICATION
+
+#### Footer
+- **Background**: rgb(199, 228, 250) / #c7e4fa - MATCH ✅
+
+---
+
+## 🔧 Required Fixes (Based on User Report)
+
+User reports "the way you handle reference page and actually the page is far off"
+
+### Potential Issues to Investigate:
+
+1. **Layout/Spacing**: Section spacing may differ significantly
+2. **Typography Scale**: Font sizes may not match exactly
+3. **Component Structure**: Components may be rendered differently
+4. **Responsive Breakpoints**: Mobile layout may differ
+
+### Next Steps:
+
+1. Detailed section-by-section spacing analysis
+2. Font size comparison for each heading level
+3. Padding/margin verification for all sections
+4. Component alignment checks
+
+---
+
+## 📐 Detailed Measurements Needed
+
+### Section Heights & Spacing
+- Hero section: Reference vs Localhost
+- Painpoint tabs: Height, active state styling
+- Statistics numbers: Font size, animation behavior
+- Service features: Grid layout, card spacing
+- Client cases: Carousel structure
+- Portfolio preview: Grid gaps
+- CTA section: Button styling, spacing
+- Footer: Column layout, link spacing
+
+### Typography Hierarchy
+- h1: Reference uses 64.41px (hero), 34.2px (section headings)
+- h2: Needs verification
+- h3: Needs verification
+- Body text: 19px base - VERIFIED ✅