# GEO 官网重构规划方案

> **文档版本**: v1.0
> **创建日期**: 2026-05-19
> **文档类型**: 官网重构规划
> **产品**: GEO 平台 (Generative Engine Optimization Platform)
> **状态**: 待评审

---

## 目录

1. [重构背景与目标](#一重构背景与目标)
2. [官网文案结构与内容规划](#二官网文案结构与内容规划)
3. [视觉呈现方案](#三视觉呈现方案)
4. [客户咨询模块规划](#四客户咨询模块规划)
5. [技术架构建议](#五技术架构建议)
6. [实施路线图](#六实施路线图)

---

## 一、重构背景与目标

### 1.1 现状分析

| 维度 | 现状 | 问题 |
|------|------|------|
| **定位** | 现有官网为"菲西尔智能"公司介绍站 | 未突出 GEO 产品独立价值主张 |
| **内容** | 以 AI+物业/资管/CRM 为主 | 缺少 GEO 品牌曝光分析的核心叙事 |
| **交互** | 基础 IntersectionObserver 淡入动效 | 缺乏沉浸感和品牌记忆点 |
| **转化** | 简单表单 + 假提交逻辑 | 无真实数据存储和通知机制 |
| **SEO/GEO** | 基础 meta 标签 | 未针对 AI 搜索引擎做结构化优化 |

### 1.2 重构目标

| 目标 | 衡量指标 |
|------|----------|
| **品牌认知** | 访客 5 秒内理解 GEO 平台核心价值 |
| **转化提升** | 咨询表单提交率 > 5% |
| **沉浸体验** | 视差滚动 + 动效，平均停留时长 > 2 分钟 |
| **AI 可发现** | AI 搜索引擎（ChatGPT/Kimi/文心）能准确引用官网内容 |
| **SEO 基础** | 核心关键词 3 个月内进入百度/Google 前 3 页 |

### 1.3 核心原则

1. **产品即叙事** -- 官网本身就是 GEO 理念的最佳示范
2. **数据驱动说服** -- 用真实数据场景展示产品价值，而非空洞口号
3. **AI 可读优先** -- 内容结构同时面向人类用户和 AI 搜索引擎
4. **渐进式披露** -- 首屏传递核心价值，滚动逐步展开细节
5. **转化闭环** -- 每个模块都有明确的下一步行动引导

---

## 二、官网文案结构与内容规划

### 2.1 页面规划总览

| 序号 | 页面名称 | 核心职能 | URL 路径 | 优先级 |
|------|----------|----------|----------|--------|
| 1 | 首页 | 吸引注意、传递价值主张、引导转化 | `/` | P0 |
| 2 | 产品功能 | 展示核心功能与使用场景 | `/features` | P0 |
| 3 | 定价方案 | 透明定价、促进转化 | `/pricing` | P1 |
| 4 | 博客/资源 | SEO/GEO 内容营销、行业洞察 | `/blog` | P1 |
| 5 | 关于我们 | 建立信任、团队与愿景 | `/about` | P2 |

> **说明**: 采用多页面架构而非单页应用，每个页面有独立的 URL、title 和 meta 信息，有利于 SEO 和 AI 搜索引擎索引。首页作为核心转化页面，包含最完整的内容叙事。

---

### 2.2 首页文案结构

```
首页
├── 1.1 导航栏 (Navigation)
├── 1.2 Hero 区域 (首屏)
├── 1.3 时代变革 (为什么 GEO 很重要)
├── 1.4 核心功能展示 (产品能力)
├── 1.5 工作原理 (如何运作)
├── 1.6 竞品对比场景 (差异化价值)
├── 1.7 客户证言 (社会证明)
├── 1.8 定价预览 (转化引导)
├── 1.9 常见问题 (消除疑虑)
├── 1.10 最终 CTA (转化收口)
└── 1.11 页脚 (Footer)
```

#### 1.1 导航栏

| 元素 | 内容 |
|------|------|
| Logo | GEO 平台 Logo + 文字 |
| 导航链接 | 功能 · 定价 · 资源 · 关于 |
| 主 CTA | 免费试用 |
| 次 CTA | 预约演示 |

#### 1.2 Hero 区域（首屏）

**主标题:**
> 你的品牌，AI 推荐了吗？

**副标题:**
> GEO 平台 -- 实时监控品牌在 AI 搜索中的曝光表现，看清竞争格局，获取行动建议，让品牌在 AI 时代被看见。

**主 CTA 按钮:** 免费开始监测

**次 CTA 按钮:** 预约产品演示

**视觉元素:** 全屏背景 -- 模拟 AI 搜索界面，搜索框中输入品牌名，AI 回答中品牌名高亮/未高亮的对比动效。

**数据指标条:**

| 指标 | 数值 |
|------|------|
| 覆盖 AI 平台 | 8+ |
| 监控查询词 | 10,000+ |
| 品牌引用分析 | 实时 |
| 部署时间 | 5 分钟 |

**SEO/GEO 优化要点:**
- `<title>` 标签: `GEO平台 - 品牌AI搜索曝光度分析 | 让品牌在AI时代被看见`
- `<meta name="description">`: 包含核心关键词 "GEO"、"品牌AI曝光"、"AI搜索优化"、"竞品对比"
- `<h1>` 标签仅使用一次，包含主关键词
- Schema.org 结构化数据: `SoftwareApplication` + `Organization`

#### 1.3 时代变革模块

**章节标题:** 搜索变了，品牌曝光的逻辑也变了

**章节副标题:** 60% 的 Z 世代已转向 AI 搜索。当用户问 AI "推荐一个好用的项目管理工具"，你的品牌会出现吗？

**三列对比卡片:**

| 传统 SEO 时代 | AI 搜索时代 (GEO) | 你的现状 |
|---------------|-------------------|----------|
| 用户搜索关键词 | 用户用自然语言提问 | 你还在优化关键词排名？ |
| 品牌出现在搜索结果列表 | 品牌被 AI 引用或忽略 | 你知道 AI 有没有提到你吗？ |
| 排名决定曝光 | AI 的引用决定曝光 | 你知道竞品被引用了多少次吗？ |
| SEO 工具可以监测 | 没有专门的监测工具 | 你用什么来衡量 AI 渠道的效果？ |

**核心洞察框:**
> SEO 让你在搜索结果中被找到。GEO 让你在 AI 回答中被推荐。

**SEO/GEO 优化要点:**
- 使用 `<h2>` 标签，包含 "AI搜索" "GEO" 等关键词
- 对比表格使用语义化 `<table>` 标签，AI 搜索引擎可解析
- 添加 `FAQPage` Schema，便于 AI 直接引用

#### 1.4 核心功能展示

**章节标题:** 五大核心能力，掌控品牌 AI 曝光

**章节副标题:** 从监控到行动，一站式 GEO 解决方案

**功能卡片（5 张）:**

| 序号 | 功能名称 | 核心文案 | 视觉元素 |
|------|----------|----------|----------|
| 01 | 品牌健康监控 | 实时评估品牌在各大 AI 平台的曝光表现，健康评分一目了然。就像给品牌做 AI 体检，哪里强、哪里弱，一眼看清。 | 仪表盘截图/动效，健康分数从红变绿 |
| 02 | 竞品对比 | 了解与竞品在 AI 搜索中的差距。谁被 AI 提及更多？谁的推荐排名更靠前？数据说话，不用猜。 | 雷达图/对比柱状图动效 |
| 03 | AI 引用分析 | 品牌被哪些 AI 平台提及？在什么场景下被引用？引用内容是正面还是中性？全链路追踪。 | AI 对话气泡动效，品牌名高亮 |
| 04 | 查询词效果追踪 | 追踪核心查询词下品牌的曝光变化。哪些词带来了 AI 推荐？哪些词被竞品占据？精准定位优化方向。 | 搜索词云 + 趋势线动效 |
| 05 | 智能行动建议 | 不只告诉你问题在哪，还告诉你怎么做。基于数据生成可执行的优化建议，从诊断到行动一步到位。 | 行动卡片依次展开动效 |

**SEO/GEO 优化要点:**
- 每个功能使用 `<h3>` 标签，包含功能名 + 核心关键词
- 功能描述使用 `<article>` 标签包裹，增加语义权重
- 添加 `SoftwareApplication.features` Schema

#### 1.5 工作原理

**章节标题:** 三步开始，5 分钟上手

**步骤展示:**

| 步骤 | 标题 | 描述 |
|------|------|------|
| Step 1 | 输入品牌名称 | 输入你的品牌，系统自动识别竞品和监控平台 |
| Step 2 | 获取健康报告 | AI 自动分析品牌在 8+ 平台的曝光表现，生成健康评分 |
| Step 3 | 获取行动建议 | 基于数据生成可执行的优化建议，持续追踪效果 |

**视觉:** 横向时间线，每步配有产品界面截图/动效，滚动时逐步展开。

#### 1.6 竞品对比场景

**章节标题:** 别人被 AI 推荐，你被 AI 忽略？

**场景描述:**
> 当用户问 Kimi："推荐一个好用的项目管理工具"，竞品 A 被推荐了 3 次，你的品牌 0 次提及。
> 当用户问文心一言："XX 行业哪个品牌好"，竞品 B 排在推荐第一位，你不在列表里。

**交互元素:** 模拟 AI 搜索对话界面，用户可切换不同 AI 平台和查询词，实时看到品牌 vs 竞品的引用差异。

**数据展示:**

| 指标 | 你的品牌 | 竞品 A | 竞品 B |
|------|----------|--------|--------|
| AI 引用次数 | 12 | 45 | 38 |
| 推荐排名 | 未进入前 5 | #2 | #3 |
| 正面提及率 | 67% | 82% | 75% |

#### 1.7 客户证言

**章节标题:** 他们已经在用 GEO 平台

**证言卡片结构:**

| 元素 | 内容 |
|------|------|
| 客户 Logo | 品牌方 Logo |
| 客户信息 | 姓名 · 职位 · 公司 |
| 证言内容 | 真实使用反馈 |
| 关键指标 | 使用后提升的具体数据 |

**示例证言（待替换为真实客户）:**

| 客户 | 证言 |
|------|------|
| 某消费品品牌市场总监 | "用了 GEO 平台才发现，我们在 Kimi 上的曝光几乎为零。调整内容策略后，AI 引用率提升了 200%。" |
| 某科技公司品牌负责人 | "以前只知道做 SEO，现在终于有工具能监测 AI 渠道了。竞品对比功能太实用了。" |

**SEO/GEO 优化要点:**
- 使用 `Review` + `Organization` Schema 标记客户证言
- 证言内容包含行业关键词，提升 AI 引用概率

#### 1.8 定价预览

**章节标题:** 透明定价，按需选择

**三档定价卡片:**

| 方案 | 价格 | 核心权益 | 目标用户 |
|------|------|----------|----------|
| 入门版 | 免费 | 1 个品牌 · 基础监控 · 周报 | 初步了解 AI 曝光的用户 |
| 专业版 | 999 元/月 | 3 个品牌 · 全平台监控 · 竞品对比 · 行动建议 | 品牌市场部门 |
| 企业版 | 联系我们 | 无限品牌 · 高级分析 · API 接入 · 专属客户成功 | 大型企业 |

**CTA:** 每个方案下方放置对应按钮（免费开始 / 立即订阅 / 联系销售）

#### 1.9 常见问题

**章节标题:** 常见问题

**FAQ 列表（6-8 条）:**

| 问题 | 回答要点 |
|------|----------|
| GEO 和 SEO 有什么区别？ | SEO 优化搜索引擎排名，GEO 优化 AI 搜索中的品牌引用。两者互补，但逻辑不同。 |
| GEO 平台支持哪些 AI 平台？ | 文心一言、Kimi、通义千问、豆包、讯飞星火、天工 AI、智谱清言、Perplexity 等 8+ 平台。 |
| 需要技术团队配合吗？ | 不需要。5 分钟注册，输入品牌名即可开始监测。 |
| 数据更新频率是多少？ | 核心指标实时更新，详细报告每日刷新。 |
| 免费版有什么限制？ | 免费版支持 1 个品牌的基础监控和周报，适合初步体验。 |
| 如何保证数据的准确性？ | 我们直接调用各 AI 平台 API，结合语义分析引擎，确保引用检测的准确率 > 95%。 |

**SEO/GEO 优化要点:**
- 使用 `FAQPage` Schema 标记，这是 AI 搜索引擎最常引用的结构化数据
- 问题和回答使用 `<details>/<summary>` 或 `Q&A` 语义标签
- FAQ 内容覆盖用户最可能向 AI 提问的问题

#### 1.10 最终 CTA

**章节标题:** 现在，看看你的品牌在 AI 中是什么位置

**副标题:** 5 分钟免费检测，无需信用卡

**CTA 按钮:** 免费开始监测

**信任元素:** "已有 500+ 品牌在使用" · "无需信用卡" · "5 分钟上手"

#### 1.11 页脚

| 区域 | 内容 |
|------|------|
| 品牌信息 | GEO 平台 Logo · 一句话介绍 · 社交媒体链接 |
| 产品 | 功能 · 定价 · 更新日志 · API 文档 |
| 资源 | 博客 · 帮助中心 · GEO 指南 · 行业报告 |
| 公司 | 关于我们 · 联系我们 · 招聘 · 合作伙伴 |
| 法律 | 隐私政策 · 服务条款 · ICP 备案 |
| 底部 | Copyright · 备案号 |

---

### 2.3 产品功能页文案结构

```
产品功能页
├── 2.1 页面标题区
├── 2.2 功能总览导航
├── 2.3 品牌健康监控详情
├── 2.4 竞品对比详情
├── 2.5 AI 引用分析详情
├── 2.6 查询词效果追踪详情
├── 2.7 智能行动建议详情
├── 2.8 平台覆盖展示
└── 2.9 功能页 CTA
```

**页面标题:** 五大核心能力

**页面副标题:** 从品牌监控到行动优化，GEO 平台提供完整的 AI 搜索曝光管理方案

**每个功能详情模块包含:**
- 功能标题 + 一句话描述
- 产品界面截图/GIF 演示
- 3-4 个使用场景
- 关键指标展示
- 相关功能交叉引用

**平台覆盖展示:**

| AI 平台 | Logo | 监控能力 |
|---------|------|----------|
| 文心一言 | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| Kimi | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| 通义千问 | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| 豆包 | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| 讯飞星火 | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| 天工 AI | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| 智谱清言 | Logo | 品牌引用 · 推荐排名 · 语义分析 |
| Perplexity | Logo | 品牌引用 · 推荐排名 · 语义分析 |

**SEO/GEO 优化要点:**
- URL: `/features` -- 简洁、包含关键词
- 每个功能模块使用 `<section>` + `id` 锚点，支持深度链接
- 添加 `SoftwareApplication` Schema，`featureList` 字段列出所有功能

---

### 2.4 定价页文案结构

```
定价页
├── 4.1 页面标题区
├── 4.2 定价方案对比
├── 4.3 功能对比表
├── 4.4 常见问题（定价相关）
└── 4.5 定价页 CTA
```

**页面标题:** 选择适合你的方案

**页面副标题:** 从免费体验到企业定制，灵活选择

**定价方案对比:** 同首页 1.8，但增加完整功能对比表

**功能对比表:**

| 功能 | 入门版 | 专业版 | 企业版 |
|------|--------|--------|--------|
| 监控品牌数 | 1 | 3 | 无限 |
| AI 平台覆盖 | 3 个 | 全部 8+ | 全部 8+ |
| 竞品对比 | - | 5 个竞品 | 无限 |
| AI 引用分析 | 基础 | 完整 | 完整 + 自定义 |
| 查询词追踪 | 10 个 | 100 个 | 无限 |
| 行动建议 | - | 智能建议 | 定制化建议 |
| 报告导出 | - | PDF/Excel | PDF/Excel/API |
| 数据更新 | 周更新 | 日更新 | 实时 |
| API 接入 | - | - | 包含 |
| 专属客户成功 | - | - | 包含 |

**SEO/GEO 优化要点:**
- 添加 `OfferCatalog` Schema，便于 AI 搜索引擎展示定价信息
- 定价信息使用语义化标记，AI 可直接引用

---

### 2.5 博客/资源页文案结构

```
博客/资源页
├── 5.1 页面标题区
├── 5.2 分类导航
├── 5.3 精选文章
├── 5.4 文章列表
└── 5.5 订阅 CTA
```

**内容分类:**

| 分类 | 内容方向 | GEO 价值 |
|------|----------|----------|
| GEO 指南 | GEO 概念解读、优化方法论 | 建立专业权威，AI 引用率高 |
| 行业报告 | AI 搜索趋势、品牌曝光数据报告 | 数据驱动内容，媒体引用价值 |
| 产品更新 | 新功能发布、版本更新日志 | 展示产品活跃度 |
| 案例分析 | 客户成功案例、优化实战 | 转化说服力 |
| AI 平台动态 | 各 AI 平台更新、算法变化 | 时效性内容，SEO 流量入口 |

**SEO/GEO 优化要点:**
- 每篇文章独立 URL，包含关键词 slug（如 `/blog/what-is-geo`）
- 文章使用 `Article` Schema + `author` + `datePublished`
- 文章末尾添加结构化摘要框，便于 AI 引用
- 内链策略：文章间交叉引用，提升页面权重

**重点文章规划（首发内容）:**

| 优先级 | 文章标题 | 目标关键词 |
|--------|----------|------------|
| P0 | 什么是 GEO？AI 搜索时代的品牌优化指南 | GEO、生成式引擎优化 |
| P0 | 2026 年中国 AI 搜索市场报告 | AI 搜索趋势、品牌曝光 |
| P1 | SEO vs GEO：两个时代的品牌曝光逻辑 | SEO vs GEO |
| P1 | 如何提升品牌在 Kimi/文心一言中的推荐率 | AI 搜索优化 |
| P2 | 5 个 GEO 优化实操技巧 | GEO 优化方法 |

---

### 2.6 关于我们页文案结构

```
关于我们页
├── 6.1 页面标题区
├── 6.2 公司介绍
├── 6.3 愿景与使命
├── 6.4 核心团队
├── 6.5 联系方式
└── 6.6 页脚
```

**页面标题:** 关于 GEO 平台

**公司介绍:**
> GEO 平台由上海菲西尔智能科技有限公司打造，是中国领先的 AI 搜索品牌曝光分析平台。我们帮助企业监测、分析并优化品牌在各大 AI 搜索引擎中的曝光表现，让品牌在 AI 时代被看见。

**愿景:** 让每一个品牌都能在 AI 搜索中占据有利位置

**使命:** 成为中国企业首选的 AI 时代品牌认知管理平台

**SEO/GEO 优化要点:**
- 添加 `Organization` Schema，包含公司名、地址、联系方式
- 团队成员使用 `Person` Schema
- 页面内容包含公司全称、地址等结构化信息，便于 AI 引用

---

### 2.7 全站 SEO/GEO 优化策略

#### 2.7.1 技术 SEO 基础

| 项目 | 实施方案 |
|------|----------|
| 站点地图 | 自动生成 `sitemap.xml`，提交至百度/Google |
| Robots.txt | 允许所有搜索引擎爬取，屏蔽 `/api/` 路径 |
| Canonical URL | 每个页面设置规范 URL |
| Open Graph | 每个页面设置 OG 标签，优化社交分享 |
| 页面速度 | LCP < 2.5s，FID < 100ms，CLS < 0.1 |
| 移动适配 | 响应式设计，移动端优先索引 |
| HTTPS | 全站 HTTPS |
| 结构化数据 | 每页至少一种 Schema.org 标记 |

#### 2.7.2 GEO 专项优化（让 AI 搜索引擎找到我们）

**核心原则:** AI 搜索引擎（ChatGPT、Kimi、文心一言等）通过理解网页内容来回答用户问题。我们的内容需要结构化、权威、易于被 AI 解析和引用。

| 策略 | 具体实施 |
|------|----------|
| **结构化内容** | 使用 FAQ、HowTo、Article 等 Schema，AI 可直接提取答案 |
| **权威引用** | 在内容中引用第三方数据源（Gartner、Forrester 等），增加可信度 |
| **概念定义** | 对 "GEO"、"AI搜索优化" 等概念给出明确定义，AI 倾向引用有清晰定义的内容 |
| **数据驱动** | 发布含具体数据的行业报告，AI 偏好引用有数据支撑的内容 |
| **内容深度** | 每个核心话题提供 2000+ 字的深度内容，而非碎片化短文 |
| **多格式** | 同一内容提供文本、表格、列表等多种格式，适配不同 AI 的解析偏好 |
| **引用标记** | 使用 `<cite>` 和 blockquote 标记引用内容，增加语义权重 |
| **实体标记** | 使用 `sameAs` 关联官方社交账号，建立实体可信度 |

#### 2.7.3 关键词策略

| 关键词类型 | 示例 | 目标页面 |
|------------|------|----------|
| 核心词 | GEO、GEO优化、AI搜索优化 | 首页 |
| 长尾词 | 品牌AI曝光分析、AI搜索品牌监控 | 功能页 |
| 问题词 | 什么是GEO、如何提升AI搜索曝光 | 博客 |
| 竞品词 | Semrush替代、Ahrefs中文替代 | 定价页 |
| 品牌词 | GEO平台、菲西尔GEO | 全站 |

---

## 三、视觉呈现方案

### 3.1 视差滚动技术选型

| 方案 | 优势 | 劣势 | 推荐度 |
|------|------|------|--------|
| **GSAP + ScrollTrigger** | 生态成熟、文档完善、性能优秀、与 React/Next.js 集成好、社区活跃 | 包体积较大（~30KB gzipped） | 强烈推荐 |
| Lenis + GSAP | Lenis 提供丝滑滚动体验，与 GSAP 配合好 | 需要两个库，增加复杂度 | 推荐 |
| Locomotive Scroll | 内置平滑滚动 + 视差、轻量 | 社区较小、维护节奏不稳定、与 Next.js 集成有坑 | 不推荐 |
| 纯 CSS 视差 | 零依赖、性能最好 | 效果有限、兼容性差、无法实现复杂交互 | 不推荐 |
| Framer Motion | React 生态原生、API 友好 | 滚动驱动动画能力不如 GSAP、包体积大 | 备选 |

**最终推荐: GSAP ScrollTrigger**

理由:
1. ScrollTrigger 是业界最成熟的滚动动画方案，文档和社区资源丰富
2. 与项目现有的 Next.js 前端框架完美集成（通过 `useGSAP` hook）
3. 性能优秀，支持 GPU 加速和 will-change 优化
4. 可实现从简单视差到复杂时间线动画的全场景覆盖
5. 免费用于标准 Web 项目

**技术实现要点:**
- 使用 `@gsap/react` 的 `useGSAP` hook 管理 React 生命周期
- 所有动画属性使用 `x`/`y`/`scale`/`opacity` 等 GPU 加速属性，避免触发 layout
- 设置 `scrub: true` 实现滚动驱动的平滑过渡
- 使用 `pin: true` 实现粘性定位效果
- 移动端降级：视差效果在移动端简化为淡入/位移，避免性能问题

### 3.2 视差滚动优秀参考案例

| 案例 | URL | 核心亮点 | 可借鉴点 |
|------|-----|----------|----------|
| **Apple Mac Pro** | apple.com/mac-pro | 全屏视差 + 3D 旋转 + 滚动驱动叙事 | 产品 360 度展示、滚动节奏控制、章节过渡 |
| **Linear** | linear.app | 克制优雅的微动效 + 视差文字 + 渐进式披露 | 科技感排版、功能卡片滚动展开、性能优化 |
| **Locomotive.ca** | locomotive.ca | 经典视差滚动 + 大胆排版 + 沉浸式叙事 | 全屏图片视差、文字层叠效果、章节切换动效 |
| **Awwwards - Raycast** | raycast.com | 功能展示滚动动效 + 交互式产品演示 | 功能卡片依次展开、代码/界面实时切换动效 |
| **Stripe** | stripe.com | 渐变背景视差 + 数据可视化动效 + 微交互 | 数据流动效、渐变色滚动变化、信任感设计 |

### 3.3 每个页面的视觉动效规划

#### 3.3.1 首页动效规划

| 模块 | 动效类型 | 具体效果 | 技术实现 |
|------|----------|----------|----------|
| **Hero** | 视差 + 动画 | 背景层（AI 搜索界面模拟）以 0.3x 速度滚动；文字层以 0.7x 速度上移；数据指标条从底部滑入；搜索框打字机效果 | GSAP ScrollTrigger pin + scrub |
| **时代变革** | 视差 + 对比切换 | 三列卡片从左右交错滑入；传统 vs AI 对比表格随滚动逐行高亮；背景渐变从暖色过渡到冷色 | GSAP stagger + ScrollTrigger |
| **核心功能** | 粘性滚动 + 依次展开 | 功能区域 pin 住，滚动时 5 张功能卡片依次从右侧滑入、展开、滑出；每张卡片配有产品界面动效 | GSAP pin + timeline + scrub |
| **工作原理** | 横向时间线 | 垂直滚动驱动横向时间线移动；三步流程从左到右依次展开，每步配有界面截图淡入 | GSAP horizontal scroll |
| **竞品对比** | 交互式模拟 | 模拟 AI 搜索对话界面，滚动时"搜索"自动触发，AI 回答逐字出现；品牌名高亮/竞品名高亮形成视觉对比 | GSAP text animation + ScrollTrigger |
| **客户证言** | 视差 + 轮播 | 证言卡片以不同速度横向滚动（视差层叠效果）；滚动到视口时卡片放大到焦点位 | GSAP horizontal parallax |
| **定价预览** | 淡入 + 悬浮 | 三档定价卡片从底部交错淡入；hover 时卡片上浮 + 光晕效果 | GSAP stagger + CSS hover |
| **FAQ** | 手风琴 + 视差 | 问题列表随滚动逐个淡入；展开/收起使用平滑高度动画 | GSAP height animation |
| **最终 CTA** | 粘性 + 脉冲 | CTA 区域 pin 住 2 秒；按钮有脉冲光晕效果；背景粒子加速汇聚 | GSAP pin + CSS animation |

**背景全局动效:**
- 深色主背景 + 流动渐变光晕（蓝紫色调，与现有品牌色系一致）
- 网格线背景，随滚动微弱位移
- 粒子效果：缓慢上浮的蓝色光点，数量随滚动增加
- 章节间过渡：发光分割线，滚动到时从中心向两侧展开

#### 3.3.2 产品功能页动效规划

| 模块 | 动效类型 | 具体效果 |
|------|----------|----------|
| 页面标题区 | 视差 | 标题文字大号视差，背景产品界面模糊视差 |
| 功能详情 | 粘性滚动 + 界面演示 | 每个功能区域 pin 住，左侧文字描述，右侧产品界面截图/动效同步切换 |
| 平台覆盖 | 网格动效 | AI 平台 Logo 网格，滚动时从中心向外扩散出现；hover 时 Logo 放大 + 平台信息浮层 |

#### 3.3.3 定价页动效规划

| 模块 | 动效类型 | 具体效果 |
|------|----------|----------|
| 定价卡片 | 视差 + 悬浮 | 三档卡片从底部交错淡入；推荐方案（专业版）略微放大 + 边框光晕 |
| 功能对比表 | 滚动展开 | 表格随滚动逐行淡入；勾选/横线图标有微动效 |
| CTA | 脉冲 | 按钮脉冲光晕 |

#### 3.3.4 博客页动效规划

| 模块 | 动效类型 | 具体效果 |
|------|----------|----------|
| 文章卡片 | 瀑布流 + 淡入 | 卡片交错淡入；hover 时上浮 + 阴影加深 |
| 文章详情 | 阅读进度 + 视差 | 顶部阅读进度条；文章内图片视差；代码块/引用块滑入 |

#### 3.3.5 关于我们页动效规划

| 模块 | 动效类型 | 具体效果 |
|------|----------|----------|
| 公司介绍 | 视差 + 渐变 | 文字视差滚动；背景从深蓝渐变到深紫 |
| 团队成员 | 卡片翻转 | hover 时卡片翻转显示详细信息 |

### 3.4 视觉设计规范

| 维度 | 规范 |
|------|------|
| **主色调** | 深色背景 `#0a0a0a` + 蓝色强调 `#3b82f6`（延续现有品牌色系） |
| **辅助色** | 紫色 `#8b5cf6`（渐变过渡）、绿色 `#22c55e`（健康/正面指标）、红色 `#ef4444`（警告/负面指标） |
| **字体** | 英文: Space Grotesk（标题）+ Inter（正文）；中文: Noto Sans SC |
| **标题字号** | Hero: clamp(48px, 8vw, 88px)；章节: clamp(32px, 5vw, 56px)；模块: 24px |
| **正文字号** | 16px，行高 1.7 |
| **间距** | 模块间距: clamp(80px, 12vw, 160px)；容器最大宽: 1200px |
| **圆角** | 卡片: 12px；按钮: 8px；标签: 100px |
| **动效时长** | 快: 0.3s；中: 0.6s；慢: 1.2s；滚动驱动: scrub 模式 |
| **缓动函数** | `power2.out`（淡入）、`power3.inOut`（位移）、`elastic.out(1, 0.5)`（弹跳） |

---

## 四、客户咨询模块规划

### 4.1 咨询引导 UI 设计

#### 4.1.1 入口设计

| 入口位置 | 形式 | 触发条件 |
|----------|------|----------|
| 导航栏右侧 | "预约演示" 按钮 | 始终可见 |
| 首页 Hero | "免费开始监测" 主 CTA | 始终可见 |
| 首页最终 CTA | "免费开始监测" 按钮 | 滚动到底部时 |
| 右下角浮动 | 圆形按钮 + "咨询" 文字 | 页面滚动超过 1 屏后出现 |
| 定价页 | "联系销售" 按钮 | 企业版方案 |
| 退出意图 | 弹窗 | 检测鼠标移向浏览器顶部（桌面端） |
| 停留超时 | 侧边滑出卡片 | 页面停留 > 30 秒未操作 |

#### 4.1.2 咨询表单交互流程

```
点击咨询入口
    │
    ▼
┌─────────────────────────┐
│  选择咨询类型            │
│  ○ 免费试用             │
│  ○ 预约产品演示         │
│  ○ 企业方案咨询         │
│  ○ 其他                 │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  填写咨询表单            │
│  (根据咨询类型动态调整)   │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  提交成功                │
│  + 预计回复时间          │
│  + 添加企业微信          │
└─────────────────────────┘
```

#### 4.1.3 表单展示方式

| 场景 | 展示方式 |
|------|----------|
| 导航栏/浮动按钮点击 | 右侧滑出抽屉（Drawer），不离开当前页面 |
| 页面内 CTA | 滚动到页面内嵌表单区域 |
| 退出意图弹窗 | 居中弹窗（Modal），简化版表单（仅 3 个必填字段） |

### 4.2 咨询表单字段设计

#### 4.2.1 完整版表单（页面内嵌 / Drawer）

| 字段名 | 字段标识 | 类型 | 必填 | 验证规则 | 占位提示 |
|--------|----------|------|------|----------|----------|
| 咨询类型 | `consult_type` | 单选 | 是 | 枚举值校验 | 免费试用 / 预约演示 / 企业咨询 / 其他 |
| 公司名称 | `company_name` | 文本 | 是 | 2-100 字符 | 请输入公司名称 |
| 您的姓名 | `contact_name` | 文本 | 是 | 2-50 字符 | 请输入您的姓名 |
| 职位 | `job_title` | 文本 | 否 | 0-100 字符 | 如：市场总监、品牌经理 |
| 邮箱 | `email` | 邮箱 | 是 | 标准邮箱格式 | name@company.com |
| 手机号码 | `phone` | 手机号 | 是 | 11 位手机号 | 138xxxx8888 |
| 品牌名称 | `brand_name` | 文本 | 否 | 0-100 字符 | 您想监测的品牌名称 |
| 行业 | `industry` | 下拉 | 否 | 枚举值 | 互联网 / 消费品 / 金融 / 制造 / 其他 |
| 需求描述 | `description` | 文本区 | 否 | 0-500 字符 | 简单描述您的需求或想了解的内容 |
| 来源渠道 | `utm_source` | 隐藏 | - | 自动填充 | URL 参数自动采集 |
| 来源媒介 | `utm_medium` | 隐藏 | - | 自动填充 | URL 参数自动采集 |
| 来源活动 | `utm_campaign` | 隐藏 | - | 自动填充 | URL 参数自动采集 |
| 页面路径 | `page_path` | 隐藏 | - | 自动填充 | 当前页面 URL |

#### 4.2.2 简化版表单（退出弹窗）

| 字段名 | 类型 | 必填 | 占位提示 |
|--------|------|------|----------|
| 公司名称 | 文本 | 是 | 请输入公司名称 |
| 您的姓名 | 文本 | 是 | 请输入您的姓名 |
| 手机号码 | 手机号 | 是 | 138xxxx8888 |

#### 4.2.3 表单交互细节

| 交互 | 实现 |
|------|------|
| 实时验证 | 输入时验证格式，错误时字段下方红色提示 |
| 提交防重复 | 提交后按钮置灰 + loading 状态，5 秒内不可重复提交 |
| 成功反馈 | 提交成功后显示确认页面 + 预计回复时间 + 企业微信二维码 |
| 失败反馈 | 网络错误时提示"请稍后重试"，保留已填写内容 |
| 数据持久化 | 未提交的表单内容自动保存到 localStorage，刷新不丢失 |
| 隐私声明 | 表单下方显示"提交即表示同意隐私政策"链接 |

### 4.3 数据存储方案

#### 4.3.1 推荐方案: 飞书多维表格 + 后端数据库双写

**架构:**

```
用户提交表单
    │
    ▼
前端表单验证
    │
    ▼
GEO 后端 API (/api/v1/consultations)
    │
    ├──────► PostgreSQL 数据库 (主存储)
    │         consultations 表
    │
    └──────► 飞书多维表格 (同步写入)
              销售团队直接在飞书查看/跟进
```

**为什么双写:**
- PostgreSQL: 作为主数据存储，支持复杂查询、数据关联、统计分析
- 飞书多维表格: 销售团队无需登录后台即可查看和跟进，降低协作成本

#### 4.3.2 PostgreSQL 数据库表设计

```sql
CREATE TABLE consultations (
    id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    consult_type    VARCHAR(20) NOT NULL,     -- 'trial' / 'demo' / 'enterprise' / 'other'
    company_name    VARCHAR(100) NOT NULL,
    contact_name    VARCHAR(50) NOT NULL,
    job_title       VARCHAR(100),
    email           VARCHAR(255) NOT NULL,
    phone           VARCHAR(20) NOT NULL,
    brand_name      VARCHAR(100),
    industry        VARCHAR(50),
    description     TEXT,
    utm_source      VARCHAR(100),
    utm_medium      VARCHAR(100),
    utm_campaign    VARCHAR(100),
    page_path       VARCHAR(500),
    status          VARCHAR(20) DEFAULT 'pending',  -- 'pending' / 'contacted' / 'qualified' / 'closed'
    assigned_to     UUID REFERENCES users(id),
    created_at      TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at      TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE INDEX idx_consultations_status ON consultations(status);
CREATE INDEX idx_consultations_created_at ON consultations(created_at);
CREATE INDEX idx_consultations_email ON consultations(email);
```

#### 4.3.3 飞书多维表格配置

| 配置项 | 说明 |
|--------|------|
| 多维表格名称 | GEO 平台 - 客户咨询 |
| 字段映射 | 与数据库字段一一对应 |
| 视图 | 默认视图：按创建时间倒序；待跟进视图：status = pending；已跟进视图：status = contacted |
| 自动化 | 新增记录时触发通知（见 4.4） |
| 权限 | 销售团队可编辑；产品团队只读 |

**飞书多维表格字段设计:**

| 字段名 | 类型 | 说明 |
|--------|------|------|
| 咨询类型 | 单选 | 免费试用 / 预约演示 / 企业咨询 / 其他 |
| 公司名称 | 文本 | |
| 联系人 | 文本 | |
| 职位 | 文本 | |
| 邮箱 | 文本 | |
| 手机 | 文本 | |
| 品牌名称 | 文本 | |
| 行业 | 单选 | |
| 需求描述 | 文本 | |
| 来源 | 文本 | UTM 信息组合 |
| 状态 | 单选 | 待跟进 / 已联系 / 已合格 / 已关闭 |
| 负责人 | 人员 | 飞书用户 |
| 创建时间 | 创建时间 | 自动 |
| 跟进记录 | 文本 | 销售手动填写 |

### 4.4 自动通知机制

#### 4.4.1 通知架构

```
用户提交咨询
    │
    ▼
后端 API 处理
    │
    ├──────► 写入数据库
    │
    ├──────► 写入飞书多维表格
    │
    ├──────► 触发飞书机器人通知
    │         ├─ 销售群组通知（群消息）
    │         └─ 负责人私聊通知
    │
    ├──────► 触发邮件通知
    │         └─ 销售团队邮箱组
    │
    └──────► 触发用户确认邮件
              └─ 自动回复：已收到咨询，预计 24 小时内联系
```

#### 4.4.2 飞书通知详情

**群组通知（飞书机器人 Webhook）:**

```
[GEO 平台] 新客户咨询

咨询类型: 预约产品演示
公司名称: XX 科技有限公司
联系人: 张明
职位: 市场总监
手机: 138xxxx8888
邮箱: zhangming@xx.com
品牌名称: XX科技
行业: 互联网
需求描述: 想了解 GEO 平台的企业版功能

来源渠道: 百度搜索 / organic
提交时间: 2026-05-19 14:30:00

[查看详情] [分配给我] [标记已联系]
```

**通知规则:**

| 规则 | 条件 | 动作 |
|------|------|------|
| 即时通知 | 每条新咨询 | 飞书群消息 + 邮件 |
| 超时提醒 | 咨询 > 2 小时未跟进 | 飞书群 @销售负责人 |
| 每日汇总 | 每天 9:00 | 飞书群发送前一日咨询汇总 |
| 高价值标记 | 企业咨询类型 | 飞书群 @全体销售 + 高亮标记 |

#### 4.4.3 用户自动回复邮件

**邮件模板:**

```
主题: 已收到您的咨询 - GEO 平台

您好，{contact_name}：

感谢您对 GEO 平台的关注！我们已收到您的咨询，销售团队将在 24 小时内与您联系。

在等待期间，您可以：
- 了解 GEO 平台核心功能: {features_url}
- 阅读《什么是 GEO？AI 搜索时代的品牌优化指南》: {blog_url}
- 添加企业微信，获取更快响应: {wechat_url}

如有紧急需求，请拨打: 400-xxx-xxxx

GEO 平台团队
```

#### 4.4.4 飞书多维表格自动化

| 自动化规则 | 触发条件 | 动作 |
|------------|----------|------|
| 新增通知 | 新记录创建 | 发送飞书群消息 |
| 超时预警 | 创建后 2 小时 status 仍为 pending | 发送飞书群提醒 |
| 状态变更 | status 字段变更 | 记录变更日志 |
| 每日汇总 | 每天 9:00 | 汇总前一日数据到群消息 |

---

## 五、技术架构建议

### 5.1 技术选型

| 层级 | 技术 | 理由 |
|------|------|------|
| **框架** | Next.js 14 (App Router) | 与 GEO 平台前端统一技术栈；SSR/SSG 支持 SEO |
| **样式** | Tailwind CSS 4 | 与 GEO 平台前端统一；原子化 CSS，性能好 |
| **动画** | GSAP + ScrollTrigger | 视差滚动最佳方案（见 3.1 分析） |
| **UI 组件** | shadcn/ui + Radix | 与 GEO 平台前端统一；可访问性好 |
| **表单** | React Hook Form + Zod | 类型安全、验证完善 |
| **部署** | Vercel | Next.js 原生支持；全球 CDN；自动 HTTPS |
| **分析** | Vercel Analytics + 百度统计 | 用户行为分析 + 国内 SEO |
| **CMS** | Next.js MDX | 博客内容使用 MDX，开发者友好 |

### 5.2 性能优化策略

| 策略 | 具体实施 |
|------|----------|
| **图片优化** | 使用 Next.js Image 组件，自动 WebP/AVIF 转换，懒加载 |
| **代码分割** | GSAP 按需加载，仅在使用视差滚动的页面加载 ScrollTrigger |
| **字体优化** | `next/font` 自动优化，preload 关键字体 |
| **动画降级** | 检测 `prefers-reduced-motion`，为需要的用户关闭动画 |
| **移动端优化** | 移动端简化视差效果，减少 GPU 负担 |
| **缓存策略** | 静态页面 ISR，动态页面 SWR |

### 5.3 项目结构建议

```
geo-site/
├── app/
│   ├── layout.tsx            # 全局 Layout
│   ├── page.tsx              # 首页
│   ├── features/
│   │   └── page.tsx          # 功能页
│   ├── pricing/
│   │   └── page.tsx          # 定价页
│   ├── blog/
│   │   ├── page.tsx          # 博客列表
│   │   └── [slug]/
│   │       └── page.tsx      # 博客详情
│   ├── about/
│   │   └── page.tsx          # 关于我们
│   └── api/
│       └── consultations/
│           └── route.ts      # 咨询表单 API
├── components/
│   ├── layout/               # 导航、页脚
│   ├── sections/             # 首页各模块组件
│   ├── animations/           # GSAP 动画组件
│   ├── forms/                # 咨询表单组件
│   └── ui/                   # 通用 UI 组件
├── lib/
│   ├── animations.ts         # GSAP 动画配置
│   ├── feishu.ts             # 飞书 API 集成
│   └── seo.ts                # SEO 工具函数
├── content/
│   └── blog/                 # MDX 博客内容
└── public/
    ├── images/               # 图片资源
    └── fonts/                # 字体文件
```

---

## 六、实施路线图

### 6.1 分阶段实施

| 阶段 | 时间 | 交付物 | 优先级 |
|------|------|--------|--------|
| **Phase 1: 核心上线** | 第 1-3 周 | 首页 + 咨询表单 + 基础动效 | P0 |
| **Phase 2: 功能完善** | 第 4-5 周 | 功能页 + 定价页 + 完整视差动效 | P1 |
| **Phase 3: 内容生态** | 第 6-8 周 | 博客系统 + 首发 5 篇文章 + SEO 优化 | P1 |
| **Phase 4: 优化迭代** | 第 9-10 周 | 关于页 + 性能优化 + A/B 测试 | P2 |

### 6.2 Phase 1 详细任务

| 任务 | 预估工时 | 依赖 |
|------|----------|------|
| 项目初始化（Next.js + Tailwind + GSAP） | 4h | - |
| 全局 Layout（导航 + 页脚） | 8h | 项目初始化 |
| 首页 Hero 区域 + 视差动效 | 12h | 全局 Layout |
| 时代变革模块 | 6h | Hero |
| 核心功能展示模块（粘性滚动） | 16h | Hero |
| 工作原理模块（横向时间线） | 8h | 核心功能 |
| 竞品对比场景模块 | 8h | 核心功能 |
| 客户证言模块 | 4h | - |
| 定价预览模块 | 4h | - |
| FAQ 模块 | 4h | - |
| 最终 CTA 模块 | 2h | - |
| 咨询表单组件 | 8h | - |
| 咨询表单 API + 飞书集成 | 12h | 咨询表单组件 |
| 自动通知机制 | 8h | 飞书集成 |
| SEO 基础配置 | 4h | - |
| 响应式适配 | 8h | 所有模块 |
| 性能优化 + 测试 | 8h | 所有模块 |
| **合计** | **~120h** | |

### 6.3 验收标准

| 维度 | 标准 |
|------|------|
| **功能** | 所有页面可正常访问，咨询表单可提交并写入数据库 + 飞书 |
| **动效** | 首页视差滚动流畅，FPS > 30；移动端动效降级正常 |
| **性能** | Lighthouse 性能评分 > 90；LCP < 2.5s |
| **SEO** | 所有页面有正确的 title/description/Schema；sitemap 可访问 |
| **兼容** | Chrome/Safari/Firefox 最新 2 版本正常；iOS/Android 主流设备正常 |
| **安全** | 表单有防刷机制（rate limit）；敏感信息不暴露在前端 |

---

*文档版本: v1.0 | 创建日期: 2026-05-19 | 状态: 待评审*
