# Story 1-5 Homepage - UX Pixel-Perfect Specifications

> **UX Expert Review Document**
> 參考來源: `research/www.enchun.tw/index.html` (Webflow Export)
> 設計系統: `apps/frontend/src/styles/theme.css`
> 目標視覺保真度: 100%

---

## 🎨 Design Token 驗證

### 色彩系統 (與 Webflow 原始設計一致)

| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|------|----------|-----------|--------------|----------|
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
| 淺藍色 | Tropical Blue | `#c7e4fa` | `--color-tropical-blue` | ✅ 已定義 |
| 頁腳文字 | St. Tropaz | `#5d7285` | `--color-st-tropaz` | ✅ 已定義 |
| CTA 強調 | Amber | `#f6c456` | `--color-amber` | ✅ 已定義 |
| 深色文字 | Tarawera | `#2d3748` | `--color-tarawera` | ✅ 已定義 |
| 通知紅 | Notification Red | `#d84038` | --color-notification-red | ⚠️ 需新增 |
| 深藍色 | Dark Blue | `#062841` | --color-dark-blue | ⚠️ 需新增 |
| 中藍色 | Medium Blue | `#67aee1` | --color-medium-blue | ⚠️ 需新增 |
| 超淺灰 | Grey 6 | `#f2f2f2` | `--color-gray-100` | ✅ 已定義 |
| 淺灰 | Grey 5 | `#e0e0e0` | --color-grey5 | ⚠️ 需新增 |
| 中灰 | Grey 3 | `#828282` | `--color-gray-700` | ✅ 已定義 |
| 深灰 | Grey 2 | `#4f4f4f` | `--color-gray-950` | ✅ 已定義 |

### 新增設計 Token 需求

請在 `theme.css` 中新增以下變數：

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

---

## 📐 Section 詳細規格

### 1. Hero Section

#### 組件檔案: `VideoHero.astro` (已存在，需調整)

#### 容器規格
```css
.centered-container-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-height: 88.5vh;  /* Webflow 原始值 */
    padding-top: 110px;   /* Desktop */
    padding-bottom: 100px;
}
```

#### 背景影片
```css
.background-video {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
```
- **Autoplay**: `true`
- **Loop**: `true`
- **Muted**: `true`
- **Playsinline**: `true`

#### 漸層遮罩
```css
.hero-overlay-home {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}
```

#### Logo
```css
.hero_logo {
    width: 135px;       /* Desktop */
    padding-top: 33px;
}
```

#### 標題文字
```css
.hero_title_head {
    font-size: 3.39em;           /* Desktop, ~64px base 19px */
    line-height: 1.2;
    text-align: left;
    color: #ffffff;
    font-family: "Noto Sans TC", sans-serif;
}

.hero_sub_paragraph-home {
    font-size: 1.56em;           /* Desktop, ~30px */
    font-weight: 300;
    line-height: 1.2;
    text-align: left;
    color: #f2f2f2;              /* var(--grey6) */
    font-family: "Quicksand", sans-serif;
}
```

#### 響應式調整

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

#### ❌ 當前實現問題
1. 當前字體大小使用 `text-6xl`，與 Webflow 的 `3.39em` 不符
2. 漸層遮罩方向需要確認
3. Logo 尺寸需要調整為 135px

---

### 2. 煩惱點區塊 (Painpoint Section)

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

#### 容器規格
```css
.section_painpoint {
    height: 80vh;
    max-height: 80vh;
}
```

#### 標題區塊
```css
.section_header_w_line {
    text-align: center;
}

.header_subtitle_head {
    font-size: 1.8rem;           /* ~34px */
    text-align: center;
    color: var(--color-dark-blue);  /* #062841 */
}

.divider_line {
    background-color: var(--color-enchunblue);
    height: 1px;
    width: 60px;
    margin: 16px auto;
}
```

#### Tabs 系統
```css
.painpoint_tabs {
    padding-top: 32px;
    padding-bottom: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;    /* Desktop: 2 columns */
    gap: 32px;
}

.painpoint_text {
    font-size: 2.08em;                /* ~40px */
    font-weight: 500;
    line-height: 1;
    color: var(--color-dark-blue);
    font-family: "Noto Sans TC", sans-serif;
    cursor: pointer;
    transition: text-shadow 0.3s ease;
}

.painpoint_text:hover {
    text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
}

.tab_panel_frame {
    border: 1px solid var(--color-enchunblue);
    border-radius: 10px;
    position: relative;
    top: -47px;
    padding: 32px;
}

.painpoint_icon {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_holder {
    width: 130px;
    height: 115px;
    background-color: var(--color-gray-100);  /* #f2f2f2 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
```

#### 響應式調整

| Breakpoint | Grid | 字體調整 |
|------------|------|----------|
| Desktop (≥992px) | 2 columns | 100% |
| Tablet (≤991px) | 1 column | 85% |
| Mobile (≤767px) | 1 column | 70% |

---

### 3. 數據統計區塊 (Statistics Section)

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

#### 容器規格
```css
.section_digi_running {
    padding: var(--spacing-3xl) 0;  /* 64px vertical */
}

.digi_holder_grid {
    display: grid;
    grid-column-gap: 85px;
    grid-row-gap: 16px;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    max-width: 1150px;
    margin: 0 auto;
}
```

#### 數字顯示
```css
.text_no {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-amber);  /* #f6c456 */
    /* Animation: countup, duration 3s */
}

.text_percentage {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-700);  /* #828282 */
}

.text_description {
    font-size: 30px;
    font-weight: 100;
    line-height: 1.2;
    color: var(--color-dark-blue);  /* #062841 */
}
```

#### 動畫規格
- **Countup 動畫**: 持續時間 3 秒
- **Easing**: `ease-out`

#### 響應式調整

| Breakpoint | Grid Columns | Gap |
|------------|--------------|-----|
| Desktop (≥992px) | 4 columns | 85px |
| Tablet (≤991px) | 2 columns | 40px |
| Mobile (≤767px) | 1 column | 24px |

---

### 4. 客戶案例區塊 (Client Cases)

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

#### 容器規格
```css
.section_client-case {
    padding: var(--spacing-3xl) 0;
}

.client_case_sub {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--color-enchunblue);  /* #23608c */
    margin-top: 55px;
    text-align: center;
}
```

#### 輪播設定
```css
.case_slider_wrapper {
    height: 77vh;
    /* Autoplay: 2500ms */
    /* Animation: slide */
    /* Infinite: true */
}

.case_content_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 55px;
    grid-row-gap: 55px;
}
```

#### 案例卡片
```css
.case_slide_image {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16/9;
}

.case_heading {
    font-size: 1.7em;
    color: var(--color-dark-blue);
    font-family: "Noto Sans TC", sans-serif;
    margin-bottom: 8px;
}

.case_job_title {
    font-size: 18px;
    color: var(--color-enchunblue-dark);  /* #3083bf */
    font-weight: 100;
    margin-bottom: 16px;
}

.case_review {
    font-size: 18px;
    color: var(--color-gray-700);
    font-weight: 100;
    line-height: 1.6;
}
```

#### 響應式調整

| Breakpoint | Grid | Height |
|------------|------|--------|
| Desktop (≥992px) | 2 columns | 77vh |
| Tablet (≤991px) | 1 column | auto |
| Mobile (≤767px) | 1 column | 59vh |

---

### 5. 行動呼籲區塊 (CTA Section)

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

#### 容器規格
```css
.section_call4action {
    padding: 105px 0 126px 0;
}

.c4a_grid {
    display: grid;
    grid-column-gap: 60px;
    grid-template-columns: max-content max-content;
    place-items: center;
    justify-content: center;
}
```

#### 標題
```css
.c4a_heading {
    color: var(--color-dark-blue);
    font-size: 1.88em;
    font-weight: 500;
    line-height: 1.1;
}
```

#### 按鈕
```css
.c4a_button {
    background-color: var(--color-notification-red);  /* #d84038 */
    border-radius: 15px;
    padding: 18px 24px;
    text-decoration: none;
    display: inline-block;
    transition: all var(--transition-base);
}

.c4a_button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.c4a_button-text {
    color: #f2f2f2;
    font-size: 1.56em;
    line-height: 1.1;
    text-align: center;
    font-weight: 500;
}
```

#### 響應式調整

| Breakpoint | Grid | Button Width |
|------------|------|--------------|
| Desktop (≥992px) | 2 columns | auto |
| Tablet (≤991px) | 1 column | auto |
| Mobile (≤767px) | 1 column | 160px (min-width) |

---

## 📱 響應式斷點總結

### 主要斷點
```css
/* Webflow 原始斷點 */
@media (min-width: 1440px) { /* Desktop Large */ }
@media (max-width: 991px)  { /* Tablet */ }
@media (max-width: 767px)  { /* Mobile Landscape */ }
@media (max-width: 479px)  { /* Mobile Portrait */ }
```

### HTML 字體大小調整
```css
/* Desktop default */
html { font-size: 19px; }

/* Tablet */
@media (max-width: 991px) {
    html { font-size: 19px; }
}

/* Mobile Landscape */
@media (max-width: 767px) {
    html { font-size: 16px; }
}

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

---

## 🎯 互動效果規格

### Hover 效果
```css
/* Tab 文字 Hover */
.painpoint_text:hover {
    text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
}

/* 導航連結 Hover */
.nav-link:hover {
    background-color: var(--color-dark-blue);
}

/* 連結 Hover */
a:hover {
    opacity: 0.6;
}
a:active {
    opacity: 1;
}

/* 按鈕 Hover */
.c4a_button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
```

### 過渡動畫
```css
/* Tabs */
--transition-tabs: ease-in-out-cubic;

/* 輪播 */
--transition-slider: ease-in-out-quint;

/* 數字 Countup */
--animation-countup: 3s ease-out;
```

---

## 🏗️ 組件實現清單

### ✅ 已實現
- [x] `VideoHero.astro` - 需調整字體大小和間距
- [x] `Header.astro` - 已完成
- [x] `Footer.astro` - 已完成

### ⏳ 需新增/修改
- [ ] `VideoHero.astro` - 調整字體大小、漸層遮罩
- [ ] `PainpointSection.astro` - 新增組件
- [ ] `StatisticsSection.astro` - 新增組件，含 countup 動畫
- [ ] `ClientCasesSection.astro` - 新增組件，含輪播功能
- [ ] `CTASection.astro` - 新增組件

---

## 📋 驗收標準 (Acceptance Criteria)

### 視覺保真度檢查
- [ ] 所有顏色與 Webflow 原始設計 100% 一致
- [ ] 所有字體大小（含響應式）與規格一致
- [ ] 所有間距（padding, margin, gap）與規格一致
- [ ] 所有圓角（border-radius）與規格一致
- [ ] 所有陰影（box-shadow）與規格一致

### 響應式檢查
- [ ] Desktop (≥1440px) 佈局正確
- [ ] Tablet (≤991px) 佈局正確
- [ ] Mobile (≤767px) 佈局正確
- [ ] Mobile Portrait (≤479px) 佈局正確

### 互動效果檢查
- [ ] Hover 效果流暢
- [ ] 動畫過渡自然
- [ ] 輪播功能正常
- [ ] Countup 動畫正常

### 效能檢查
- [ ] Lighthouse Performance ≥ 90
- [ ] 影片載入優化（WebM + MP4 fallback）
- [ ] 圖片 lazy loading
- [ ] CSS/JS minification

---

## 🔄 實現順序建議

1. **階段 1: 設計系統更新**
   - 新增缺失的 CSS 變數到 `theme.css`
   - 更新響應式字體大小斷點

2. **階段 2: Hero Section 調整**
   - 修改 `VideoHero.astro` 字體大小
   - 調整漸層遮罩方向
   - 調整 Logo 尺寸

3. **階段 3: 新增 Sections**
   - `PainpointSection.astro`
   - `StatisticsSection.astro`
   - `ClientCasesSection.astro`
   - `CTASection.astro`

4. **階段 4: 響應式測試**
   - 測試所有斷點
   - 調整移動端佈局

5. **階段 5: 動畫與互動**
   - Countup 動畫
   - 輪播功能
   - Hover 效果

6. **階段 6: 效能優化**
   - 影片壓縮
   - 圖片優化
   - Code splitting

---

*此文件由 UX Expert 創建，最後更新：2026-02-10*
*參考來源：Webflow Export HTML (7.4MB)*