refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2

- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
2026-04-30 22:00:00 +08:00
parent b6d2313e8f
commit fe6e4b1c54
24 changed files with 8928 additions and 129 deletions
@@ -0,0 +1,299 @@
+# 核心业务与解决方案设计升级 实现计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 将产品服务页面的成熟设计模式（组件拆分、动画升级、背景特效、独立布局）应用到核心业务和解决方案页面，实现全站设计一致性。
+
+**架构：** 参照 `src/components/products/` 的 8 个独立 Section 组件模式，为核心业务创建 6 个独立 Section 组件，为解决方案创建 3 个独立 Section 组件。复用 `@/lib/animations` 动画组件库。核心业务详情页采用独立 Header/Footer 布局。
+
+**技术栈：** Next.js 16 + React 19 + Framer Motion 12 + Tailwind CSS 4 + 自定义动画组件库
+
+---
+
+## 文件结构
+
+### 新建文件
+
+| 文件 | 职责 |
+|------|------|
+| `src/components/services/service-hero-section.tsx` | 服务详情 Hero（InkBackground + DataParticleFlow + SealStamp + InkReveal） |
+| `src/components/services/service-challenges-section.tsx` | 挑战板块（StaggerContainer + InkCard） |
+| `src/components/services/service-features-section.tsx` | 功能/如何帮助板块（ScrollReveal + FadeUp + CheckCircle2） |
+| `src/components/services/service-process-section.tsx` | 服务流程（SealStamp + StaggerContainer + FadeUp + 渐变连接线） |
+| `src/components/services/service-outcomes-section.tsx` | 成果板块（CountUp + StaggerContainer + InkCard） |
+| `src/components/services/service-cases-section.tsx` | 相关案例（StaggerContainer + InkCard） |
+| `src/components/services/service-cta-section.tsx` | CTA 区域（FloatingElement + RippleButton + 红色渐变背景） |
+| `src/components/solutions/consulting-section.tsx` | 参谋伙伴模块（InkReveal + StaggerContainer + FadeUp） |
+| `src/components/solutions/tech-solution-section.tsx` | 技术伙伴模块（InkReveal + StaggerContainer + FadeUp） |
+| `src/components/solutions/accompany-section.tsx` | 同行伙伴模块（InkReveal + StaggerContainer + FadeUp） |
+| `src/components/layout/service-header.tsx` | 服务详情独立 Header（参照 product-header） |
+| `src/components/layout/service-footer.tsx` | 服务详情独立 Footer（参照 product-footer） |
+
+### 修改文件
+
+| 文件 | 变更 |
+|------|------|
+| `src/app/(marketing)/services/[id]/client.tsx` | 重构：拆分为 7 个独立 Section 组件 + dynamic 懒加载 |
+| `src/app/(marketing)/services/[id]/page.tsx` | 添加独立布局支持（isServiceDetailPage 判断） |
+| `src/app/(marketing)/solutions/page.tsx` | 重构：拆分为 3 个独立 Section 组件 + dynamic 懒加载 |
+| `src/app/(marketing)/layout.tsx` | 添加 ServiceHeader/ServiceFooter 布局切换逻辑 |
+| `src/lib/constants/services.ts` | 补充 challenges 和 outcomes 数据结构 |
+
+---
+
+## 任务 1：数据结构补全
+
+**文件：**
+- 修改：`src/lib/constants/services.ts`
+
+- [ ] **步骤 1：扩展 Service 类型，补充 challenges 和 outcomes 字段**
+
+将 `client.tsx` 中硬编码的 `challenges` 和 `outcomes` 对象迁移到 `services.ts`，为每个服务添加：
+- `challenges: Array<{ title: string; description: string }>` — 4 项挑战
+- `outcomes: Array<{ value: string; label: string }>` — 3 项成果数据
+
+- [ ] **步骤 2：验证类型导出**
+
+确认 `SERVICES` 从 `@/lib/constants` 正确导出，新字段可被消费。
+
+---
+
+## 任务 2：核心业务 — Hero Section
+
+**文件：**
+- 创建：`src/components/services/service-hero-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceHeroSection 组件**
+
+参照 `product-hero-section.tsx`，实现：
+- Props: `{ service: Service }`
+- 背景：`InkBackground` + `DataParticleFlow`（particleCount=60, color="#C41E3A", intensity="subtle"）
+- 布局：`min-h-screen flex items-center justify-center` + `bg-gradient-to-b from-white to-[#F8F8F8]`
+- 动画：`SealStamp` 包裹 Badge（delay=0.1），`InkReveal` 包裹 h1（delay=0.2）、描述（delay=0.4）、CTA 按钮（delay=0.6）
+- CTA：`RippleButton` 主按钮"了解服务详情" + outline 次按钮"免费咨询"
+- 滚动指示器：`FloatingElement` + ChevronDown
+
+---
+
+## 任务 3：核心业务 — 挑战 Section
+
+**文件：**
+- 创建：`src/components/services/service-challenges-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceChallengesSection 组件**
+
+- Props: `{ service: Service }`
+- 背景：`bg-[#F8F8F8]`（灰色交替背景）
+- 标题区：`ScrollReveal` + `slideInLeftVariants` + 朱砂红装饰线
+- 卡片网格：`StaggerContainer` + `StaggerItem` 包裹 2x2 网格
+- 每张卡片：`InkCard`（hoverScale=1.02, hoverShadow 带红色调）
+- 卡片内容：挑战标题 + 描述
+
+---
+
+## 任务 4：核心业务 — 功能 Section
+
+**文件：**
+- 创建：`src/components/services/service-features-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceFeaturesSection 组件**
+
+- Props: `{ service: Service }`
+- 背景：`bg-white`
+- 标题区：`ScrollReveal` + `inkRevealVariants`
+- 概述文字：`InkReveal`（delay=0.2）
+- 功能列表：`StaggerContainer` + `StaggerItem`，每项用 `CheckCircle2` 图标 + `FadeUp`
+
+---
+
+## 任务 5：核心业务 — 流程 Section
+
+**文件：**
+- 创建：`src/components/services/service-process-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceProcessSection 组件**
+
+- Props: `{ service: Service }`
+- 背景：`bg-[#F8F8F8]`
+- 标题区：`ScrollReveal` + `inkRevealVariants` 居中
+- 步骤列表：`StaggerContainer`（staggerDelay=0.15）+ `StaggerItem`
+- 每步：`SealStamp` 编号圆形 + `FadeUp` 标题描述 + 渐变连接线（`w-0.5 h-16 bg-gradient-to-b from-[#C41E3A]/40 to-[#C41E3A]/10`，最后一步无连接线）
+- 文本解析：中文冒号 `：` 分隔标题和描述
+
+---
+
+## 任务 6：核心业务 — 成果 Section
+
+**文件：**
+- 创建：`src/components/services/service-outcomes-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceOutcomesSection 组件**
+
+- Props: `{ service: Service }`
+- 背景：`bg-white`
+- 标题区：`ScrollReveal` + `slideInLeftVariants`
+- 数据卡片：`StaggerContainer` + `StaggerItem` 包裹 3 列网格
+- 每张卡片：`InkCard` + `CountUp` 数字动画（从 outcomes.value 提取数字）+ 渐变色文字
+- Benefits 汇总：底部 `InkReveal` 包裹 benefits 文本
+
+---
+
+## 任务 7：核心业务 — 案例 Section
+
+**文件：**
+- 创建：`src/components/services/service-cases-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceCasesSection 组件**
+
+- Props: 无（内部从 `CASES` 常量获取数据）
+- 背景：`bg-[#F8F8F8]`
+- 标题区：`ScrollReveal` + `slideInLeftVariants`
+- 案例网格：`StaggerContainer` + `StaggerItem` 包裹 2 列网格
+- 每张卡片：`InkCard` + Badge 行业标签 + 标题 + 描述 + hover 效果
+
+---
+
+## 任务 8：核心业务 — CTA Section
+
+**文件：**
+- 创建：`src/components/services/service-cta-section.tsx`
+
+- [ ] **步骤 1：创建 ServiceCTASection 组件**
+
+- Props: 无
+- 背景：`bg-gradient-to-r from-[#C41E3A] to-[#E85D75]`（红色渐变）
+- 装饰：两个 `FloatingElement` 圆形（右上 280px + 左下 220px）
+- 内容：`InkReveal` 标题 + `FadeUp` 描述 + `FadeUp` 按钮组
+- 按钮：`RippleButton` 主按钮"开始您的转型之旅" + outline 次按钮"查看其他服务"
+
+---
+
+## 任务 9：核心业务 — 独立 Header/Footer
+
+**文件：**
+- 创建：`src/components/layout/service-header.tsx`
+- 创建：`src/components/layout/service-footer.tsx`
+
+- [ ] **步骤 1：创建 ServiceHeader**
+
+参照 `product-header.tsx`：
+- Logo + "返回主站"按钮
+- 滚动时 `bg-white/90 backdrop-blur-xl`
+- `motion.header` 从顶部滑入动画
+- 区别：CTA 文案改为"免费咨询"
+
+- [ ] **步骤 2：创建 ServiceFooter**
+
+参照 `product-footer.tsx`：
+- 顶部装饰线 + CTA 区域 + 底部信息
+- 锚点导航改为服务相关（服务概览/面临挑战/服务流程/预期成果/相关案例）
+- `RippleButton` + `FloatingElement`
+
+---
+
+## 任务 10：核心业务 — 重构详情页
+
+**文件：**
+- 修改：`src/app/(marketing)/services/[id]/client.tsx`
+- 修改：`src/app/(marketing)/services/[id]/page.tsx`
+- 修改：`src/app/(marketing)/layout.tsx`
+
+- [ ] **步骤 1：重构 client.tsx**
+
+将当前的单文件 5 板块替换为 7 个 dynamic 懒加载 Section 组件：
+```tsx
+const ServiceHeroSection = dynamic(() => import('@/components/services/service-hero-section'), { ssr: false });
+const ServiceChallengesSection = dynamic(() => import('@/components/services/service-challenges-section'), { ssr: false });
+const ServiceFeaturesSection = dynamic(() => import('@/components/services/service-features-section'), { ssr: false });
+const ServiceProcessSection = dynamic(() => import('@/components/services/service-process-section'), { ssr: false });
+const ServiceOutcomesSection = dynamic(() => import('@/components/services/service-outcomes-section'), { ssr: false });
+const ServiceCasesSection = dynamic(() => import('@/components/services/service-cases-section'), { ssr: false });
+const ServiceCTASection = dynamic(() => import('@/components/services/service-cta-section'), { ssr: false });
+```
+渲染顺序：Hero → Challenges → Features → Process → Outcomes → Cases → CTA
+
+- [ ] **步骤 2：修改 layout.tsx 添加服务详情独立布局**
+
+在 `isProductDetailPage` 逻辑旁添加 `isServiceDetailPage` 判断：
+- 路径匹配 `/services/[id]` 时使用 `ServiceHeader` + `ServiceFooter`
+- 其他页面保持 `Header` + `Footer`
+
+- [ ] **步骤 3：修改 page.tsx 确保数据传递正确**
+
+确认 `generateStaticParams` 和 `generateMetadata` 正常工作，新字段（challenges, outcomes）正确序列化传递。
+
+---
+
+## 任务 11：解决方案 — 拆分模块组件
+
+**文件：**
+- 创建：`src/components/solutions/consulting-section.tsx`
+- 创建：`src/components/solutions/tech-solution-section.tsx`
+- 创建：`src/components/solutions/accompany-section.tsx`
+
+- [ ] **步骤 1：创建 ConsultingSection（参谋伙伴）**
+
+- Props: 无（内部硬编码内容，或从常量获取）
+- 背景：`bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20`
+- 动画升级：`InkReveal` 包裹标题（delay=0），`FadeUp` 包裹描述段落（delay=0.1/0.2/0.3），`StaggerContainer` + `StaggerItem` 包裹核心价值点网格
+- 保持现有内容和布局结构不变
+
+- [ ] **步骤 2：创建 TechSolutionSection（技术伙伴）**
+
+同上模式，delay 递增 0.2。
+
+- [ ] **步骤 3：创建 AccompanySection（同行伙伴）**
+
+同上模式，delay 递增 0.4。
+
+---
+
+## 任务 12：解决方案 — 重构页面
+
+**文件：**
+- 修改：`src/app/(marketing)/solutions/page.tsx`
+
+- [ ] **步骤 1：重构 solutions/page.tsx**
+
+将 3 个内联 `motion.section` 替换为 dynamic 懒加载的独立组件：
+```tsx
+const ConsultingSection = dynamic(() => import('@/components/solutions/consulting-section'), { ssr: false });
+const TechSolutionSection = dynamic(() => import('@/components/solutions/tech-solution-section'), { ssr: false });
+const AccompanySection = dynamic(() => import('@/components/solutions/accompany-section'), { ssr: false });
+```
+保持 `MethodologySection` 和底部 CTA 区域不变。
+
+---
+
+## 任务 13：验证
+
+- [ ] **步骤 1：构建验证**
+
+运行 `npm run build`，确认无 TypeScript 错误、无导入错误。
+
+- [ ] **步骤 2：页面验证**
+
+启动 dev server，逐页检查：
+- `/services` 列表页正常渲染
+- `/services/software` 详情页：7 个 Section 全部渲染，动画正常
+- `/services/data` 详情页：同上
+- `/services/consulting` 详情页：同上
+- `/services/solutions` 详情页：同上
+- `/solutions` 页面：3 个模块全部渲染，动画正常
+- 独立 Header/Footer 在服务详情页正确显示
+- 主站 Header/Footer 在其他页面正确显示
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add -A
+git commit -m "feat: 升级核心业务和解决方案页面设计，对齐产品服务设计体系
+
+- 核心业务详情页拆分为 7 个独立 Section 组件
+- 解决方案页拆分为 3 个独立模块组件
+- 全面接入动画组件库（InkReveal/SealStamp/InkCard/CountUp 等）
+- Hero 区域添加 InkBackground + DataParticleFlow 背景特效
+- 服务详情页采用独立 Header/Footer 布局
+- 服务数据结构补全 challenges 和 outcomes 字段
+- 所有组件使用 dynamic 懒加载"
+```