novalon-website/docs/superpowers/plans/2026-07-03-bain-brand-clarity-upgrade.md

# Bain 品牌清晰度升级（方案 B 中度 Bain 化）实现计划

> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。

**目标：** 将首页 Bain 化升级——答案优先 Hero + 结论化标题 + 成果前置案例 + 精准品牌红 + 留白节奏校准

**架构：** 基于 `home-content-v11.tsx` 创建 v12 版本，按 5 大任务逐步改造，最后切换首页入口到 v12。不改动 CMS 版本（后续再同步）。

**技术栈：** React 18 + TypeScript + Tailwind CSS + Framer Motion

**起点文件：** `src/app/(marketing)/home-content-v11.tsx`
**终点文件：** `src/app/(marketing)/home-content-v12.tsx`
**入口切换：** `src/app/(marketing)/page.tsx`

---

## 文件清单

| 文件 | 操作 | 职责 |
|------|------|------|
| `src/app/(marketing)/home-content-v12.tsx` | 新建（从 v11 复制） | Bain 化升级后的首页主文件 |
| `src/app/(marketing)/page.tsx` | 修改 | 切换入口从 CMS → v12 |

---

## 任务 1：复制 v11 为 v12 基础版本

**文件：**
- 创建：`src/app/(marketing)/home-content-v12.tsx`（从 v11 复制）

- [ ] **步骤 1：复制 v11 为 v12**

```bash
cp src/app/(marketing)/home-content-v11.tsx src/app/(marketing)/home-content-v12.tsx
```

- [ ] **步骤 2：验证文件存在且可编译**

```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期：无类型错误（与 v11 一致）

- [ ] **步骤 3：Commit**

```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat: copy home-content-v11 as base for v12 bain upgrade"
```

---

## 任务 2：Hero 区 Bain 化重构（答案优先）

**文件：**
- 修改：`src/app/(marketing)/home-content-v12.tsx` 的 `HeroSection` 函数

### 2.1 标题改造

- [ ] **步骤 1：修改主标题文案**

将 HeroSection 内的 h1 标题从：
```tsx
<div className="block">以战略远见</div>
<div className="block mt-5">
  <span>驱动数字化</span>
  <span className="relative inline-block ml-4">
    <span className="relative text-brand font-extrabold">
      未来
      <motion.span ... />
    </span>
  </span>
</div>
```
改为：
```tsx
<div className="block">数字化转型</div>
<div className="block mt-5">
  <span className="relative inline-block">
    <span className="relative text-brand font-extrabold">
      成功率提升 3 倍
      <motion.span
        className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
        style={{ transformOrigin: 'left' }}
        initial={{ scaleX: 0 }}
        animate={{ scaleX: 1 }}
        transition={{ duration: 0.9, delay: 1.3, ease: EASE_OUT }}
      />
    </span>
  </span>
</div>
```

- [ ] **步骤 2：副标题改为战略性提问**

将 p 副标题从：
```tsx
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
```
改为：
```tsx
您的企业，准备好迎接下一阶段的增长了吗？
```
并添加 `italic` 和 `opacity-60` 类（保持现有 text-dark-text-secondary，额外降低对比度）。

### 2.2 增加快速信任锚点行

- [ ] **步骤 3：在标题和 CTA 之间增加信任锚点行**

在 subtitle 的 `<motion.p>` 之后、CTA 的 `<motion.div>` 之前，插入：

```tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, delay: 0.4, ease: EASE_OUT }}
  className="flex flex-wrap gap-x-8 gap-y-2 mb-10 sm:mb-12 md:mb-16"
>
  <span className="text-sm sm:text-base font-medium text-dark-text-secondary">
    <span className="text-brand font-bold">500+</span> 企业验证
  </span>
  <span className="text-sm sm:text-base font-medium text-dark-text-secondary">
    <span className="text-brand font-bold">2.8x</span> 平均 ROI
  </span>
  <span className="text-sm sm:text-base font-medium text-dark-text-secondary">
    <span className="text-brand font-bold">40%</span> 交付周期缩短
  </span>
</motion.div>
```

### 2.3 布局改造：去掉右侧卡片，底部增加数据条

- [ ] **步骤 4：移除右侧 12 年卡片（lg:col-span-3 的那栏）**

删除 grid 内第二个 `<motion.div>`（从 `className="hidden lg:block lg:col-span-3"` 开始的整块），并将第一栏从 `lg:col-span-9` 改为 `lg:col-span-8`。

- [ ] **步骤 5：在 CTA 按钮下方增加底部数据条**

在 CTA 按钮的 `<motion.div>` 之后、grid 关闭之前，插入底部数据条：

```tsx
<motion.div
  initial={{ opacity: 0, y: 30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 1, delay: 0.85, ease: EASE_OUT }}
  className="mt-16 sm:mt-20 md:mt-24 pt-10 border-t border-white/10"
>
  <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
    {[
      { value: '12', suffix: '年', label: '行业深耕', sub: '经验沉淀', highlight: true },
      { value: '500', suffix: '+', label: '企业客户', sub: '累计服务' },
      { value: '98', suffix: '%', label: '客户续约', sub: '年度续约率' },
      { value: '6', suffix: '款', label: '自研产品', sub: '全链路覆盖' },
    ].map((item, i) => (
      <div key={i}>
        <div className="text-3xl sm:text-4xl font-bold tracking-tight mb-2">
          <span className={item.highlight ? 'text-brand' : 'text-white'}>{item.value}</span>
          <span className={item.highlight ? 'text-brand font-bold' : 'text-white font-bold'}>{item.suffix}</span>
        </div>
        <div className="text-white font-semibold text-sm mb-0.5">{item.label}</div>
        <div className="text-xs text-dark-text-muted">{item.sub}</div>
      </div>
    ))}
  </div>
</motion.div>
```

### 2.4 调整 Hero 垂直留白

- [ ] **步骤 6：增加 Hero 垂直内边距**

将内容容器的 `py-28 sm:py-36 md:py-44 lg:py-56` 改为 `py-32 sm:py-40 md:py-48 lg:py-60`（增加约 15-20%）。

- [ ] **步骤 7：验证 Hero 编译通过**

```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期：0 errors

- [ ] **步骤 8：Commit**

```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): hero bain-style重构 - 答案优先+量化结论+底部数据条"
```

---

## 任务 3：Section 标题结论化 + 留白节奏校准

**文件：**
- 修改：`src/app/(marketing)/home-content-v12.tsx` 的所有 Section 标题

### 3.1 StatsSection 标题

- [ ] **步骤 1：修改 Stats 标题**

将 StatsSection 内的 h2 从：
```tsx
用数据说话<br />的专业实力
```
改为：
```tsx
12 年深耕，<br />500+ 企业的共同选择
```

### 3.2 ServicesSection 标题

- [ ] **步骤 2：修改 Services 标题**

将 ServicesSection 内的 h2 从：
```tsx
四位一体的数字化服务体系
```
改为：
```tsx
四大服务，覆盖数字化全链路
```

### 3.3 IndustriesSection 标题

- [ ] **步骤 3：修改 Industries 标题**

将 IndustriesSection 内的 h2 从：
```tsx
深耕六大<br />核心行业
```
改为：
```tsx
深入 6 大行业，<br />懂业务才能做好数字化
```

### 3.4 CasesSection 标题

- [ ] **步骤 4：修改 Cases 标题**

将 CasesSection 内的 h2 从：
```tsx
可衡量的业务成果
```
改为：
```tsx
每一个项目，都以业务改善为衡量标准
```

### 3.5 ApproachSection 标题

- [ ] **步骤 5：修改 Approach 标题**

将 ApproachSection 内的 h2 从：
```tsx
四步交付法，<br />确保每一个项目成功落地
```
改为：
```tsx
500+ 项目验证的交付方法论
```

### 3.6 InsightsSection 标题

- [ ] **步骤 6：修改 Insights 标题**

将 InsightsSection 内的 h2 从：
```tsx
思想领导力
```
改为：
```tsx
基于实践的行业洞见与方法论
```

### 3.7 CTASection 标题

- [ ] **步骤 7：修改 CTA 标题**

将 CTASection 内的 h2 从：
```tsx
准备好开启您的
<br />
<span ...>数字化转型</span>
之旅了吗？
```
改为：
```tsx
让数字化投入
<br />
<span ...>真正转化为业务增长</span>
```
（保持 SVG 下划线装饰，只改文字内容）

### 3.8 留白节奏校准

- [ ] **步骤 8：调整所有 Section 的垂直间距**

按梯度调整 py 值：
- Hero / CTA：最大留白 → `py-32 sm:py-40 md:py-52 lg:py-60`
- Stats / Cases：中等留白 → `py-28 sm:py-36 md:py-44 lg:py-52`
- Services / Industries / Approach / Insights：标准留白 → `py-24 sm:py-32 md:py-40 lg:py-48`

- [ ] **步骤 9：调整标题区与内容区的间距**

将各 Section 标题与内容的间距（mb-16/mb-20/mb-28）整体增加约 20%：
- `mb-16` → `mb-20`
- `mb-20` → `mb-24`
- `mb-28` → `mb-32`

- [ ] **步骤 10：验证编译通过**

```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期：0 errors

- [ ] **步骤 11：Commit**

```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): section标题结论化 + 留白节奏校准"
```

---

## 任务 4：案例模块成果前置（Bain 式数据冲击力）

**文件：**
- 修改：`src/app/(marketing)/home-content-v12.tsx` 的 `CasesSection`

### 4.1 案例卡片布局翻转

- [ ] **步骤 1：重写案例卡片结构——成果前置**

将 CasesSection 内每个 case 的 grid 结构从"左文右数"改为"顶数下文"：

原结构（5 列 grid，左 3 右 2）：
```tsx
<div className="grid lg:grid-cols-5 gap-0">
  <div className="lg:col-span-3 p-14 lg:p-20 ...">
    ... 挑战/方案/成果段落 + 证言 ...
  </div>
  <div className="lg:col-span-2 p-14 lg:p-20 ...">
    ... Key Results 数字 ...
  </div>
</div>
```

改为（单列，顶部成果数字，下方内容）：
```tsx
<div className="p-10 sm:p-14 lg:p-16">
  {/* 顶部：成果数字横跨全宽 */}
  <div className="mb-12 pb-12 border-b border-white/10">
    <div className="text-[11px] text-dark-text-muted mb-8 tracking-[0.25em] uppercase font-bold">
      Key Results
    </div>
    <div className="grid grid-cols-3 gap-6 md:gap-10">
      {caseItem.metrics.map((metric, j) => (
        <div key={j}>
          <motion.div
            className="text-5xl lg:text-7xl font-bold mb-3 tracking-tight"
            whileInView={{ x: 0, opacity: 1 }}
            initial={{ x: -20, opacity: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.15 + j * 0.1, ease: EASE_OUT }}
          >
            <span className={j === 0 ? 'text-brand' : 'text-white'}>{metric.value}</span>
          </motion.div>
          <div className="flex items-center gap-3">
            <div className={cn('w-10 h-px', j === 0 ? 'bg-brand' : 'bg-white/20')} />
            <div className="text-sm text-dark-text-secondary font-medium">{metric.label}</div>
          </div>
        </div>
      ))}
    </div>
  </div>

  {/* 中部：标签 + 标题 */}
  <div className="flex items-center gap-5 mb-8">
    <Badge className={cn(caseItem.bgClass, 'text-white border-transparent')}>
      {caseItem.industry}
    </Badge>
    <span className="text-[11px] text-dark-text-muted tracking-wide font-semibold">
      CASE #{String(i + 1).padStart(2, '0')}
    </span>
  </div>

  <h3 className={cn(
    'text-2xl lg:text-3xl font-bold mb-10 leading-tight transition-colors duration-400',
    'text-white group-hover:text-brand'
  )}>
    {caseItem.title}
  </h3>

  {/* 下部：成果要点 + 方案要点 + 挑战要点 */}
  <div className="space-y-8 mb-12">
    {/* 成果 */}
    <div>
      <div className="flex items-center gap-3 mb-4">
        <CheckCircle2 className={cn('w-4 h-4', caseItem.colorClass)} />
        <span className={cn('text-sm font-bold', caseItem.colorClass)}>核心成果</span>
      </div>
      <ul className="space-y-2.5 pl-7">
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          ✅ 项目一次性上线成功，业务中断 {caseItem.industry === '智能制造' ? '< 48 小时' : '< 1 周'}
        </li>
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          ✅ {caseItem.metrics[0]?.label}达 {caseItem.metrics[0]?.value}
        </li>
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          ✅ {caseItem.metrics[1]?.label}达 {caseItem.metrics[1]?.value}
        </li>
      </ul>
    </div>

    {/* 方案 */}
    <div>
      <div className="flex items-center gap-3 mb-4">
        <Zap className={cn('w-4 h-4', caseItem.colorClass)} />
        <span className={cn('text-sm font-bold', caseItem.colorClass)}>解决方案</span>
      </div>
      <ul className="space-y-2.5 pl-7">
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          → {caseItem.solution.split('。')[0]}。
        </li>
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          → {caseItem.solution.split('。')[1] || '行业最佳实践 + 企业定制化结合'}。
        </li>
      </ul>
    </div>

    {/* 挑战 */}
    <div>
      <div className="flex items-center gap-3 mb-4">
        <Target className={cn('w-4 h-4', caseItem.colorClass)} />
        <span className={cn('text-sm font-bold', caseItem.colorClass)}>面临挑战</span>
      </div>
      <ul className="space-y-2.5 pl-7">
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          ◇ {caseItem.challenge.split('，')[0]}
        </li>
        <li className="text-dark-text-secondary leading-relaxed text-sm">
          ◇ {caseItem.challenge.split('，')[1] || '决策效率低下'}
        </li>
      </ul>
    </div>
  </div>

  {/* 底部：客户证言 */}
  <div className="flex items-start gap-5 pt-8 border-t border-white/10">
    <Quote className={cn('w-8 h-8 shrink-0 mt-0.5 opacity-40', caseItem.colorClass)} />
    <div>
      <p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
        &ldquo;{caseItem.quote}&rdquo;
      </p>
      <p className="text-xs text-dark-text-muted">
        — {caseItem.author}，{caseItem.author}
      </p>
    </div>
  </div>
</div>
```

注意：需要从 lucide-react 额外导入 `CheckCircle2, Zap, Target`（如果未导入的话）。

### 4.2 卡片顶部色条保留

- [ ] **步骤 2：保留卡片顶部 hover 色条**

将原有的顶部色条 `div`（`absolute top-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100`）保留在新结构的最外层容器顶部。

- [ ] **步骤 3：验证编译通过**

```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期：0 errors

- [ ] **步骤 4：Commit**

```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): 案例模块成果前置 + 要点式内容结构"
```

---

## 任务 5：品牌红精准贯穿（朱砂点睛 2.0）

**文件：**
- 修改：`src/app/(marketing)/home-content-v12.tsx`

### 5.1 减少服务卡片的品牌红

- [ ] **步骤 1：服务卡片左侧 hover 色条改为白色**

将 ServicesSection 内服务卡片的左侧色条（`w-1 scale-y-0 group-hover:scale-y-100`）的颜色从品牌色改为 `bg-white/20`（hover 时 `bg-white/40`），移除动态颜色计算。

- [ ] **步骤 2：服务卡片"了解详情"link 文字改为白色，hover 才出红**

将服务卡片底部 `了解详情` 链接的颜色从 `service.colorClass` 改为 `text-white/70`，并添加 `group-hover:text-brand` 的 hover 效果。

### 5.2 减少行业卡片的品牌红

- [ ] **步骤 3：行业卡片图标统一白色，移除彩色**

将 IndustriesSection 内行业卡片的图标颜色类（`ind.colorClass`）统一改为 `text-white/80`，移除彩色图标。将 Badge 的颜色也统一为白色边框样式。

### 5.3 减少交付方法的品牌红

- [ ] **步骤 4：Approach 步骤数字改为白色，hover 才出红**

将 ApproachSection 内步骤数字（`text-brand`）改为 `text-white/80`，并添加 `group-hover:text-brand` 过渡效果。连接线保持品牌红。

### 5.4 Stats 区品牌红精简

- [ ] **步骤 5：Stats 只保留第 1 个指标的后缀品牌红，其余白色**

将 StatItem 组件内的 suffix 品牌红逻辑改为：只有第一个（index 0）才用品牌红，其余用白色。或者更简单——传入一个 `highlight` prop 控制。

修改方案：在 STATS 数组里给第一项加 `highlight: true`，然后在 StatItem 里根据 `highlight` prop 决定 suffix 颜色。

### 5.5 验证首页品牌红 5 处清单

对照以下 5 处清单逐一验证：
- [ ] **步骤 6：验证 Hero 主标题关键词品牌红** ✅
- [ ] **步骤 7：验证 Hero CTA 主按钮品牌红** ✅
- [ ] **步骤 8：验证案例首个成果数字品牌红** ✅
- [ ] **步骤 9：验证 Section Eyebrow 下划线品牌红** ✅
- [ ] **步骤 10：验证 CTA 区主按钮 + 关键词品牌红** ✅

- [ ] **步骤 11：验证编译通过**

```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期：0 errors

- [ ] **步骤 12：Commit**

```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): 品牌红精准贯穿 - 朱砂点睛2.0，5处强记忆点"
```

---

## 任务 6：切换首页入口 + 全面验证

### 6.1 切换入口

- [ ] **步骤 1：修改 page.tsx 引入 v12**

将 `src/app/(marketing)/page.tsx` 从：
```tsx
import HomeContentCms from './home-content-cms';

export default function HomePage() {
  return <HomeContentCms />;
}
```
改为：
```tsx
import HomeContentV12 from './home-content-v12';

export default function HomePage() {
  return <HomeContentV12 />;
}
```

### 6.2 类型检查与构建

- [ ] **步骤 2：TypeScript 全量类型检查**

```bash
npx tsc --noEmit
```
预期：0 errors

- [ ] **步骤 3：ESLint 检查**

```bash
npm run lint
```
预期：0 errors

- [ ] **步骤 4：生产构建**

```bash
npm run build
```
预期：构建成功，无 error

### 6.3 启动开发服务器验证

- [ ] **步骤 5：启动开发服务器**

```bash
npm run dev
```
（非阻塞，等待 3 秒后检查状态）

- [ ] **步骤 6：用浏览器验证首页效果**

打开 http://localhost:3000，检查：
- Hero 标题是否为"数字化转型 成功率提升 3 倍"
- 快速信任锚点行是否显示（500+企业验证 · 2.8x平均ROI · 40%交付周期缩短）
- 底部数据条 4 个指标是否显示
- 各 Section 标题是否已结论化
- 案例模块成果是否前置（顶部数字）
- 品牌红使用是否克制（约 5 处强记忆点）

### 6.4 Commit 切换

- [ ] **步骤 7：Commit 入口切换**

```bash
git add src/app/(marketing)/page.tsx
git commit -m "feat: 切换首页入口到 v12 (Bain品牌清晰度升级)"
```

---

## 验收检查清单

### 功能验收
- [ ] 首页首屏 3 秒内能看懂核心价值（量化结论 + 信任锚点）
- [ ] 所有 Section 标题为结论型表述（非描述/分类）
- [ ] 案例模块成果前置，第一眼看到核心数字
- [ ] 首页品牌红触达点 ≈ 5 处，视觉面积 ≤ 5%
- [ ] Hero、CTA 区域留白比例符合 Bain 式极简美学

### 技术验收
- [ ] TypeScript 类型检查通过（0 errors）
- [ ] ESLint 检查通过（0 errors）
- [ ] Next.js 生产构建成功，无报错
- [ ] 响应式布局正常（sm/md/lg/xl 四断点）
- [ ] 无新增性能问题（Lighthouse Performance ≥ 90 保持）

### 设计验收
- [ ] 品牌红使用符合"朱砂点睛 2.0"原则（少而精）
- [ ] 信息层级清晰，标题/正文/辅助对比强烈
- [ ] 留白有节奏感，不拥挤也不空洞
- [ ] 数据呈现方式专业、有说服力
- [ ] 整体 Bain 气质明显，但保留 Accenture 信息密度和 Porsche 品质感

---

## 回滚方案

如发现问题，可快速回滚：
```bash
git revert HEAD  # 回滚入口切换 commit
```
或手动将 `page.tsx` 改回 CMS 版本。

---

## 后续迭代

- **方案 C（深度 Bain 化，可选）**：模块重排 + 极简大留白 + 纯排版驱动
- **CMS 同步**：将 v12 的 Bain 化设计同步到 CMS 版本的组件和 mock 数据中
- **内页推广**：将 Bain 化策略（结论化标题 + 答案优先 + 精准品牌红）推广到产品/方案/服务等内页