# Story 1-11 Teams Page - UX Pixel-Perfect Specifications

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

---

## 🎨 Design Token 驗證

### 色彩系統

| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|------|----------|-----------|--------------|----------|
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
| 深色 | Dark Blue | `#062841` | `--color-dark-blue` | ⚠️ 需新增 |
| 主文字 | Text Primary | `#23608c` | `--color-text-primary` | ⚠️ 需確認 |
| 次要文字 | Text Secondary | `#666666` | `--color-gray-600` | ✅ 需確認 |

---

## 📐 Section 詳細規格

### 1. Hero Section

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

```css
.hero-overlay-team {
    background-color: var(--color-dark-blue);  /* 或背景圖 */
    padding: 120px 20px 80px;
    text-align: center;
}

.hero_title_head-team {
    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-team {
    color: var(--color-gray-100);
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.2;
}
```

---

### 2. 工作環境圖片輪播

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

#### 功能規格
- 8 張環境照片輪播
- 左右箭頭導航
- 圓點導航
- 支援觸控滑動

```css
.environment-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .environment-slider {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .environment-slider {
        max-width: 550px;
    }
}

@media (max-width: 767px) {
    .environment-slider {
        max-width: 90vw;
    }
}

.environment-slide {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 12px;
}

.environment-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease;
}

.slider-arrow:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow-left {
    left: 16px;
}

.slider-arrow-right {
    right: 16px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 200ms ease;
}

.slider-dot.active {
    background-color: var(--color-enchunblue);
    width: 32px;
    border-radius: 6px;
}
```

---

### 3. 公司故事區塊

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

```css
.story-section {
    padding: 80px 20px;
    text-align: center;
}

.section_header_w_line {
    margin-bottom: 40px;
}

.header_subtitle_head {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-enchunblue);
    margin-bottom: 8px;
}

.header_subtitle_paragraph {
    font-size: 1rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
}

.divider_line {
    width: 40px;
    height: 2px;
    background-color: var(--color-enchunblue);
    margin: 0 auto;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}
```

---

### 4. 工作福利區塊

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

#### 6 個福利卡片（左右交錯排列）

```css
.benefits-section {
    padding: 60px 20px;
}

.benefit-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 60px;
}

/* 單數卡片：圖示在右 */
.benefit-card:nth-child(odd) {
    grid-template-areas: "content image";
}

/* 雙數卡片：圖示在左 */
.benefit-card:nth-child(even) {
    grid-template-areas: "image content";
}

.benefit-content {
    grid-area: content;
}

.benefit-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-tarawera);
    margin-bottom: 12px;
}

.benefit-icon {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
}

.benefit-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

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

#### 6 個福利內容

1. **高績效、高獎金 + 新人開張獎金** 💰
2. **生日慶生 + 電影日 + 員工下午茶** 🎂
3. **教育訓練補助** 📚
4. **寬敞的工作空間** 🏢
5. **員工國內外旅遊 + 部門聚餐 + 年終活動** ✈️
6. **入職培訓及團隊建設** 🤝

---

### 5. CTA 區塊

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

```css
.c4a-section {
    padding: 80px 20px;
    text-align: center;
}

.c4a-heading {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-tarawera);
    margin-bottom: 32px;
}

.c4a-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-primary);
    color: white;
    padding: 16px 32px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
}

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

#### 外部連結
- 104 人力銀行: `https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust`
- `target="_blank"` 新分頁打開

---

## 📱 響應式斷點總結

```css
/* Desktop */
@media (min-width: 992px) {
    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; }
}
```

---

## 🏗️ 組件實現清單

### ✅ 已實現
- [x] `teams.astro` - 基礎框架

### ⏳ 需新增
- [ ] `TeamsHero.astro` - Hero 區塊
- [ ] `EnvironmentSlider.astro` - 環境照片輪播
- [ ] `CompanyStory.astro` - 公司故事
- [ ] `BenefitsSection.astro` - 工作福利
- [ ] `CTASection.astro` - CTA 區塊

---

## 🖼️ 需要的資產

### 圖片資產
- 環境照片 8 張
- 福利 SVG 圖示 6 個

### 連結資產
- 104 人力銀行連結

---

## 📋 驗收標準

### 視覺保真度檢查
- [ ] Hero 區塊樣式正確
- [ ] 環境照片輪播功能正常
- [ ] 福利卡片左右交錯排列
- [ ] CTA 按鈕連結正確

### 響應式檢查
- [ ] Desktop 完整佈局
- [ ] Tablet 調整後佈局
- [ ] Mobile 單欄佈局

### 功能檢查
- [ ] 輪播左右箭頭正常
- [ ] 圓點導航正常
- [ ] 觸控滑動支援
- [ ] 外部連結新分頁打開

---

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