website-enchun-mgr/specs/001-users-pukpuk-dev/ux-story-1-11-teams-spec.md

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

.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 張環境照片輪播
• 左右箭頭導航
• 圓點導航
• 支援觸控滑動

.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

.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 個福利卡片（左右交錯排列）

.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

.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" 新分頁打開

---

📱 響應式斷點總結

/* 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; }
}

---

🏗️ 組件實現清單

✅ 已實現

• 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