website-enchun-mgr/_bmad-output/implementation-artifacts/1-11-teams-page.story.md

# Story 1.11: Teams Page Implementation

**Status:** ready-for-dev
**Epic:** Epic 1 - Webflow to Payload CMS + Astro Migration
**Priority:** P2
**Estimated Time:** 6 hours
**Sprint:** Sprint 2

---

## Story (User Story)

**身為** 訪客 (Visitor)，
**我想要** 瀏覽恩群數位的團隊成員頁面，
**這樣** 我可以了解誰將負責我的專案，並感受到團隊的專業與溫度。

---

## Context

這是 Epic 1 的第 11 個故事，負責實作「恩群大本營」頁面。此頁面在原 Webflow 網站中展示團隊成員資訊、工作環境照片、公司故事以及員工福利。

**Story Source:**
- PRD: `docs/prd/05-epic-stories.md` - Story 1.11
- 執行計畫: `docs/prd/epic-1-execution-plan.md`
- 詳細任務: `docs/prd/epic-1-stories-1.3-1.17-tasks.md`
- Webflow 參考: `research/www.enchun.tw/teams.html`

**Dependencies:**
- 必須依賴 Story 1.4 (Global Layout Components) 完成 Header 和 Footer

---

## Acceptance Criteria

### AC1: Teams 頁面路由存在
- [ ] 路由 `/teams` 可正常訪問
- [ ] 頁面標題為「恩群大本營」
- [ ] SEO meta 標籤正確設定

### AC2: Hero Section 實作
- [ ] Hero 標題「恩群大本營」顯示
- [ ] 副標題「Team members of Enchun」顯示
- [ ] 背景圖片/樣式與 Webflow 設計一致
- [ ] 視覺效果與 Webflow 原版相似度 95%+

### AC3: 工作環境圖片輪播
- [ ] 圖片輪播元件實作
- [ ] 支援多張環境照片
- [ ] 輪播控制（左右箭頭、圓點導航）
- [ ] 響應式設計（手機/平板/桌面）

### AC4: 公司故事區塊
- [ ] 區塊標題「恩群數位的故事」
- [ ] 副標題「Something About Enchun Digital」
- [ ] 故事內文正確顯示
- [ ] 裝飾線條樣式一致

### AC5: 工作福利區塊
- [ ] 標題「工作福利」/「Benefit Package」
- [ ] 6 個福利卡片顯示：
  - 高績效、高獎金，新人開張獎金
  - 生日慶生、電影日、員工下午茶
  - 教育訓練補助
  - 寬敞的工作空間
  - 員工國內外旅遊、部門聚餐、年終活動
  - 入職培訓及團隊建設
- [ ] 圖示正確顯示
- [ ] 卡片交互效果（hover）

### AC6: CTA 區塊
- [ ] 標題「以人的成長為優先 創造人的最大價值」
- [ ] 描述文字正確顯示
- [ ] 「立刻申請面試」按鈕連結至 104 人力銀行
- [ ] 按鈕樣式符合設計規範

### AC7: 響應式設計
- [ ] 桌面版（> 991px）布局正確
- [ ] 平板版（768px - 991px）布局正確
- [ ] 手機版（< 768px）布局正確
- [ ] 圖片在不同尺寸下正確載入

### AC8: 效能與視覺測試
- [ ] Lighthouse Performance 分數 >= 95
- [ ] 視覺相似度與 Webflow 相比 >= 95%
- [ ] 無 Console 錯誤

---

## Tasks / Subtasks

### Task 1.11.1: 設計 Teams 頁面架構 (0.5h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 分析 Webflow teams.html 結構
- [ ] 規劃 Astro 元件架構
- [ ] 確認資料來源（靜態 vs. CMS）
- [ ] 規劃響應式斷點

**Leverage:**
- `research/www.enchun.tw/teams.html`
- `apps/frontend/src/layouts/Layout.astro`
- `apps/frontend/src/components/Header.astro`

**Requirements:** AC1, AC7

---

### Task 1.11.2: 建立 Teams 頁面路由和基本結構 (1h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 建立 `apps/frontend/src/pages/teams.astro`
- [ ] 設定頁面 meta 標籤（SEO）
- [ ] 引入 Layout 和共用元件
- [ ] 建立 Hero Section 元件

**Leverage:**
- `apps/frontend/src/pages/index.astro` (參考首頁結構)
- `apps/frontend/src/layouts/Layout.astro`

**Requirements:** AC1, AC2

---

### Task 1.11.3: 實作工作環境圖片輪播 (1.5h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 建立圖片輪播元件 `ImageSlider.astro`
- [ ] 實作左右導航箭頭
- [ ] 實作圓點導航
- [ ] 加入自動播放功能（可選）
- [ ] 載入 Webflow 環境照片（8 張）
- [ ] 響應式圖片尺寸設定

**Leverage:**
- Astro Image 元件
- Tailwind CSS 樣式
- Webflow 原始 CSS 參考

**Requirements:** AC3, AC7

**Prompt:** Role: Frontend Developer specializing in Astro and interactive components | Task: Create an image slider component for the Teams page environment photos with navigation arrows, dot indicators, and responsive design following the Webflow reference design | Restrictions: Must use Astro Image component for optimization, ensure touch-friendly navigation on mobile, maintain 95%+ visual fidelity | Success: Slider works smoothly on all devices, images load with proper sizes, navigation controls are accessible

---

### Task 1.11.4: 實作公司故事區塊 (0.5h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 建立 `StorySection.astro` 元件
- [ ] 實作標題和副標題樣式
- [ ] 加入裝飾線條
- [ ] 加入故事內文

**Leverage:**
- Tailwind CSS typography
- Design tokens (color, spacing)

**Requirements:** AC4

---

### Task 1.11.5: 實作工作福利區塊 (1h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 建立 `BenefitsSection.astro` 元件
- [ ] 實作福利卡片網格布局
- [ ] 加入 6 個福利項目
- [ ] 載入或建立福利圖示 (SVG)
- [ ] 加入 hover 交互效果

**Leverage:**
- Tailwind CSS grid
- SVG 圖示來源：可使用 Webflow 原始 SVG 或重新建立

**Requirements:** AC5

**福利資料結構:**
```typescript
const benefits = [
  {
    title: "高績效、高獎金\n新人開張獎金",
    icon: "make-it-rain.svg", // 或使用 Material Icons
    align: "right"
  },
  {
    title: "生日慶生、電影日\n員工下午茶",
    icon: "birthday-candles.svg",
    align: "left"
  },
  // ... 其他 4 項
]
```

---

### Task 1.11.6: 實作 CTA 區塊 (0.5h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] 建立 `CallToAction.astro` 元件
- [ ] 實作標題和描述文字
- [ ] 建立「立刻申請面試」按鈕
- [ ] 連結至 104 人力銀行: `https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust`

**Leverage:**
- `apps/frontend/src/components/Button.astro` (如果存在)
- Tailwind CSS button 樣式

**Requirements:** AC6

---

### Task 1.11.7: 效能與視覺測試 (1h)
**負責人:** dev
**狀態:** pending

**Subtasks:**
- [ ] Lighthouse 效能測試
- [ ] 視覺相似度比對（與 Webflow）
- [ ] 跨瀏覽器測試（Chrome, Safari, Firefox）
- [ ] 響應式測試（Desktop, Tablet, Mobile）
- [ ] 修復發現的問題

**Leverage:**
- Chrome DevTools Lighthouse
- Responsive Design Mode
- Webflow teams.html 原始參考

**Requirements:** AC8

---

## Dev Technical Guidance

### Webflow 分析（teams.html）

根據 Webflow 原始 HTML，Teams 頁面包含以下主要區塊：

1. **Hero Section**
   - 標題: `h1.hero_title_head-team` → 「恩群大本營」
   - 副標題: `p.hero_sub_paragraph-team` → 「Team members of Enchun」
   - 背景: `hero_bg-team` 類別

2. **工作環境圖片輪播** (`section_video`)
   - 使用 Webflow Slider 元件
   - 8 張環境照片
   - 左右箭頭導航
   - 圓點指示器
   - 區塊標題: 「在恩群工作的環境」/「Working Environment」

3. **公司故事** (`section_story`)
   - 標題: 「恩群數位的故事」
   - 副標題: 「Something About Enchun Digital」
   - 內文段落關於公司理念

4. **工作福利** (`section_benefit`)
   - 6 個福利卡片，左右交錯排列
   - 每個卡片包含圖示和文字
   - 使用 `benefit_card` 和 `benefit_card-opppsite` 類別

5. **CTA 區塊** (`section_call4action`)
   - 標題: 「以人的成長為優先 創造人的最大價值」
   - 描述: 關於團隊理念和招募需求
   - 按鈕: 「立刻申請面試」連結至 104

### 頁面結構規劃

```
apps/frontend/src/pages/teams.astro
├── Layout (Header + Footer)
├── Hero Section
│   ├── Title: 恩群大本營
│   └── Subtitle: Team members of Enchun
├── Image Slider Section
│   ├── Section Header
│   └── Slider (8 photos)
├── Story Section
│   └── Company story text
├── Benefits Section
│   └── 6 benefit cards
└── CTA Section
    └── Apply button
```

### 元件規劃

| 元件名稱 | 路徑 | 用途 |
|---------|------|------|
| `TeamsHero.astro` | `src/components/teams/` | Hero 區塊 |
| `ImageSlider.astro` | `src/components/teams/` | 環境照片輪播 |
| `StorySection.astro` | `src/components/teams/` | 公司故事 |
| `BenefitsSection.astro` | `src/components/teams/` | 工作福利卡片 |
| `CallToAction.astro` | `src/components/teams/` | CTA 區塊 |

### Design Tokens 參考

從 Webflow CSS 提取的樣式參考：

```css
/* Hero Section */
.hero-overlay-team {
  /* 背景樣式，需要從設計稿確認 */
}

.hero_title_head-team {
  /* H1 標題樣式 */
}

.hero_sub_paragraph-team {
  /* 副標題樣式 */
}

/* Section Headers */
.section_header_w_line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.divider_line {
  width: 40px;
  height: 2px;
  background: var(--primary-color);
}

/* Benefits Grid */
.benefit_grid_wrapper {
  display: grid;
  /* 響應式網格配置 */
}
```

### 響應式斷點

根據實現就緒報告建議：

| Breakpoint | Width | Target |
|------------|-------|--------|
| Mobile Portrait | < 479px | 單欄布局 |
| Mobile Landscape | 480px - 767px | 單欄布局 |
| Tablet | 768px - 991px | 2 欄布局 |
| Desktop | > 991px | 3-4 欄布局 |

### 圖片來源

環境照片來源（Webflow CDN）：
- https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f76b4962117e2d84363174_恩群環境 照片1.jpg
- （共 8 張，需遷移至 R2）

福利圖示來源：
- https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b79b2942d05_Make%20it%20rain-bro-%E6%96%B0%E4%BA%BA%E9%96%8B%E5%BC%B5%E7%8D%8E%E9%87%91.svg
- （共 6 個 SVG 圖示）

---

## Architecture Compliance

### 遵循的架構原則

1. **Frontend 慣例**
   - TypeScript/TSX 嚴格型別
   - `PascalCase` 元件名稱
   - `kebab-case` 檔案名稱

2. **共用程式碼**
   - 使用 Layout 元件包含 Header/Footer
   - 使用設計 tokens (Tailwind config)
   - 重用現有 Button 元件（如果適用）

3. **SEO 最佳化**
   - Astro `<title>` 和 `<meta>` 標籤
   - Open Graph 標籤
   - 結構化資料（如適用）

4. **效能最佳化**
   - Astro Image 元件用於圖片優化
   - 懶載入非關鍵資源
   - CSS-in-JS 或 Tailwind CSS

---

## File Structure

```
apps/frontend/src/
├── pages/
│   └── teams.astro                    # Teams 頁面路由 (NEW)
├── components/
│   └── teams/
│       ├── TeamsHero.astro            # Hero 區塊 (NEW)
│       ├── ImageSlider.astro          # 圖片輪播 (NEW)
│       ├── StorySection.astro         # 公司故事 (NEW)
│       ├── BenefitsSection.astro      # 工作福利 (NEW)
│       └── CallToAction.astro         # CTA 區塊 (NEW)
└── styles/
    └── teams.css                      # Teams 頁面專用樣式 (OPTIONAL)
```

---

## Testing Requirements

### Unit Tests

```typescript
// apps/frontend/src/components/teams/__tests__/ImageSlider.test.ts
describe('ImageSlider Component', () => {
  it('should render all images', () => {
    // Test image rendering
  })

  it('should navigate to next slide on arrow click', () => {
    // Test navigation
  })

  it('should show correct active dot indicator', () => {
    // Test dot indicators
  })
})
```

### E2E Tests

```typescript
// apps/frontend/tests/e2e/teams.spec.ts
import { test, expect } from '@playwright/test'

test.describe('Teams Page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/teams')
  })

  test('should display hero section', async ({ page }) => {
    await expect(page.locator('h1')).toContainText('恩群大本營')
  })

  test('should display environment slider', async ({ page }) => {
    await expect(page.locator('[data-testid="image-slider"]')).toBeVisible()
  })

  test('should display all 6 benefit cards', async ({ page }) => {
    const cards = page.locator('[data-testid="benefit-card"]')
    await expect(cards).toHaveCount(6)
  })

  test('CTA button should link to 104 job site', async ({ page }) => {
    const ctaButton = page.locator('a:has-text("立刻申請面試")')
    await expect(ctaButton).toHaveAttribute('href', /104\.com\.tw/)
  })
})
```

### Manual Testing Checklist

#### Desktop (> 991px)
- [ ] Hero 標題和副標題正確顯示
- [ ] 圖片輪播左右箭頭可用
- [ ] 圓點導航顯示正確且可點擊
- [ ] 福利卡片呈現左右交錯布局
- [ ] CTA 按鈕 hover 效果正常

#### Tablet (768px - 991px)
- [ ] 圖片輪播尺寸正確
- [ ] 福利卡片網格調整為 2 欄

#### Mobile (< 768px)
- [ ] Hero 區塊在小螢幕上可讀
- [ ] 圖片輪播支援滑動手勢
- [ ] 福利卡片單欄布局
- [ ] CTA 按鍵尺寸適合觸控

#### Accessibility
- [ ] 所有互動元素可鍵盤操作
- [ ] 圖片有適當 alt 文字
- [ ] 對比度符合 WCAG AA 標準

---

## Risk Assessment

| Risk | Probability | Impact | Mitigation |
|------|------------|--------|------------|
| 圖片輪播在舊裝置效能問題 | Medium | Low | 使用原生 CSS scroll-snap 或輕量套件 |
| 福利圖示遺失或格式不符 | Low | Medium | 從 Webflow CDN 備份或重新建立 SVG |
| 響應式布局差異 | Medium | Medium | 嚴格測試各斷點，參考 Webflow 原始 CSS |
| 視覺相似度不足 95% | Low | High | 與設計稿逐一比對，調整間距和顏色 |

---

## Definition of Done

- [ ] `/teams` 路由可正常訪問
- [ ] 所有 6 個區塊實作完成
- [ ] 圖片輪播功能正常
- [ ] 響應式設計通過 3 個斷點測試
- [ ] Lighthouse Performance >= 95
- [ ] 視覺相似度與 Webflow >= 95%
- [ ] E2E 測試通過
- [ ] 無 Console 錯誤
- [ ] 無無障礙問題
- [ ] Code review 通過
- [ ] sprint-status.yaml 更新為 done

---

## Dev Agent Record

### Agent Model Used
_待填寫_

### Debug Log References
_待填寫_

### Completion Notes
_待實作完成後填寫_

### File List
_待實作完成後填寫_

---

## Change Log

| Date | Action | Author |
|------|--------|--------|
| 2026-01-31 | Story created (ready-for-dev) | SM Agent (Bob) |

---

**Let's go! Team page is gonna be awesome!** 🚀