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,332 @@
+# ERP 产品落地页设计规格
+
+**日期**: 2026-04-24
+**状态**: 待审查
+**参考**: Terminal Industries 网站设计风格
+
+---
+
+## 1. 概述
+
+### 1.1 目标
+
+将 ERP 产品详情页改造为 Terminal 风格的全屏沉浸式落地页，同时保持"水墨科技"品牌基因。
+
+### 1.2 范围
+
+- 仅改造 ERP 产品页 (`/products/erp`)
+- 其他产品页（CRM、CMS、BI）暂不改动，待验证后推广
+
+### 1.3 设计决策
+
+| 决策项 | 选择 |
+|--------|------|
+| 视觉风格 | 全屏沉浸式（深墨色 + 明暗交替） |
+| 视频内容 | 暂不添加，使用粒子/水墨动画替代 |
+| 导航栏 | 动态变色（滚动后变深色毛玻璃） |
+| 实现方案 | 组件化重构，复用现有动画库 |
+
+---
+
+## 2. 页面结构
+
+### 2.1 整体布局
+
+```
+Section 1: 全屏沉浸 Hero        [深墨色 #0A0A0A]
+Section 2: 产品概述             [宣纸白 #FFFFFF]
+Section 3: 核心功能（滚动叙事）  [深墨色 #0A0A0A]
+Section 4: 产品优势             [宣纸白 #FFFFFF]
+Section 5: 实施流程             [浅灰 #F5F5F5]
+Section 6: 技术规格             [宣纸白 #FFFFFF]
+Section 7: 定价方案             [深墨色 #0A0A0A]
+Section 8: CTA 横幅             [朱砂红渐变]
+```
+
+**明暗节奏**: 深 → 白 → 深 → 白 → 灰 → 白 → 深 → 红
+
+### 2.2 Section 详细设计
+
+#### Section 1: 全屏沉浸 Hero
+
+- **背景**: 深墨色 `#0A0A0A` + 水墨粒子动画（`InkBackground` + `DataParticleFlow`）
+- **内容**:
+  - 分类标签: "企业软件"（朱砂红背景 `bg-[#C41E3A]/20`）
+  - 产品名称: "睿新ERP管理系统"（白色，大标题）
+  - 价值主张: "集成财务、采购、销售、库存、生产等模块..."（浅灰色）
+  - CTA 按钮: "预约演示"（朱砂红，磁性按钮 `MagneticButton`）
+  - 滚动指示器: 向下箭头动画
+- **动画**: 入场淡入 + 上移，背景粒子持续运动
+
+#### Section 2: 产品概述
+
+- **背景**: 宣纸白 `#FFFFFF`
+- **内容**: overview 文本
+- **动画**: 文字逐词揭示（`TextReveal`）
+
+#### Section 3: 核心功能（滚动叙事）
+
+- **背景**: 深墨色 `#0A0A0A`
+- **布局**: 6 个功能分 6 个滚动区块
+- **每个区块**:
+  - 编号: `01` - `06`（Geist Mono，朱砂红，大号，低透明度作为装饰）
+  - 功能名称: 如"财务管理"
+  - 功能描述: 如"支持总账、应收应付、成本核算..."
+  - 动画区域: 粒子/水墨特效展示
+- **动画**:
+  - 编号从左侧滑入 + 淡入
+  - 名称逐字揭示
+  - 描述模糊揭示
+  - 动画区域缩放 + 淡入
+  - 整体视差滚动（比页面慢 20%）
+- **触发**: `useInView` + `amount: 0.5`
+
+#### Section 4: 产品优势
+
+- **背景**: 宣纸白 `#FFFFFF`
+- **布局**: 4 张卡片，2x2 网格
+- **卡片内容**:
+  - 数据高亮: "30%"、"20%"等（朱砂红，大号）
+  - 描述文字
+- **动画**: 卡片交错入场（`StaggerReveal` + `StaggerItem`）
+
+#### Section 5: 实施流程
+
+- **背景**: 浅灰 `#F5F5F5`
+- **布局**: 6 步时间线，垂直排列
+- **每步**:
+  - 编号圆形: 朱砂红背景，白色数字
+  - 步骤文字
+  - 连接线（步骤之间）
+- **动画**: 滚动触发逐个显现
+
+#### Section 6: 技术规格
+
+- **背景**: 宣纸白 `#FFFFFF`
+- **布局**: 5 项规格，2 列网格
+- **动画**: 简单淡入
+
+#### Section 7: 定价方案
+
+- **背景**: 深墨色 `#0A0A0A`
+- **布局**: 3 档定价卡片，水平排列
+- **卡片样式**:
+  - 基础版: 深灰背景，白色文字
+  - 标准版: 朱砂红渐变背景，白色文字，"推荐"标签
+  - 企业版: 深灰背景，白色文字
+- **动画**: 卡片交错入场
+
+#### Section 8: CTA 横幅
+
+- **背景**: 朱砂红渐变 `from-[#C41E3A] to-[#A01830]`
+- **内容**:
+  - 标题: "准备好提升企业运营效率了吗？"
+  - 按钮: "立即咨询"（白色，磁性按钮）
+- **动画**: 滚动触发淡入
+
+---
+
+## 3. 文件结构
+
+### 3.1 新增文件
+
+```
+src/app/(marketing)/products/[id]/
+└── product-detail-client.tsx   # 客户端组件，组合所有 section
+
+src/components/products/
+├── product-hero-section.tsx    # Section 1
+├── product-overview-section.tsx # Section 2
+├── product-features-section.tsx # Section 3
+├── product-benefits-section.tsx # Section 4
+├── product-process-section.tsx  # Section 5
+├── product-specs-section.tsx    # Section 6
+├── product-pricing-section.tsx  # Section 7
+└── product-cta-section.tsx      # Section 8
+```
+
+### 3.2 修改文件
+
+```
+src/app/(marketing)/products/[id]/page.tsx
+- 保留服务端逻辑（generateStaticParams, generateMetadata）
+- 导入并渲染 product-detail-client.tsx
+- 传递产品数据作为 props
+```
+
+### 3.3 复用的现有组件
+
+| 组件 | 路径 | 用途 |
+|------|------|------|
+| `ScrollReveal` | `src/components/ui/scroll-animations.tsx` | 滚动揭示 |
+| `TextReveal` | `src/components/ui/scroll-animations.tsx` | 文字逐词揭示 |
+| `ParallaxSection` | `src/components/ui/scroll-animations.tsx` | 视差效果 |
+| `StaggerReveal` | `src/components/ui/scroll-animations.tsx` | 交错动画容器 |
+| `StaggerItem` | `src/components/ui/scroll-animations.tsx` | 交错动画子项 |
+| `CounterWithEffect` | `src/lib/animations.tsx` | 数字滚动 |
+| `MagneticButton` | `src/lib/animations.tsx` | 磁性按钮 |
+| `BlurReveal` | `src/lib/animations.tsx` | 模糊揭示 |
+| `InkBackground` | `src/components/effects/ink-decoration.tsx` | 水墨背景 |
+| `DataParticleFlow` | `src/components/effects/data-particle-flow.tsx` | 粒子流 |
+
+---
+
+## 4. 导航栏动态变色
+
+### 4.1 行为定义
+
+| 状态 | 背景 | 文字颜色 | Logo |
+|------|------|---------|------|
+| Hero 区域内 | 透明 | 白色 | 白色 |
+| 滚动出 Hero 后 | 深墨毛玻璃 `bg-[#0A0A0A]/90 backdrop-blur-xl` | 白色 | 白色 |
+
+### 4.2 实现方式
+
+在 `product-detail-client.tsx` 中：
+
+```tsx
+const [isScrolled, setIsScrolled] = useState(false);
+
+useEffect(() => {
+  const handleScroll = () => {
+    setIsScrolled(window.scrollY > 50);
+  };
+  window.addEventListener('scroll', handleScroll);
+  return () => window.removeEventListener('scroll', handleScroll);
+}, []);
+```
+
+通过 Context 或 props 传递 `isScrolled` 状态给 Header 组件，切换导航栏样式。
+
+### 4.3 注意事项
+
+- 产品页导航栏始终保持深色系
+- 用户点击导航返回主站时，导航栏自动恢复白色
+- 需要修改 `Header` 组件，支持 `variant` prop（`'light' | 'dark'`）
+
+---
+
+## 5. 颜色规范
+
+### 5.1 深色区块
+
+| 角色 | 色值 | 用途 |
+|------|------|------|
+| 背景 | `#0A0A0A` | 深墨色主背景 |
+| 主文字 | `#FFFFFF` | 标题、重要文字 |
+| 次文字 | `#B0B0B0` | 描述、辅助文字 |
+| 强调色 | `#C41E3A` | 编号装饰、CTA |
+| 卡片背景 | `#1A1A1A` | 定价卡片等 |
+
+### 5.2 浅色区块
+
+| 角色 | 色值 | 用途 |
+|------|------|------|
+| 背景 | `#FFFFFF` | 宣纸白主背景 |
+| 主文字 | `#1C1C1C` | 标题、正文 |
+| 次文字 | `#5C5C5C` | 描述、辅助文字 |
+| 强调色 | `#C41E3A` | 数据高亮、图标 |
+| 卡片背景 | `#F5F7FA` | 功能卡片 |
+
+---
+
+## 6. 动画规范
+
+### 6.1 时长
+
+| 类型 | 时长 | 用途 |
+|------|------|------|
+| 快速 | 200ms | hover、微交互 |
+| 标准 | 500ms | 大部分入场动画 |
+| 慢速 | 800ms | 大元素、视差 |
+
+### 6.2 缓动函数
+
+| 类型 | 缓动 | 用途 |
+|------|------|------|
+| 入场 | `ease-out` | 淡入、滑入 |
+| 退出 | `ease-in` | 淡出、滑出 |
+| 弹性 | `spring` | 数字滚动、磁性按钮 |
+
+### 6.3 无障碍
+
+- 所有动画尊重 `prefers-reduced-motion`
+- 使用 `useReducedMotion` hook 检测用户偏好
+- 减少动画时，保留基本淡入效果
+
+---
+
+## 7. 性能考虑
+
+### 7.1 代码分割
+
+- `product-detail-client.tsx` 使用 `dynamic` 导入，禁用 SSR
+- 各 section 组件按需加载
+
+### 7.2 动画优化
+
+- 使用 `will-change` 提示浏览器优化
+- 避免同时触发过多动画
+- 使用 `IntersectionObserver` 替代 `scroll` 事件监听
+
+### 7.3 图片优化
+
+- 使用 Next.js `Image` 组件自动优化
+- 暂无图片需求，后续可扩展
+
+---
+
+## 8. 成功标准
+
+### 8.1 功能验收
+
+- [ ] ERP 产品页展示所有产品信息
+- [ ] 8 个 section 按设计顺序渲染
+- [ ] 所有动画正常触发
+- [ ] 导航栏动态变色正常
+- [ ] CTA 按钮链接正确
+
+### 8.2 性能验收
+
+- [ ] Lighthouse Performance > 80
+- [ ] First Contentful Paint < 2s
+- [ ] 无明显卡顿或闪烁
+
+### 8.3 无障碍验收
+
+- [ ] 键盘导航正常
+- [ ] 屏幕阅读器可访问
+- [ ] 减少动画偏好生效
+
+---
+
+## 9. 后续扩展
+
+### 9.1 其他产品页
+
+验证通过后，可将组件复用到 CRM、CMS、BI 产品页：
+- 创建 `ProductDetailClient` 通用组件
+- 通过 props 传入产品数据
+- 保持一致的交互体验
+
+### 9.2 视频集成
+
+预留视频播放能力：
+- 创建 `ProductVideo` 组件
+- 支持滚动触发播放/暂停
+- 支持 wide/vert 双版本
+
+---
+
+## 10. 风险与缓解
+
+| 风险 | 影响 | 缓解措施 |
+|------|------|---------|
+| 动画性能问题 | 用户体验下降 | 使用 `will-change`、减少同时动画数量 |
+| 导航栏切换闪烁 | 视觉瑕疵 | 使用 CSS transition 平滑过渡 |
+| SEO 影响 | 搜索排名下降 | 保留服务端元数据、使用 SSR 首屏 |
+
+---
+
+**文档版本**: 1.0
+**最后更新**: 2026-04-24
@@ -0,0 +1,259 @@
+# 移除联系电话和更新 Logo 字体设计文档
+
+**日期**: 2026-04-25
+**作者**: 张翔
+**状态**: 待审查
+
+## 概述
+
+本文档描述了两个独立的优化需求：
+1. 移除网站中"电话咨询"相关的显示内容
+2. 更新 Logo SVG 使用青柳隶书字体
+
+## 需求背景
+
+### 需求 1: 移除联系电话
+
+**原因**: 公司目前没有对外联系电话，需要移除所有"电话咨询"相关的显示内容。
+
+**范围**:
+- 移除页面上的"电话咨询"按钮
+- **保留**联系表单中的电话输入字段（用户需要填写自己的电话）
+
+### 需求 2: 更新 Logo 字体
+
+**原因**: Logo 和 Hero 等使用"睿新致遠"繁体字的部分需要使用青柳隶书字体，确保品牌一致性。
+
+**范围**:
+- 更新 Logo SVG 文件
+- Hero 标题已正确使用青柳隶书字体（无需修改）
+
+## 技术方案
+
+### 方案 1: 移除联系电话
+
+#### 修改文件清单
+
+| 文件路径 | 修改类型 | 说明 |
+|---------|---------|------|
+| `src/components/services/service-cta-section.tsx` | 删除代码 | 移除"电话咨询"按钮和 Phone 图标 import |
+| `src/components/products/product-cta-section.tsx` | 删除代码 | 移除"电话咨询"按钮和 Phone 图标 import |
+| `src/app/(marketing)/solutions/[id]/solution-detail-client.tsx` | 删除代码 | 移除"电话咨询"按钮和 Phone 图标 import |
+
+#### 详细修改说明
+
+**1. service-cta-section.tsx**
+
+移除以下代码：
+```tsx
+// 移除 import
+import { Phone } from 'lucide-react';
+
+// 移除按钮
+<RippleButton
+  href="tel:+8613800138000"
+  rippleColor="rgba(255, 255, 255, 0.2)"
+  className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
+>
+  <Phone className="w-4 h-4 mr-2" />
+  电话咨询
+</RippleButton>
+```
+
+**2. product-cta-section.tsx**
+
+移除以下代码：
+```tsx
+// 移除 import
+import { Phone } from 'lucide-react';
+
+// 移除按钮
+<RippleButton
+  href="tel:+8613800138000"
+  rippleColor="rgba(255, 255, 255, 0.2)"
+  className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
+>
+  <Phone className="w-4 h-4 mr-2" />
+  电话咨询
+</RippleButton>
+```
+
+**3. solution-detail-client.tsx**
+
+移除以下代码：
+```tsx
+// 移除 import（如果不再使用）
+import { Phone } from 'lucide-react';
+
+// 移除按钮
+<Button variant="outline" asChild>
+  <a href="tel:+8613800138000">
+    <Phone className="w-4 h-4 mr-2" />
+    电话咨询
+  </a>
+</Button>
+```
+
+#### 不修改的文件
+
+- `src/components/sections/contact-section.tsx` - **保留**电话输入字段，用户需要填写自己的电话
+
+### 方案 2: 更新 Logo 字体
+
+#### 当前状态
+
+- Logo SVG 使用手绘的 SVG path（书法字体路径）
+- Hero 标题已使用青柳隶书字体（通过 `font-brand` CSS 类）
+
+#### 实现方案
+
+**方案 A: 重新生成 SVG path（推荐）**
+
+优势：
+- 不依赖浏览器字体加载
+- 在所有设备上显示一致
+- 性能更好
+
+步骤：
+1. 使用青柳隶书字体文件生成"睿新致遠"的 SVG path
+2. 替换 `public/logo.svg` 和 `public/logo-white.svg` 中的字体路径
+
+#### 修改文件清单
+
+| 文件路径 | 修改类型 | 说明 |
+|---------|---------|------|
+| `public/logo.svg` | 替换内容 | 使用青柳隶书重新生成 SVG path |
+| `public/logo-white.svg` | 替换内容 | 使用青柳隶书重新生成 SVG path |
+
+#### 技术细节
+
+Logo SVG 结构：
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 120">
+  <!-- 红色印章 -->
+  <g transform="translate(12, 12)">
+    <!-- 睿新致遠 - 青柳隶书字体路径 -->
+    <path d="..." />
+  </g>
+  
+  <!-- 公司名称 -->
+  <g transform="translate(110, 60)">
+    <!-- 睿新致遠 - 青柳隶书字体路径 -->
+    <path d="..." />
+    <!-- NOVALON - 英文字体 -->
+    <text>NOVALON</text>
+  </g>
+</svg>
+```
+
+## 测试验证
+
+### 功能测试
+
+1. **页面渲染测试**
+   - 验证服务页面不再显示"电话咨询"按钮
+   - 验证产品页面不再显示"电话咨询"按钮
+   - 验证解决方案详情页不再显示"电话咨询"按钮
+
+2. **表单测试**
+   - 验证联系表单电话字段正常显示
+   - 验证表单提交功能正常
+
+### 视觉测试
+
+1. **Logo 显示测试**
+   - 验证 Logo 在深色背景上显示正确
+   - 验证 Logo 在浅色背景上显示正确
+   - 验证青柳隶书字体渲染效果
+
+2. **响应式测试**
+   - 验证 Logo 在不同屏幕尺寸下的显示效果
+
+### 构建测试
+
+1. **构建验证**
+   - 运行 `pnpm build` 确保无错误
+   - 检查构建产物大小
+
+2. **E2E 测试**
+   - 运行 `pnpm test` 确保无回归
+   - 更新相关测试用例（如有必要）
+
+## 部署计划
+
+### 部署步骤
+
+1. **代码修改**
+   - 移除"电话咨询"按钮
+   - 更新 Logo SVG 文件
+
+2. **本地验证**
+   - 运行开发服务器验证修改
+   - 运行构建验证无错误
+
+3. **测试验证**
+   - 运行 E2E 测试
+   - 手动验证关键页面
+
+4. **提交代码**
+   - 提交修改到 Git
+   - 推送到远程仓库
+
+5. **部署生产**
+   - 构建生产版本
+   - 部署到生产服务器
+   - 验证生产环境
+
+### 回滚计划
+
+如果出现问题，可以快速回滚：
+1. 恢复之前的 Git 提交
+2. 重新构建和部署
+
+## 风险评估
+
+### 低风险
+
+- 移除"电话咨询"按钮：影响范围明确，不涉及核心功能
+- 更新 Logo SVG：纯静态资源替换，风险极低
+
+### 缓解措施
+
+- 保留联系表单电话字段，确保用户可以留下联系方式
+- 完整测试后再部署生产环境
+
+## 成功标准
+
+1. ✅ 所有"电话咨询"按钮已移除
+2. ✅ 联系表单电话字段正常工作
+3. ✅ Logo 使用青柳隶书字体显示
+4. ✅ 构建无错误
+5. ✅ E2E 测试通过
+6. ✅ 生产环境验证通过
+
+## 时间估算
+
+- 代码修改：15 分钟
+- 本地验证：10 分钟
+- 测试验证：15 分钟
+- 部署生产：10 分钟
+- **总计**：约 50 分钟
+
+## 附录
+
+### 相关文件
+
+- `src/components/services/service-cta-section.tsx`
+- `src/components/products/product-cta-section.tsx`
+- `src/app/(marketing)/solutions/[id]/solution-detail-client.tsx`
+- `src/components/sections/contact-section.tsx`
+- `public/logo.svg`
+- `public/logo-white.svg`
+- `src/app/layout.tsx`（字体配置）
+- `src/app/globals.css`（font-brand 样式）
+
+### 参考资料
+
+- 青柳隶书字体文件：`src/app/fonts/AoyagiReisho.ttf`
+- CSS 字体变量：`--font-aoyagi-reisho`
+- CSS 类：`.font-brand`
@@ -0,0 +1,187 @@
+# Atlassian 风格品牌融合重构设计规格
+
+**日期**: 2026-04-30
+**状态**: 已审批
+**参考**: Atlassian 官网设计思路 × Novalon 水墨科技品牌基因
+
+---
+
+## 1. 概述
+
+### 1.1 目标
+
+借鉴 Atlassian 官网的信息架构和交互模式，重构 Novalon 官网首页，实现"收敛但保留印记"的品牌升级——在保持朱砂红品牌色和书法标题辨识度的前提下，采用更专业、更清晰的白底信息展示风格。
+
+### 1.2 范围
+
+- Phase 1：首页重构 + 设计系统基础（本次规格范围）
+- Phase 2：产品页/服务页迁移（后续）
+- Phase 3：其余页面 + 设计系统完善（后续）
+
+### 1.3 设计决策
+
+| 决策项 | 选择 | 理由 |
+|--------|------|------|
+| 品牌方向 | B — 收敛但保留印记 | 专业感与品牌特色兼顾 |
+| 交付节奏 | A+C 混合 — 首页驱动的设计系统 | 用实际页面需求驱动组件设计 |
+| 首页布局 | 方案二 — 品牌融合重构 | Atlassian 架构 + Novalon 叙事 |
+| 动效策略 | 大幅收敛 | 移除粒子/水墨，保留微交互 |
+| 导航结构 | 4核心+2下拉 | 减少认知负担，产品矩阵预览 |
+
+---
+
+## 2. 品牌视觉规范
+
+### 2.1 色彩（保留现有体系，新增场景色）
+
+```css
+/* 保留 */
+--color-primary: #1C1C1C;
+--color-brand-primary: #C41E3A;
+--color-bg-secondary: #FFFBF5;
+--color-bg-tertiary: #F5F5F5;
+
+/* 新增场景色 */
+--color-challenge-isolation: #FEF2F4;   /* 系统孤岛 - 红底 */
+--color-challenge-growth: #FFFBEB;      /* 增长瓶颈 - 黄底 */
+--color-challenge-compliance: #F0FDF4;  /* 合规风险 - 绿底 */
+```
+
+### 2.2 动效策略
+
+| 组件 | 策略 | 说明 |
+|------|------|------|
+| InkBackground | ❌ 废弃 | 水墨背景不再使用 |
+| DataParticleFlow | ❌ 废弃 | 粒子动效过于花哨 |
+| ParticleGalaxy | ❌ 废弃 | 粒子星河 |
+| MouseInteractiveParticles | ❌ 废弃 | 鼠标交互粒子 |
+| FluidWaveBackground | ❌ 废弃 | 流体波浪 |
+| GeometricAbstract | ❌ 废弃 | 几何抽象 |
+| GridLines | ❌ 废弃 | 网格线 |
+| AdvancedFloatingEffects | ❌ 废弃 | 高级浮动效果 |
+| SubtleDots | ✅ 保留 | 微妙圆点符合收敛方向 |
+| GradientFlow | 🔧 简化 | 保留但降低强度，Hero极淡背景 |
+| ScrollReveal/FadeUp | ✅ 保留 | 核心滚动交互 |
+| AnimatedNumber | ✅ 保留 | 数据统计动画 |
+| SealAnimation | 🔄 重构 | 仅用于品牌标题区 |
+
+### 2.3 排版
+
+- 品牌标题：青柳隶书（保留）
+- 正文/导航：Geist Sans（保留）
+- 代码/数字：Geist Mono（保留）
+
+---
+
+## 3. 首页结构
+
+### 3.1 整体布局
+
+```
+Navigation     Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于我们
+Section 1      Hero（暖白 + 书法标题 + 双CTA + 极简装饰）
+Section 2      社会证明数据条（三列数字 + 客户Logo墙）
+Section 3      核心产品矩阵（2×2 卡片 + 朱砂红左边框）
+Section 4      挑战与场景入口（"您面临什么挑战？"三列痛点卡片）
+Section 5      客户成果（深墨色背景 + 引言 + 量化数据）
+Section 6      CTA（朱砂红渐变 + 行动号召）
+Footer         品牌信息 + 导航 + 联系方式
+```
+
+视觉节奏：暖白 → 浅灰 → 白 → 暖白 → **深墨** → 朱砂红 → 浅灰
+
+### 3.2 导航重设计
+
+**当前**：8项平铺（首页/核心业务/解决方案/产品服务/成功案例/关于我们/新闻动态/联系）
+
+**新导航**：
+- Logo（睿新致遠）
+- 产品 ▾ → 下拉展示 ERP/CRM/BI/CMS 四产品矩阵
+- 解决方案 ▾ → 下拉展示制造业/零售/教育/医疗四行业
+- 服务
+- 案例
+- 关于我们（含团队/新闻）
+- 联系我们
+
+### 3.3 Section 详细设计
+
+#### Section 1: Hero
+
+- **背景**：暖白 `#FFFBF5` → `#FFFFFF` 渐变 + 极简装饰圆圈（1px border, rgba(#C41E3A, 0.08)）
+- **内容**：
+  - 品牌标签：`NOVALON · 睿新致遠`（8px, letter-spacing: 2px, #C41E3A）
+  - 主标题：`智连未来，成长伙伴`（青柳隶书, 大号, #1C1C1C）
+  - 副标题：`从战略规划到系统落地，陪伴企业完成数字化转型的每一步`（14px, #5C5C5C）
+  - 双CTA：`预约演示`（朱砂红实心）+ `了解方案`（墨黑描边）
+- **动效**：入场 FadeUp + 极淡 GradientFlow 背景
+
+#### Section 2: 社会证明
+
+- **背景**：浅灰 `#F5F5F5`
+- **内容**：三列数字（200+ 企业客户 / 15+ 行业覆盖 / 99.9% 系统可用性）
+- **动效**：AnimatedNumber 数字滚动
+- **可选**：客户 Logo 墙（横向滚动）
+
+#### Section 3: 核心产品矩阵
+
+- **背景**：白色 `#FFFFFF`
+- **布局**：2×2 网格
+- **每个卡片**：
+  - 朱砂红左边框（3px solid #C41E3A）
+  - 产品名称（14px, font-weight: 700）
+  - 关键词描述（12px, #5C5C5C）
+  - Hover：微提升 + 左边框加粗
+- **动效**：StaggerContainer 依次入场
+
+#### Section 4: 挑战与场景入口
+
+- **背景**：暖白 `#FFFBF5`
+- **标题**：`您面临什么挑战？`
+- **三列卡片**：
+  - 系统孤岛（#FEF2F4 红底 + 🏭）
+  - 增长瓶颈（#FFFBEB 黄底 + 📈）
+  - 合规风险（#F0FDF4 绿底 + 🔒）
+- **交互**：Hover 色变加深 + 点击跳转对应解决方案页
+- **动效**：FadeUp 依次入场
+
+#### Section 5: 客户成果
+
+- **背景**：深墨 `#1C1C1C`
+- **内容**：
+  - 标签：`客户成果`（8px, rgba(255,255,255,0.6)）
+  - 客户引言（16px, #FFFFFF, italic）
+  - 署名（12px, rgba(255,255,255,0.5)）
+  - 量化数据：2-3 个指标（数字 #C41E3A + 标签 rgba(255,255,255,0.4)）
+- **数据来源**：CASES 常量中的 testimonial + results
+- **动效**：FadeUp 入场
+
+#### Section 6: CTA
+
+- **背景**：朱砂红渐变 `linear-gradient(135deg, #C41E3A, #A01830)`
+- **内容**：
+  - 标题：`开启数字化转型之旅`（白色, font-weight: 700）
+  - 副标题：`免费咨询 · 专属方案 · 30天试用`（rgba(255,255,255,0.8)）
+  - 按钮：`立即咨询`（白色描边）
+
+---
+
+## 4. Phase 1 沉淀组件
+
+| 组件 | 职责 | 复用场景 |
+|------|------|---------|
+| MegaDropdown | 产品/解决方案矩阵下拉导航 | 全站导航 |
+| ProductCard | 朱砂红左边框产品卡片 | 首页、产品列表页 |
+| ChallengeCard | 痛点/场景入口卡片 | 首页、解决方案页 |
+| StatsBar | 三列数据统计条 | 首页、产品页、关于页 |
+| TestimonialBlock | 深色背景客户证言 | 首页、案例页、产品页 |
+| CTASection | 朱砂红渐变行动号召 | 全站通用 |
+
+---
+
+## 5. 技术约束
+
+- **框架**：Next.js 16 + React 19 + Tailwind CSS 4
+- **动效**：Framer Motion 12（保留）
+- **图标**：Lucide React（保留）
+- **部署**：静态导出（保持现有架构）
+- **测试**：Jest 单元测试 + Playwright E2E