novalon-website/docs/superpowers/plans/2026-06-29-phase2-bain-brand-clarity.md

第二阶段实现计划：确立品牌（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. 接口改造

   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 可以部分并行，因为它们修改的文件不同。