# 第二阶段实现计划：确立品牌（Bain 血肉）

> 基于设计规格：`docs/superpowers/specs/2026-06-29-phase2-bain-brand-clarity-design.md`
> 前置条件：第一阶段（Accenture 骨架）已完成

## 总览

**目标：** 借鉴 Bain & Company 的品牌清晰度，让网站从"有骨架"升级到"有血肉"
**预计任务数：** 5 个核心任务
**预计修改文件：** ~10 个
**验收标准：** TypeScript 0 errors + ESLint 0 errors + 视觉验证通过

---

## 任务 1：首页 Hero 重构（答案优先）

**优先级：** 高
**依赖：** 无

### 改动文件
- `src/app/(marketing)/home-content.tsx`（HeroSection 部分）

### 具体改动

1. **标题改为结论型**
   - 当前："让每一次数字化转型掷地有声"
   - 改为："数字化转型成功率提升 3 倍"
   - "3 倍"用品牌红高亮

2. **副标题强化量化成果**
   - 当前："12 年深耕，为 500+ 中国企业提供从战略到落地的全链路数字化服务"
   - 改为："500+ 企业验证 · 平均 ROI 提升 2.8 倍 · 项目交付周期缩短 40%"

3. **Hero 指标行优化**
   - 从 4 个精简到 3 个最核心 KPI
   - 数字字号放大，增加视觉冲击力
   - 单位用品牌红

4. **战略问句优化**
   - 位置：Hero 底部，指标行下方
   - 内容："您的企业，准备好迎接下一阶段的增长了吗？"
   - 样式：斜体 + 低对比度 + 适当留白

### 验收标准
- [ ] Hero 首屏 3 秒内能看懂核心价值
- [ ] 标题含品牌红关键词，占比 ≤ 30%
- [ ] 3 个核心 KPI 清晰展示
- [ ] 战略问句引导往下探索

---

## 任务 2：品牌红贯穿优化

**优先级：** 高
**依赖：** 无

### 改动文件
- `src/components/sections/section-header.tsx`
- `src/app/(marketing)/home-content.tsx`（抽查）
- `src/app/(marketing)/services/services-content-v2.tsx`（抽查）
- `src/app/(marketing)/about/about-content-v2.tsx`（抽查）

### 具体改动

1. **SectionHeader 增加品牌红装饰**
   - 在 Eyebrow 标签左侧增加 4px 品牌红竖线
   - 与 Eyebrow 文字垂直对齐，高度等于文字高度

2. **每页品牌红触达点检查**
   - 首页：Hero 关键词 + CTA 按钮 + Section 标签 + 数据高亮 → ✅ 满足
   - 服务页：服务卡片色条 + CTA 按钮 + Section 标签 → ✅ 满足
   - 关于页：数据高亮 + CTA 按钮 + Section 标签 → ✅ 满足

3. **品牌红面积检查**
   - 确保每页品牌红面积 ≤ 10%
   - 禁止大面积背景色使用品牌红

4. **统一链接 hover 态**
   - 所有文本链接 hover 时变为品牌红
   - 过渡动画 200ms ease-out

### 验收标准
- [ ] SectionHeader 有品牌红装饰线
- [ ] 每页品牌红触达点 ≥ 3 个
- [ ] 品牌红面积 ≤ 10%
- [ ] 链接 hover 态统一为品牌红

---

## 任务 3：案例卡片重构（Bain 三段式）

**优先级：** 高
**依赖：** 无

### 改动文件
- `src/components/sections/case-card.tsx`

### 具体改动

1. **接口改造**
   ```typescript
   interface CaseCardProps {
     industry: string;
     title: string;
     challenge: string;      // 新增
     solution: string;       // 新增
     impact: {
       value: string;
       label: string;
     }[];
     href: string;
     className?: string;
   }
   ```

2. **三段式布局**
   - 顶部：行业标签 + 标题
   - 中部：挑战 + 方案（文字较小，信息密度高）
   - 底部：成果数字（超大字号，视觉权重 ≥ 50%）

3. **成果区域视觉强化**
   - 数字超大字号 + tabular-nums
   - 数字品牌红，单位灰色
   - hover 时数字微放大（scale 1.02）
   - 数字与数字之间用细线分隔

4. **保留现有功能**
   - 背景图片 + 渐变遮罩
   - hover 顶部渐变装饰线
   - 滚动入场动画

### 验收标准
- [ ] 案例卡片采用三段式结构
- [ ] 成果数字视觉权重 ≥ 50%
- [ ] hover 时数字微放大
- [ ] TypeScript 类型检查通过

---

## 任务 4：内容策略优化

**优先级：** 中
**依赖：** 无

### 改动文件
- `src/app/(marketing)/home-content.tsx`（Section 标题）

### 具体改动

1. **首页各 Section 标题改为结论型**
   
   | 当前标题 | 改为结论型 |
   |---------|-----------|
   | 我们的服务 | 覆盖数字化全生命周期 |
   | 核心优势 | 成功率提升 3 倍的方法论 |
   | 精选案例 | 500+ 企业的增长实践 |
   | 行业洞见 | 把握数字化前沿趋势 |
   | 客户评价 | 96% 客户选择继续合作 |

2. **答案优先的文案结构**
   - 每个 Section 先给结论（标题）
   - 再给 2-3 个支撑论据
   - 数据用品牌红高亮

3. **每段文字 ≤ 3 行**
   - 超过 3 行则拆分为点列
   - 保持可读性和节奏

### 验收标准
- [ ] 关键 Section 标题为结论型表述
- [ ] 文案结构符合"结论优先"原则
- [ ] 每段文字 ≤ 3 行

---

## 任务 5：极简留白优化

**优先级：** 中
**依赖：** 无

### 改动文件
- `src/app/(marketing)/home-content.tsx`
- `src/app/globals.css`（可选，增加工具类）

### 具体改动

1. **Hero 区域增加留白**
   - 桌面端：上下留白从当前值增加到 ≥ 20vh
   - 内容垂直居中更宽松
   - 减少视觉元素，聚焦核心信息

2. **CTA 区域增加留白**
   - 桌面端：上下留白 ≥ 120px
   - 内容中心化，最大宽度收窄到 max-w-3xl
   - 增加呼吸感

3. **节奏变化**
   - 形成"信息密度 → 大留白 → 再信息密度"的节奏
   - Hero（大留白）→ 服务网格（信息密度）→ Stats Bar（中密度）→ 案例（中密度）→ CTA（大留白）

4. **可选：增加 CSS 工具类**
   - `section-padding-lg`：营销页大间距
   - `content-narrow`：内容收窄类

### 验收标准
- [ ] Hero 区域留白比例符合 Bain 式极简美学
- [ ] CTA 区域留白充足，内容聚焦
- [ ] 页面节奏有张有弛
- [ ] 响应式布局正常

---

## 总体验收

### 功能验收
- [ ] 首页首屏 3 秒内能看懂核心价值
- [ ] 每页品牌红触达点 ≥ 3 个且面积 ≤ 10%
- [ ] 案例卡片采用 Bain 式三段式结构
- [ ] 关键 Section 标题为结论型表述
- [ ] Hero、CTA 区域留白比例符合 Bain 式极简美学

### 技术验收
- [ ] TypeScript 类型检查通过（0 errors）
- [ ] ESLint 检查通过（0 errors）
- [ ] 构建成功，无报错
- [ ] 响应式布局正常（sm/md/lg/xl 断点）

### 设计验收
- [ ] 品牌红使用符合"朱砂点睛"原则
- [ ] 信息层级清晰，对比强烈
- [ ] 留白有节奏感，不拥挤也不空洞
- [ ] 数据呈现方式专业、有说服力

---

## 执行顺序

```
任务1（Hero重构） → 任务2（品牌红贯穿） → 任务3（案例卡片） → 任务4（内容策略） → 任务5（留白优化） → 总体验收
```

**并行可能性：** 任务 2、4、5 可以部分并行，因为它们修改的文件不同。