# 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 原始設計*