pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
392 lines
7.1 KiB
Markdown
392 lines
7.1 KiB
Markdown
# 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*
|