# Story 1-7 Solutions Page - UX Pixel-Perfect Specifications

> **UX Expert Review Document**
> 參考來源: Webflow 原始設計
> 設計系統: `apps/frontend/src/styles/theme.css`
> 目標視覺保真度: 100%

---

## 🎨 Design Token 驗證

### 色彩系統

| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|------|----------|-----------|--------------|----------|
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
| 深色 | Dark Blue | `#062841` | `--color-dark-blue` | ⚠️ 需新增 |
| 淺藍色 | Tropical Blue | `#c7e4fa` | `--color-tropical-blue` | ✅ 已定義 |
| 淺藍色 2 | Light Blue | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
| 中藍色 | Medium Blue | `#67aee1` | `--color-medium-blue` | ⚠️ 需新增 |
| CTA 強調 | Amber | `#f6c456` | `--color-amber` | ✅ 已定義 |
| Hot 標籤 | Notification Red | `#d84038` | `--color-notification-red` | ⚠️ 需新增 |
| 文字主要 | Grey 3 | `#828282` | `--color-gray-700` | ✅ 已定義 |
| 背景 | Grey 6 | `#f2f2f2` | `--color-gray-100` | ✅ 已定義 |

### 新增設計 Token 需求

```css
/* Webflow 額外色彩 */
--color-notification-red: #d84038;
--color-dark-blue: #062841;
--color-medium-blue: #67aee1;
```

---

## 📐 Section 詳細規格

### 1. Hero Section

#### 新組件: `SolutionsHero.astro`

#### CSS 規格
```css
.hero-overlay-solution {
    background-color: var(--color-dark-blue);  /* #062841 */
    max-height: 63.5vh;
    padding: 120px 20px 80px;
    text-align: center;
    position: relative;
}

.hero_title_head-solution {
    color: #ffffff;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 700;
    font-size: 3.39em;  /* Desktop: ~64px */
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero_sub_paragraph-solution {
    color: var(--color-gray-100);  /* #f2f2f2 */
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1.56em;  /* Desktop: ~30px */
    line-height: 1.2;
}
```

#### 響應式調整

| Breakpoint | 標題字體大小 | 副標題字體大小 |
|------------|--------------|----------------|
| Desktop (≥992px) | 3.39em (~64px) | 1.56em (~30px) |
| Tablet (≤991px) | 2.45em (~47px) | 1.15em (~22px) |
| Mobile (≤767px) | 7vw | 3.4vw |

---

### 2. 服務項目列表

#### 新組件: `ServicesList.astro`

#### 佈局規格 (Zig-zag Pattern)
```css
.section_service-list {
    background-color: #ffffff;
    padding: 60px 20px;
}

.service-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 交替佈局 - 單數項目圖在右 */
.service-item:nth-child(odd) {
    grid-template-areas: "content image";
}

/* 交替佈局 - 雙數項目圖在左 */
.service-item:nth-child(even) {
    grid-template-areas: "image content";
}

.service-item-content {
    grid-area: content;
}

.service-item-image {
    grid-area: image;
}

@media (max-width: 767px) {
    .service-item {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "content" !important;
        gap: 24px;
    }
}
```

#### 服務卡片規格
```css
.service-category-tag {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--color-enchunblue);  /* #23608c */
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.service-title {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-dark-blue);  /* #062841 */
    margin-bottom: 16px;
    line-height: 1.3;
}

.service-divider {
    width: 60px;
    height: 2px;
    background-color: var(--color-enchunblue);
    margin-bottom: 16px;
}

.service-description {
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-gray-700);  /* #828282 */
    line-height: 1.6;
}

.service-hot-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: var(--color-notification-red);  /* #d84038 */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
```

#### 間距規格

| Breakpoint | 左右間距 |
|------------|----------|
| Desktop (≥992px) | 40px |
| Tablet (≤991px) | 24px |
| Mobile (≤767px) | 12px |

---

### 3. 八個服務項目

#### 1. 社群經營代操
- **圖標**: Facebook, Instagram
- **標籤**: "海洋專案"
- **Hot 標籤**: ✅ 顯示

#### 2. Google 商家關鍵字
- **圖標**: Google Maps
- **標籤**: "Google"
- **Hot 標籤**: ✅ 顯示

#### 3. Google Ads 關鍵字
- **圖標**: Google Ads
- **標籤**: "Google"
- **Hot 標籤**: ❌ 不顯示

#### 4. 網路新聞媒體
- **圖標**: News
- **標籤**: "媒體行銷"
- **Hot 標籤**: ❌ 不顯示

#### 5. 網紅行銷專案
- **圖標**: YouTube
- **標籤**: "口碑行銷"
- **Hot 標籤**: ✅ 顯示

#### 6. 論壇行銷專案
- **圖標**: Dcard
- **標籤**: "口碑行銷"
- **Hot 標籤**: ❌ 不顯示

#### 7. 形象網站設計
- **圖標**: ❌ 隱藏
- **標籤**: "品牌行銷"
- **Hot 標籤**: ❌ 不顯示

#### 8. 品牌形象影片
- **圖標**: ❌ 隱藏
- **標籤**: "品牌行銷"
- **Hot 標籤**: ❌ 不顯示

---

## 📱 響應式斷點總結

### 主要斷點
```css
/* Desktop */
@media (min-width: 992px) { /* Zig-zag 佈局 */ }

/* Tablet */
@media (max-width: 991px) {
    html { font-size: 19px; }
    .service-item { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
    html { font-size: 16px; }
    .service-item { grid-template-columns: 1fr; }
}

/* Small Mobile */
@media (max-width: 479px) {
    html { font-size: 13px; }
}
```

---

## 🎯 互動效果規格

### Hover 效果
```css
.service-item:hover {
    transform: translateY(-2px);
}

.service-item:hover .service-title {
    color: var(--color-enchunblue);
}

.service-item-image img {
    transition: transform 0.3s ease;
}

.service-item:hover .service-item-image img {
    transform: scale(1.05);
}
```

---

## 🏗️ 組件實現清單

### ⏳ 需新增
- [ ] `SolutionsHero.astro` - 行銷方案 Hero 區塊
- [ ] `ServicesList.astro` - 服務項目列表（含 zig-zag 佈局）
- [ ] `ServiceCard.astro` - 單一服務卡片

### 🖼️ 需要的圖標資源

| 圖標名稱 | 來源 |
|----------|------|
| Facebook | Material Icons / SVG |
| Instagram | Material Icons / SVG |
| Google Maps | Material Icons / SVG |
| Google Ads | Material Icons / SVG |
| News | Material Icons / SVG |
| YouTube | Material Icons / SVG |
| Dcard | Custom SVG |

---

## 📋 驗收標準

### 視覺保真度檢查
- [ ] Hero 背景色正確 (#062841)
- [ ] 服務卡片 Zig-zag 佈局正確
- [ ] Hot 標籤顯示在正確位置
- [ ] 分類標籤顏色正確

### 響應式檢查
- [ ] Desktop Zig-zag 交替顯示
- [ ] Tablet 保持雙欄
- [ ] Mobile 單欄堆疊

### 互動效果檢查
- [ ] Hover 效果流暢
- [ ] 連結可點擊

---

*此文件由 UX Expert 創建，最後更新：2026-02-10*