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

Story 1-7 Solutions Page - UX Pixel-Perfect Specifications

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

---

🎨 Design Token 驗證

色彩系統

用途	變數名稱	Hex Color	CSS Variable	驗證狀態
主品牌色	Enchun Blue	#23608c	--color-enchunblue	✅ 已定義
深色	Dark Blue	#062841	--color-dark-blue	⚠️ 需新增
淺藍色	Tropical Blue	#c7e4fa	--color-tropical-blue	✅ 已定義
淺藍色 2	Light Blue	#3083bf	--color-enchunblue-dark	✅ 已定義
中藍色	Medium Blue	#67aee1	--color-medium-blue	⚠️ 需新增
CTA 強調	Amber	#f6c456	--color-amber	✅ 已定義
Hot 標籤	Notification Red	#d84038	--color-notification-red	⚠️ 需新增
文字主要	Grey 3	#828282	--color-gray-700	✅ 已定義
背景	Grey 6	#f2f2f2	--color-gray-100	✅ 已定義

新增設計 Token 需求

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

---

📐 Section 詳細規格

1. Hero Section

新組件: SolutionsHero.astro

CSS 規格

.hero-overlay-solution {
    background-color: var(--color-dark-blue);  /* #062841 */
    max-height: 63.5vh;
    padding: 120px 20px 80px;
    text-align: center;
    position: relative;
}

.hero_title_head-solution {
    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-solution {
    color: var(--color-gray-100);  /* #f2f2f2 */
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1.56em;  /* Desktop: ~30px */
    line-height: 1.2;
}

響應式調整

Breakpoint	標題字體大小	副標題字體大小
Desktop (≥992px)	3.39em (~64px)	1.56em (~30px)
Tablet (≤991px)	2.45em (~47px)	1.15em (~22px)
Mobile (≤767px)	7vw	3.4vw

---

2. 服務項目列表

新組件: ServicesList.astro

佈局規格 (Zig-zag Pattern)

.section_service-list {
    background-color: #ffffff;
    padding: 60px 20px;
}

.service-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 交替佈局 - 單數項目圖在右 */
.service-item:nth-child(odd) {
    grid-template-areas: "content image";
}

/* 交替佈局 - 雙數項目圖在左 */
.service-item:nth-child(even) {
    grid-template-areas: "image content";
}

.service-item-content {
    grid-area: content;
}

.service-item-image {
    grid-area: image;
}

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

服務卡片規格

.service-category-tag {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--color-enchunblue);  /* #23608c */
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.service-title {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-dark-blue);  /* #062841 */
    margin-bottom: 16px;
    line-height: 1.3;
}

.service-divider {
    width: 60px;
    height: 2px;
    background-color: var(--color-enchunblue);
    margin-bottom: 16px;
}

.service-description {
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-gray-700);  /* #828282 */
    line-height: 1.6;
}

.service-hot-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: var(--color-notification-red);  /* #d84038 */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

間距規格

Breakpoint	左右間距
Desktop (≥992px)	40px
Tablet (≤991px)	24px
Mobile (≤767px)	12px

---

3. 八個服務項目

1. 社群經營代操

• 圖標: Facebook, Instagram
• 標籤: "海洋專案"
• Hot 標籤: ✅ 顯示

2. Google 商家關鍵字

• 圖標: Google Maps
• 標籤: "Google"
• Hot 標籤: ✅ 顯示

3. Google Ads 關鍵字

• 圖標: Google Ads
• 標籤: "Google"
• Hot 標籤: ❌ 不顯示

4. 網路新聞媒體

• 圖標: News
• 標籤: "媒體行銷"
• Hot 標籤: ❌ 不顯示

5. 網紅行銷專案

• 圖標: YouTube
• 標籤: "口碑行銷"
• Hot 標籤: ✅ 顯示

6. 論壇行銷專案

• 圖標: Dcard
• 標籤: "口碑行銷"
• Hot 標籤: ❌ 不顯示

7. 形象網站設計

• 圖標: ❌ 隱藏
• 標籤: "品牌行銷"
• Hot 標籤: ❌ 不顯示

8. 品牌形象影片

• 圖標: ❌ 隱藏
• 標籤: "品牌行銷"
• Hot 標籤: ❌ 不顯示

---

📱 響應式斷點總結

主要斷點

/* Desktop */
@media (min-width: 992px) { /* Zig-zag 佈局 */ }

/* Tablet */
@media (max-width: 991px) {
    html { font-size: 19px; }
    .service-item { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
    html { font-size: 16px; }
    .service-item { grid-template-columns: 1fr; }
}

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

---

🎯 互動效果規格

Hover 效果

.service-item:hover {
    transform: translateY(-2px);
}

.service-item:hover .service-title {
    color: var(--color-enchunblue);
}

.service-item-image img {
    transition: transform 0.3s ease;
}

.service-item:hover .service-item-image img {
    transform: scale(1.05);
}

---

🏗️ 組件實現清單

⏳ 需新增

• SolutionsHero.astro - 行銷方案 Hero 區塊
• ServicesList.astro - 服務項目列表（含 zig-zag 佈局）
• ServiceCard.astro - 單一服務卡片

🖼️ 需要的圖標資源

圖標名稱	來源
Facebook	Material Icons / SVG
Instagram	Material Icons / SVG
Google Maps	Material Icons / SVG
Google Ads	Material Icons / SVG
News	Material Icons / SVG
YouTube	Material Icons / SVG
Dcard	Custom SVG

---

📋 驗收標準

視覺保真度檢查

• Hero 背景色正確 (#062841)
• 服務卡片 Zig-zag 佈局正確
• Hot 標籤顯示在正確位置
• 分類標籤顏色正確

響應式檢查

• Desktop Zig-zag 交替顯示
• Tablet 保持雙欄
• Mobile 單欄堆疊

互動效果檢查

• Hover 效果流暢
• 連結可點擊

---

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