docs: separate documentation and specs into initial commit

Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
2026-02-11 11:49:49 +08:00
parent 8c87d71aa2
commit e9897388dc
34 changed files with 11920 additions and 8777 deletions
--- a/specs/001-users-pukpuk-dev/ux-story-1-6-about-spec.md
+++ b/specs/001-users-pukpuk-dev/ux-story-1-6-about-spec.md
@@ -0,0 +1,594 @@
+# Story 1-6 About Page - UX Pixel-Perfect Specifications
+
+> **UX Expert Review Document**
+> 參考來源: Webflow 原始設計
+> 設計系統: `apps/frontend/src/styles/theme.css`
+> 目標視覺保真度: 100%
+
+---
+
+## 🎨 Design Token 驗證
+
+### 色彩系統 (與 Webflow 原始設計一致)
+
+| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
+|------|----------|-----------|--------------|----------|
+| 主品牌色 | Enchun Blue | `#3898ec` | `--color-primary` | ✅ 已定義 |
+| 深品牌色 | Deep Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
+| Hover Blue | Hover Blue | `#2895f7` | `--color-primary-hover` | ✅ 已定義 |
+| 主文字 | Text Primary | `#333333` | `--color-text-primary` | ✅ 已定義 |
+| 次要文字 | Text Secondary | `#666666` | `--color-gray-600` | ⚠️ 需確認 |
+| 白色背景 | White | `#ffffff` | `--color-white` | ✅ 已定義 |
+| 卡片背景 | Surface | `#f3f3f3` | `--color-surface2` | ✅ 已定義 |
+| 邊框色 | Border | `#e2e8f0` | `--color-border` | ✅ 已定義 |
+| 正確圖標 | Success | `#3898ec` | `--color-primary` | ✅ 已定義 |
+| 錯誤圖標 | Error | `#ea384c` | `--color-badge-hot` | ✅ 已定義 |
+
+---
+
+## 📐 Section 詳細規格
+
+### 1. Hero Section
+
+#### 新組件: `AboutHero.astro`
+
+#### 佈局結構
+```html
+<header class="hero-overlay-about">
+    <div class="hero_bg-about"></div>
+    <div class="centered-container w-container">
+        <div class="div-block">
+            <h1 class="hero_title_head-about">關於恩群數位</h1>
+            <p class="hero_sub_paragraph-about">About Enchun digital</p>
+        </div>
+    </div>
+</header>
+```
+
+#### CSS 規格
+```css
+.hero-overlay-about {
+    background-color: #ffffff;
+    padding: 120px 20px;
+    text-align: center;
+}
+
+.hero_title_head-about {
+    color: var(--color-enchunblue);  /* #23608c */
+    font-family: "Noto Sans TC", "Quicksand", sans-serif;
+    font-weight: 700;
+    font-size: 3rem;
+    line-height: 1.2;
+    margin-bottom: 16px;
+}
+
+.hero_sub_paragraph-about {
+    color: var(--color-enchunblue-dark);  /* #3083bf */
+    font-family: "Quicksand", sans-serif;
+    font-weight: 400;
+    font-size: 1.25rem;
+    line-height: 1.4;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | 標題字體大小 | 副標題字體大小 | Padding |
+|------------|--------------|----------------|---------|
+| Desktop (≥992px) | 3rem (48px) | 1.25rem (20px) | 120px/120px |
+| Tablet (≤991px) | 2.5rem (40px) | 1.125rem (18px) | 80px/80px |
+| Mobile (≤767px) | 2rem (32px) | 1rem (16px) | 60px/60px |
+
+---
+
+### 2. 服務特色區 (Section Feature)
+
+#### 新組件: `FeatureSection.astro`
+
+#### 標題區塊
+```css
+.section_feature {
+    background-color: #ffffff;
+    padding: 80px 20px;
+}
+
+.section_header_w_line {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.header_subtitle_head {
+    color: var(--color-enchunblue);  /* #23608c */
+    font-weight: 700;
+    font-size: 2.25rem;
+    line-height: 1.2;
+    margin: 16px 0;
+}
+
+.header_subtitle_paragraph {
+    color: #666666;
+    font-weight: 400;
+    font-size: 1rem;
+    margin-top: 8px;
+}
+
+.divider_line {
+    background-color: var(--color-enchunblue);
+    height: 2px;
+    width: 100px;
+    margin: 0 auto;
+}
+```
+
+#### 特色卡片網格
+```css
+.feature_grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.feature_card {
+    background: #ffffff;
+    border-radius: var(--radius-lg);  /* 12px */
+    padding: 32px;
+    transition: all var(--transition-base);
+}
+
+.feature_card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+```
+
+#### 特色卡片內容
+```css
+.feature_image {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+}
+
+.feature_image img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.feature_head {
+    color: #333333;
+    font-weight: 600;
+    font-size: 1.25rem;
+    margin-bottom: 12px;
+}
+
+.feature_description {
+    color: #666666;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+```
+
+#### 四個特色內容
+
+| 圖標文件 | 標題 | 描述 |
+|----------|------|------|
+| `address-bro-在地化優先.svg` | 在地化優先 | 線上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市 |
+| `Banknote-bro-高投資報公率.svg` | 高投資轉換率 | 你覺得網路行銷很貴嗎？ 恩群數位善用每一分廣告預算，讓你在網路上發揮最大效益，幫助店家鎖定精準客群，達成目標 |
+| `Social Dashboard-bro-數據優先.svg` | 數據優先 | 想要精準行銷? 恩群數位從數據中萃取洞察，根據數據分析廣告成效，更聰明、有策略的幫您省下行銷預算 |
+| `Partnership-bro-關係優先.svg` | 關係優於銷售 | 除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單 |
+
+#### 響應式調整
+
+| Breakpoint | Grid Columns | Gap |
+|------------|--------------|-----|
+| Desktop (≥992px) | 4 columns | 30px |
+| Tablet (768-991px) | 2 columns | 24px |
+| Mobile (≤767px) | 1 column | 16px |
+
+---
+
+### 3. 差異化比較區 (Section Comparison)
+
+#### 新組件: `ComparisonSection.astro`
+
+#### 容器規格
+```css
+.section_comparison {
+    background-color: #ffffff;
+    padding: 60px 20px;
+}
+
+.comparison_holder {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.comparison_gold_madel {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.comparison_gold_madel img {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+}
+```
+
+#### 比較表格
+```css
+.comparison_table_holder {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+}
+
+.comparison_left_holder,
+.comparison_right_holder {
+    padding: 32px;
+    border-radius: var(--radius-lg);
+}
+
+.comparison_left_holder {
+    background-color: #f8f8f8;
+}
+
+.comparison_right_holder {
+    background-color: #f0f7ff;
+    border: 2px solid var(--color-primary);
+}
+
+.comparison_header {
+    color: #333333;
+    font-weight: 700;
+    font-size: 1.5rem;
+    margin-bottom: 16px;
+}
+
+.comparison_description {
+    color: #666666;
+    font-weight: 400;
+    font-size: 1rem;
+    margin-bottom: 24px;
+}
+
+.comparison_hr {
+    border: none;
+    border-top: 1px solid #e2e8f0;
+    margin-bottom: 24px;
+}
+```
+
+#### 比較列表項目
+```css
+.comparison_list_item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.comparison_item_title {
+    color: #333333;
+    font-weight: 500;
+    font-size: 1rem;
+}
+
+.comparison_icon {
+    width: 24px;
+    height: 24px;
+}
+
+.comparison_icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+```
+
+#### 比較項目內容
+
+**其他行銷公司** ❌：
+- 缺乏經驗
+- 沒有成效保證
+- 售後無服務
+- 沒有策略
+- 不了解客戶需求
+- 沒有接受客戶反饋
+
+**恩群數位** ✅：
+- 實際執行經驗豐富
+- 實際成效
+- 售後服務架構完善
+- 行銷策略有方
+- 熟悉客戶需求
+- 最多客戶回饋
+
+#### 響應式調整
+
+| Breakpoint | Grid |
+|------------|------|
+| Desktop (≥992px) | 2 columns (左右並排) |
+| Mobile (≤767px) | 1 column (上下堆疊) |
+
+---
+
+### 4. CTA 區塊 (Call to Action)
+
+#### 新組件: `CTASection.astro`
+
+#### CSS 規格
+```css
+.section_call4action {
+    background-color: #ffffff;
+    padding: 80px 20px;
+}
+
+.c4a_grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    text-align: center;
+}
+
+.c4a_heading {
+    color: #333333;
+    font-weight: 600;
+    font-size: 1.5rem;
+    line-height: 1.4;
+}
+
+.c4a_button {
+    background-color: var(--color-primary);  /* #3898ec */
+    color: #ffffff;
+    padding: 16px 32px;
+    border-radius: var(--radius);  /* 6px */
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all var(--transition-base);
+}
+
+.c4a_button:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.c4a_button-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+```
+
+#### 按鈕圖標
+- **Material Icon**: `phone_callback`
+- **尺寸**: 24px
+
+#### 響應式調整
+
+| Breakpoint | 按鈕寬度 |
+|------------|----------|
+| Desktop (≥992px) | auto |
+| Mobile (≤767px) | 100% (max-width: 300px) |
+
+---
+
+### 5. 頁尾資訊
+
+#### 已有組件: `Footer.astro` (需驗證一致性)
+
+#### CSS 規格
+```css
+.section_footer {
+    background-color: #f3f3f3;
+    padding: 60px 20px 32px;
+}
+
+.footer_horizontal_line {
+    border: none;
+    border-top: 1px solid #e2e8f0;
+    margin-bottom: 40px;
+}
+
+.footer_grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | Grid Columns |
+|------------|--------------|
+| Desktop (≥992px) | 4 columns |
+| Tablet (768-991px) | 2 columns |
+| Mobile (≤767px) | 1 column |
+
+---
+
+## 📱 響應式斷點總結
+
+### 主要斷點
+```css
+/* Webflow 原始斷點 */
+@media (min-width: 992px) { /* Desktop */ }
+@media (max-width: 991px)  { /* Tablet */ }
+@media (max-width: 767px)  { /* Mobile */ }
+@media (max-width: 479px)  { /* Small Mobile */ }
+```
+
+### HTML 字體大小調整
+```css
+/* Desktop default */
+html { font-size: 19px; }
+
+/* Tablet */
+@media (max-width: 991px) {
+    html { font-size: 19px; }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+    html { font-size: 16px; }
+}
+
+/* Small Mobile */
+@media (max-width: 479px) {
+    html { font-size: 13px; }
+}
+```
+
+---
+
+## 🎯 互動效果規格
+
+### Hover 效果
+```css
+/* 特色卡片 Hover */
+.feature_card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+/* 按鈕 Hover */
+.c4a_button:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* 連結 Hover */
+a:hover {
+    opacity: 0.8;
+}
+```
+
+### 頁面載入動畫
+```css
+.fade-in {
+    animation: fadeIn 0.25s ease-in-out;
+}
+
+.slide-up {
+    animation: slideUp 0.25s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+```
+
+---
+
+## 🏗️ 組件實現清單
+
+### ✅ 已實現
+- [x] `Header.astro` - 已完成
+- [x] `Footer.astro` - 已完成
+
+### ⏳ 需新增
+- [ ] `AboutHero.astro` - 關於頁面 Hero 區塊
+- [ ] `FeatureSection.astro` - 服務特色區（4個特色卡片）
+- [ ] `ComparisonSection.astro` - 差異化比較區
+- [ ] `CTASection.astro` - 行動呼籲區塊
+
+### 🖼️ 需要的圖標資源
+
+| 圖標名稱 | 文件名稱 | 尺寸 |
+|----------|----------|------|
+| 在地化優先 | `address-bro-在地化優先.svg` | 80x80px |
+| 高投資報酬率 | `Banknote-bro-高投資報公率.svg` | 80x80px |
+| 數據優先 | `Social Dashboard-bro-數據優先.svg` | 80x80px |
+| 關係優先 | `Partnership-bro-關係優先.svg` | 80x80px |
+| 金牌獎章 | `winning medal.svg` | 60x60px |
+| 錯誤圖標 | `wrong.svg` | 24x24px |
+| 正確圖標 | `correct.svg` | 24x24px |
+
+---
+
+## 📋 驗收標準 (Acceptance Criteria)
+
+### 視覺保真度檢查
+- [ ] 所有顏色與 Webflow 原始設計 100% 一致
+- [ ] 所有字體大小（含響應式）與規格一致
+- [ ] 所有間距（padding, margin, gap）與規格一致
+- [ ] 所有圓角（border-radius）與規格一致
+- [ ] 所有陰影（box-shadow）與規格一致
+
+### 響應式檢查
+- [ ] Desktop (≥992px) 佈局正確
+- [ ] Tablet (≤991px) 佈局正確
+- [ ] Mobile (≤767px) 佈局正確
+- [ ] Small Mobile (≤479px) 佈局正確
+
+### 互動效果檢查
+- [ ] Hover 效果流暢
+- [ ] 動畫過渡自然
+- [ ] 比較區卡片正確顯示
+- [ ] CTA 按鈕可點擊
+
+### 內容檢查
+- [ ] 4個特色卡片內容正確
+- [ ] 比較列表內容正確
+- [ ] CTA 按鈕連結正確
+- [ ] 圖標正確顯示
+
+### 效能檢查
+- [ ] Lighthouse Performance ≥ 90
+- [ ] 圖片優化（SVG）
+- [ ] CSS minification
+- [ ] Lazy loading（如需要）
+
+---
+
+## 🔄 實現順序建議
+
+1. **階段 1: 組件結構**
+   - 創建 `AboutHero.astro`
+   - 創建 `FeatureSection.astro`
+   - 創建 `ComparisonSection.astro`
+   - 創建 `CTASection.astro`
+
+2. **階段 2: 圖標資源**
+   - 準備所有需要的 SVG 圖標
+   - 放置於 `public/icons/` 目錄
+
+3. **階段 3: 響應式實現**
+   - 實現所有斷點佈局
+   - 測試移動端顯示
+
+4. **階段 4: 互動效果**
+   - Hover 效果
+   - 載入動畫
+
+5. **階段 5: 整合測試**
+   - 整合到 `about-enchun.astro` 頁面
+   - 視覺保真度驗證
+
+---
+
+*此文件由 UX Expert 創建，最後更新：2026-02-10*
+*參考來源：Webflow 原始設計*