diff --git a/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md b/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md
new file mode 100644
index 0000000..484ea89
--- /dev/null
+++ b/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md
@@ -0,0 +1,144 @@
+---
+target: current UI/UX design vs Bain
+total_score: 24
+p0_count: 1
+p1_count: 4
+p2_count: 1
+timestamp: 2026-07-07T12-40-50Z
+slug: src-app-marketing
+---
+Method: dual-agent (A: design review · B: detector + browser evidence)
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 2 | Active nav exists; homepage crashes with only “出错了” + toast, no useful status |
+| 2 | Match System / Real World | 3 | Chinese enterprise context fits, but terms like “数据中台” / “全链路” are jargon for non-technical buyers |
+| 3 | User Control and Freedom | 3 | Standard back/forward works; error page only offers “重试”, no escape path |
+| 4 | Consistency and Standards | 3 | Tokens are consistent, but product/solution/service pages use nearly identical card templates → monotony |
+| 5 | Error Prevention | 2 | Form labels present, yet the homepage crashes before any prevention can happen |
+| 6 | Recognition Rather Than Recall | 3 | Mega dropdown + labeled icons help, but too many cards strain working memory |
+| 7 | Flexibility and Efficiency | 2 | No search, no shortcuts, no recent items; power users must browse level by level |
+| 8 | Aesthetic and Minimalist Design | 2 | White space is generous, but repeated eyebrow labels, big numbers, and zero imagery create noise + monotony |
+| 9 | Error Recovery | 1 | Error boundary text is vague, no diagnosis or recovery guidance |
+| 10 | Help and Documentation | 1 | No FAQ, no contextual help, no whitepaper download; pages must self-explain |
+| **Total** | | **24 / 40** | **Acceptable — significant improvements needed** |
+
+## Anti-Patterns Verdict
+
+**LLM assessment: Yes, the site reads as AI-generated.**
+
+Tells found across the marketing surface:
+- Repeated `01/02/03…` card numbering on product, solution, and service grids — used as decoration, not real sequence.
+- Tiny uppercase eyebrow labels (“Product Matrix”, “Industry Expertise”, “Our Process”, etc.) above nearly every section.
+- Identical card templates reused across three different business pages: icon + number + title + description + tag + link.
+- Side-stripe borders on cards (colored left/right bars on hover) — explicitly banned in the Impeccable register.
+- Generic hero metrics (“6+ 产品线 / 100% 自研率 / 全栈技术覆盖”) — the SaaS cliché.
+- Zero real photography or screenshots; every page is icons + text.
+- Tight Chinese typography with `leading-[0.88–0.92]` and `tracking-tighter`, harming readability.
+
+**Deterministic scan (Assessment B):**
+- CLI detector hit 2 warnings: `bounce-easing` in `detail.test.tsx` (test file — noise/false positive) and `layout-transition` (`transition: width`) in `src/components/ui/scroll-progress.tsx` (real).
+- Browser overlay on 5 pages found: `layout-transition: width/height`, `low-contrast 2.6:1` for `#94a3b8` text on white (WCAG AA failure), `single-font: pingfang sc` (likely false positive from fallback resolution), and `image-hover-transform` on `![]()
`.
+- Console shows repeated Framer Motion `useScroll` hydration errors on the homepage: `Target ref is defined but not hydrated`.
+
+**Visual overlays:** Assessment B injected the detector overlay successfully via Playwright headless; screenshots are saved in `/private/tmp/impeccable-screenshots/`. No persistent user-visible overlay is active in the IDE browser.
+
+## Overall Impression
+
+The site has a disciplined token system and a clear four-layer narrative structure, but it currently ships as a generic AI-template consulting landing page. The biggest single issue is that the homepage does not render — it collapses with a React error boundary. Even if that were fixed, the lack of real imagery, repeated card templates, and weak proof points leave it far behind Bain’s editorial confidence.
+
+## What’s Working
+
+1. **Token and design-system discipline** — colors, typography, spacing, and shadows are fully variable-driven in `globals.css`; the cinnabar red `#C41E3A` is used with restraint.
+2. **Four-layer narrative is consistent** — every detail page follows Hero → Value → Trust → CTA, giving visitors a stable mental model.
+3. **Responsive and motion-respect basics are in place** — `prefers-reduced-motion`, focus-visible, 44×44 touch targets, and mobile safe-area handling show engineering care.
+
+## Priority Issues
+
+### [P0] Homepage crashes on load
+- **What**: `http://localhost:3000/` renders an error boundary with heading “出错了” and a “4 errors” toast. Console points to `HeroSection` in `home-content-v13.tsx` throwing `Target ref is defined but not hydrated` from Framer Motion `useScroll`.
+- **Why it matters**: For a B2B consulting site, the homepage is the trust front door. A crashing first impression is catastrophic for CEO/CIO/CTO visitors.
+- **Fix**: Guard the scroll ref in `HeroSection`; add a robust fallback UI for empty or malformed CMS data; log the error source.
+- **Suggested command**: `$impeccable harden`
+
+### [P1] Zero real imagery across the entire site
+- **What**: No photography, team portraits, client scenes, or product screenshots anywhere; every page relies on Lucide icons and geometric decoration.
+- **Why it matters**: Brand consulting sites are judged first on credibility. Icons alone read as template work and undermine the “沉稳 · 精致 · 可信赖” brand promise.
+- **Fix**: Introduce 1–3 high-quality real images on the hero, case-study, and about/team sections. Avoid replacing photography with colored blocks or icon grids.
+- **Suggested command**: `$impeccable shape`
+
+### [P1] Product / solution / service pages are the same template
+- **What**: All three listing pages use identical “icon + big number + title + description + tag + link” cards. Visitors cannot visually distinguish what type of offering they are looking at.
+- **Why it matters**: It reinforces the AI-template feel and causes reading fatigue; it also fails to match the different mental models for products (features), solutions (industry pain), and services (process).
+- **Fix**: Give each listing page a distinct module language — product cards can carry feature screenshots, solution cards can lead with industry pain + outcome, service cards can show process steps and deliverables.
+- **Suggested command**: `$impeccable distill`
+
+### [P1] Uppercase eyebrow labels repeat on every section
+- **What**: Sections are prefaced with labels like “Product Matrix”, “Industry Expertise”, “Professional Services”, “Our Process”.
+- **Why it matters**: This is one of the strongest AI-landing-page grammar markers of 2023–2026 and strips away brand uniqueness.
+- **Fix**: Keep at most one deliberate label system; otherwise use short Chinese section introductions or let typography alone create hierarchy.
+- **Suggested command**: `$impeccable distill`
+
+### [P2] Low-contrast helper text fails WCAG AA
+- **What**: Detector measured `2.6:1` for `#94a3b8` text on white; WCAG AA requires `4.5:1` for body text.
+- **Why it matters**: Small muted labels and placeholders become unreadable for users with low vision or on bright screens, and it feels cheap.
+- **Fix**: Bump helper/muted text to at least `#64748B` on white, or darken the body text toward `--color-text-primary`.
+- **Suggested command**: `$impeccable audit`
+
+## Persona Red Flags
+
+**Jordan（首次访问者）**
+- 首页直接看到“出错了”，5 秒内无法判断是公司问题还是自己的问题，极大概率离开。
+- 即便首页正常，面对 6 个产品卡片和“数据中台”“全链路”等术语，没有解释入口。
+- 没有明确的“从这里开始”引导，CTA 多但目的不清晰。
+
+**Riley（压力测试者）**
+- 首页崩溃且错误信息模糊，无诊断细节。
+- 案例使用匿名客户（“某上市制造企业”），无法验证真实性。
+- “500+ 项目验证”与关于页 2014 起步的时间线存在可信度张力。
+- 联系表单未展示对 XSS、超长输入、特殊字符等边界情况的处理。
+
+**Casey（移动用户）**
+- 主要 CTA“立即咨询”在顶部导航，单手拇指难以触及。
+- 联系表单字段多，无智能默认值或自动填充优化。
+- 长页面依赖汉堡菜单，无底部快捷导航。
+- 首页崩溃在移动端更容易直接返回搜索结果。
+
+**Wei（中国 Fortune 500 CIO，重视结果证明与文化可信度）**
+- 首页崩溃是首要红旗——对大型采购决策者不可接受。
+- 看不到任何 Fortune 500 级客户名称、具体项目负责人、可验证的业务成果。
+- 团队页无真实高管/顾问照片与背景介绍，难以建立“同行者”信任。
+- 没有行业认证、合作伙伴背书、白皮书下载等深度信任资产。
+
+## Minor Observations
+
+- Cards use side-stripe borders on hover (`border-left/right` colored accent) — banned decorative pattern.
+- `scroll-progress.tsx` animates `width`, causing layout thrash; should use `scaleX` on a transform layer.
+- Several H1/H2 lines use `leading-[0.88–0.92]` and `tracking-tighter`; Chinese dense strokes become hard to read.
+- Image hover transforms are applied directly to `![]()
` elements; if used, keep subtle and respect reduced motion.
+- The homepage Framer Motion `useScroll` error repeats 6+ times and is caught by the global error tracker.
+- Footer ICP/公安备案 and WeChat QR code are good local trust signals, but buried deep.
+- Mixed English eyebrows with Chinese headings make the brand voice feel less decisive.
+
+## Questions to Consider
+
+- If the homepage cannot render in dev, what is the current production deployment status, and is the crash already live?
+- Do you have real team photos, client logos, or case-study imagery that can replace the icon grids, or should we source credible stock first?
+- Are “01/02/03” numbering and uppercase eyebrows a deliberate brand system, or inherited scaffolding that can be removed?
+
+## Gap vs Bain & Company
+
+| Dimension | Bain | Novalon current | Gap |
+|---|---|---|---|
+| Imagery | Real people, client scenes, team photography | Zero photography; only Lucide icons | Large |
+| Client proof | Named clients, specific business outcomes, quantified impact | Anonymous “某上市制造企业”, generic percentages | Large |
+| Data proof | Concrete figures ($300M saved, 2.5× stock price, 90% FTE reduction) | “40% 效率提升 / 3× 决策效率” without source | Medium |
+| Interactive entry | “Answer two questions” industry/problem funnel | No personalization; only fixed browse | Medium |
+| Thought leadership | Latest briefs, client results, insights on homepage | No recurring insights/research module | Medium |
+| Team credibility | Advisor photos, author bylines, team bios | About page lacks real portraits | Large |
+| Module diversity | Hero, case carousel, Q&A funnel, article cards, CTA | Three listing pages use the same card grid | Large |
+| Stability | No visible crashes | Homepage crashes on load | Critical |
+
+**Core conclusion**: Novalon is currently a feature-list template site; Bain is a trust-building editorial platform. Closing the gap requires, in order: fix the homepage crash, introduce real imagery, replace anonymous proof with verifiable case studies, and diversify the page modules beyond the single card-grid template.
diff --git a/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md b/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md
new file mode 100644
index 0000000..5afd529
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md
@@ -0,0 +1,569 @@
+# Bain 对标深化实现计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 在不引入外部图片的前提下，通过数据可视化、结构化文案、页面模块差异化，消除产品/解决方案/服务三页的 AI 模板同质化痕迹，提升案例可信度，并确保所有测试通过。
+
+**架构：** 数据层（`products.ts`、`solutions.ts`、`services.ts`、`cases.ts`、`cms/types.ts`）新增差异化字段；UI 层（三个列表页、`sections.tsx`、案例详情页）按新数据结构重新组织卡片布局；测试层同步更新选择器与断言。
+
+**技术栈：** Next.js 14 App Router、React 18、TypeScript 5、Tailwind CSS 3、Framer Motion、Lucide React。
+
+---
+
+## 文件清单
+
+| 文件 | 职责 |
+|---|---|
+| `src/lib/constants/products.ts` | 扩展 `Product` 接口与数据：场景定位、能力指标、套装分组、核心能力 pills |
+| `src/lib/constants/solutions.ts` | 扩展 `Solution` 接口与数据：痛点、可量化结果、推荐产品组合 |
+| `src/lib/constants/services.ts` | 调整服务数据，补充能力条目；改造流程常量结构 |
+| `src/lib/constants/cases.ts` | 扩展 `CaseStudy` 接口与数据：项目周期、涉及部门、数据规模、业务问题、verified 标记 |
+| `src/lib/cms/types.ts` | 同步扩展 `CaseStudyData`，与 `cases.ts` 字段保持一致 |
+| `src/app/(marketing)/products/products-content-v3.tsx` | 产品页新布局：套装关系图 + 指标驱动卡片 |
+| `src/app/(marketing)/solutions/solutions-content-v3.tsx` | 解决方案页新布局：问题-结果卡 + 产品组合 pills |
+| `src/app/(marketing)/services/services-content-v3.tsx` | 服务页新布局：能力清单卡片 + 中文流程时间轴 |
+| `src/components/content/sections.tsx` | 改造服务流程时间线：移除 uppercase 英文标签 |
+| `src/components/sections/case-detail-page.tsx` | 案例详情页展示新增可验证维度 |
+| `src/lib/cms/mock-data.ts`（如存在案例相关 mock） | 同步更新 CMS mock 数据，与 `cases.ts` 字段一致 |
+| `e2e/` 相关测试 | 更新选择器，确保不因 DOM 结构变化失败 |
+| `src/**/*.test.ts{,x}` | 更新单元测试，覆盖新字段与组件渲染 |
+
+---
+
+## 任务 1：扩展产品数据层
+
+**文件：**
+- 修改：`src/lib/constants/products.ts`
+
+### 步骤 1：扩展 Product 接口
+
+在 `Product` 接口中新增以下字段：
+
+```typescript
+export interface Product {
+ id: string;
+ name: string;
+ subtitle: string;
+ description: string;
+ features: string[];
+ benefits: string[];
+ // ... 已有字段
+ scenario?: string;
+ metrics?: { value: string; label: string }[];
+ bundle: 'enterprise' | 'standalone';
+ capabilities?: string[];
+}
+```
+
+### 步骤 2：为每个产品填充新字段
+
+为 6 款企业产品补充 `scenario`、`metrics`（3 项）、`bundle: 'enterprise'`、`capabilities`（3-4 项）。
+为独立产品（如 NovaVis）补充 `bundle: 'standalone'`。
+
+示例（ERP）：
+
+```typescript
+scenario: '面向中大型制造与零售企业的核心运营系统',
+metrics: [
+ { value: '10 万级', label: 'SKU 支撑' },
+ { value: '200+', label: '标准报表模板' },
+ { value: '99.5%', label: '数据准确率' },
+],
+bundle: 'enterprise',
+capabilities: ['财务核算', '采购管理', '生产计划', '库存控制'],
+```
+
+### 步骤 3：运行相关产品单元测试
+
+运行：`npx jest --testPathPatterns=products`
+预期：如测试依赖旧字段，按失败提示更新断言，不修改业务语义。
+
+---
+
+## 任务 2：扩展解决方案数据层
+
+**文件：**
+- 修改：`src/lib/constants/solutions.ts`
+
+### 步骤 1：扩展 Solution 接口
+
+```typescript
+export interface Solution {
+ id: string;
+ title: string;
+ industry: string;
+ description: string;
+ // ... 已有字段
+ painPoints?: string[];
+ outcomes?: { value: string; label: string }[];
+ recommendedProducts?: string[];
+}
+```
+
+### 步骤 2：为每个解决方案填充新字段
+
+为 6 个行业解决方案补充：
+- `painPoints`：1-2 个核心痛点（中文）
+- `outcomes`：1-2 个可量化结果
+- `recommendedProducts`：推荐产品 ID 数组（如 `['erp', 'crm', 'bi']`）
+
+### 步骤 3：运行相关测试
+
+运行：`npx jest --testPathPatterns=solutions`
+预期：通过或按提示更新测试。
+
+---
+
+## 任务 3：调整服务数据层
+
+**文件：**
+- 修改：`src/lib/constants/services.ts`
+
+### 步骤 1：为每个服务补充能力条目
+
+在 `Service` 接口中确保有 `features` 字段用于能力清单展示。如缺少，新增 `capabilities?: string[]`。
+
+为每个服务填充 3-4 个能力条目，例如咨询服务：
+
+```typescript
+capabilities: [
+ '现状诊断与数字化成熟度评估',
+ '业务流程重构与路线图设计',
+ '技术架构选型与投资回报测算',
+ '变革管理与落地陪跑',
+],
+```
+
+### 步骤 2：调整服务流程常量
+
+将现有流程数组：
+
+```typescript
+const SERVICE_PROCESS = [
+ { step: '01', title: '需求分析', desc: '...' },
+ // ...
+];
+```
+
+改造为：
+
+```typescript
+const SERVICE_PROCESS = [
+ {
+ phase: '需求分析',
+ duration: '2-3 周',
+ deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
+ },
+ {
+ phase: '方案设计',
+ duration: '4-6 周',
+ deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
+ },
+ {
+ phase: '敏捷交付',
+ duration: '3-6 个月',
+ deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
+ },
+ {
+ phase: '持续支持',
+ duration: '长期',
+ deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
+ },
+];
+```
+
+---
+
+## 任务 4：扩展案例数据层
+
+**文件：**
+- 修改：`src/lib/constants/cases.ts`
+- 修改：`src/lib/cms/types.ts`
+
+### 步骤 1：扩展 CaseStudy 接口
+
+```typescript
+export interface CaseStudy {
+ id: string;
+ slug: string;
+ client: string;
+ industry: string;
+ companySize: string;
+ title: string;
+ subtitle: string;
+ challenge: string;
+ solution: string;
+ result: string;
+ metrics: CaseMetric[];
+ timeline: CaseTimelinePhase[];
+ services: CaseService[];
+ testimonial?: CaseTestimonial;
+ color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+ featured?: boolean;
+ // 新增
+ projectDuration?: string;
+ departments?: string[];
+ dataScale?: string;
+ businessProblem?: string;
+ verified?: boolean;
+}
+```
+
+### 步骤 2：为每个案例填充可验证维度
+
+为 `CASE_STUDIES` 中每个案例补充：
+- `projectDuration`
+- `departments`
+- `dataScale`
+- `businessProblem`（比 `challenge` 更具体的一句话）
+- `verified: false`（预留字段，当前未公开验证）
+
+### 步骤 3：同步 CMS 类型
+
+在 `src/lib/cms/types.ts` 的 `CaseStudyData` 中新增相同字段：
+
+```typescript
+export interface CaseStudyData {
+ client: string;
+ industry: string;
+ companySize: string;
+ subtitle: string;
+ challenge: string;
+ solution: string;
+ result: string;
+ metrics: CaseMetric[];
+ timeline: CaseTimelinePhase[];
+ services: CaseService[];
+ testimonial?: CaseTestimonial;
+ color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+ featured?: boolean;
+ projectDuration?: string;
+ departments?: string[];
+ dataScale?: string;
+ businessProblem?: string;
+ verified?: boolean;
+}
+```
+
+### 步骤 4：同步 CMS mock 数据
+
+如果 `src/lib/cms/mock-data.ts` 或相关文件包含案例 mock 数据，同步添加新字段。
+
+### 步骤 5：运行案例相关测试
+
+运行：`npx jest --testPathPatterns=cases`
+预期：通过或按提示更新。
+
+---
+
+## 任务 5：产品页 UI 改造
+
+**文件：**
+- 修改：`src/app/(marketing)/products/products-content-v3.tsx`
+
+### 步骤 1：改造 Hero 文案
+
+将标题中的“产品矩阵”改为问题-结果叙事。例如：
+
+```typescript
+
+ 用自研产品组合
+
+ 支撑企业核心系统升级
+
+
+```
+
+副文案强调“从数据智能到业务协同，每一款产品都经过实战验证”。
+
+### 步骤 2：新增套装关系图模块
+
+在 Hero 与产品卡片之间新增一个轻量模块 `BundleOverview`：
+
+- 展示两列：企业套装（6 款产品）与专业产品（独立产品）。
+- 使用小圆点 + 产品名 + 一句定位。
+- 使用 CSS grid 布局，不引入图片/SVG 复杂度。
+
+### 步骤 3：改造产品卡片
+
+将 `ProductCard` 从图标中心改为以下结构：
+
+```tsx
+
+
+
+
{bundleLabel}
+
{product.name}
+
+
{product.bundle === 'enterprise' ? '企业套装' : '专业产品'}
+
{product.scenario || product.description}
+
+ {product.metrics?.map((m) => (
+
+
{m.value}
+
{m.label}
+
+ ))}
+
+ {product.capabilities?.map((cap) => (
+ {cap}
+ ))}
+
+
+```
+
+移除卡片内大图标。
+
+### 步骤 4：运行产品页相关 E2E
+
+运行：`npx playwright test p6-missing-paths.spec.ts --config=playwright.local.config.ts --grep "产品"`
+预期：通过。如因 DOM 结构变化失败，更新测试中的选择器。
+
+---
+
+## 任务 6：解决方案页 UI 改造
+
+**文件：**
+- 修改：`src/app/(marketing)/solutions/solutions-content-v3.tsx`
+
+### 步骤 1：改造 Hero 文案
+
+在副文案中增加结果承诺，例如：
+
+```typescript
+
+ 端到端交付可量化的业务成果。
+
+ 基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
+
+```
+
+### 步骤 2：改造行业卡片
+
+将 `SolutionCard` 改为问题-结果卡：
+
+```tsx
+
+
+
+
{solution.industry}
+
+
+
核心痛点
+
{solution.painPoints?.join('、')}
+
+ {solution.outcomes?.map((o) => (
+
+
{o.value}
+
{o.label}
+
+ ))}
+
+
推荐产品组合
+
+ {recommendedProductNames.map((name) => (
+ {name}
+ ))}
+
+
{service.title}
+ {service.description}
+
+ {service.capabilities?.slice(0, 4).map((cap) => (
+ -
+
+ {cap}
+
+ ))}
+
+
+ {service.metrics?.map((m) => (
+
+
{m.value}
+
{m.label}
+
+ ))}
+
+ {SERVICE_PROCESS.map((step, index) => (
+
+
+
+
+
{step.phase}
+ {step.duration}
+
+
阶段产出
+
+ {step.deliverables.map((d) => (
+ - {d}
+ ))}
+
+
+ ))}
+
+ 交付物
+
+```
+
+改为：
+
+```tsx
+
+ 阶段产出
+
+```
+
+### 步骤 2：运行相关测试
+
+运行：`npx jest --testPathPatterns=sections`
+预期：通过。
+
+---
+
+## 任务 9：案例详情页展示可验证维度
+
+**文件：**
+- 修改：`src/components/sections/case-detail-page.tsx`
+- 修改：`src/app/(marketing)/cases/[slug]/client.tsx`
+
+### 步骤 1：传递新增字段
+
+在 `client.tsx` 的 `detailData` 中新增字段：
+
+```typescript
+const detailData = {
+ // ... 已有字段
+ projectDuration: data.projectDuration,
+ departments: data.departments,
+ dataScale: data.dataScale,
+ businessProblem: data.businessProblem,
+ verified: data.verified,
+};
+```
+
+### 步骤 2：改造 CaseDetailPage 组件
+
+在案例详情页顶部（Hero 区域）增加可验证维度条：
+
+```tsx
+
+ {projectDuration &&
项目周期 {projectDuration}
}
+ {departments &&
涉及部门 {departments.join('、')}
}
+ {dataScale &&
数据规模 {dataScale}
}
+ {verified &&
✓ 客户授权公开
}
+