dreamweaver/.claude/specs/design/LANDING-PAGE-REFACTOR-SPEC.md

# DreamWeaver 落地页重构规范文档

## 1. 项目概述

### 1.1 目标
将当前简单的 Home.vue 落地页重构为专业级 SaaS 产品落地页，提升品牌形象和用户转化率。

### 1.2 当前状态
- 文件位置: `frontend/src/views/Home.vue`
- 问题: 页面结构单一，仅有一个故事生成表单，缺少产品介绍、功能展示、用户信任背书等专业落地页必备元素

### 1.3 技术栈
- Vue 3 + Composition API + TypeScript
- Tailwind CSS
- vue-i18n 国际化
- @heroicons/vue/24/outline 图标库
- 现有 UI 组件: BaseButton, BaseCard, BaseInput, BaseSelect, BaseTextarea

---

## 2. 页面结构规范

页面从上到下包含 8 个主要区块（Section），每个区块独立且可复用。

### 2.1 Hero Section（主视觉区）

**布局**: 两栏布局，左 60% 右 40%，移动端堆叠

**左侧内容**:
```
- 主标题: 使用 gradient-text 样式
  - 第一行: "为孩子编织" (普通渐变)
  - 第二行: "专属的童话梦境" (加粗强调)
- 副标题: 灰色次要文字，说明产品价值
- CTA 按钮组:
  - 主按钮: "开始创作" (btn-magic 样式，点击打开创作模态框)
  - 次按钮: "了解更多" (outline 样式，滚动到 Features 区块)
```

**右侧内容**:
```
- 故事卡片预览 (模拟产品效果)
  - 卡片使用 glass 样式 + 阴影
  - 顶部: 模拟封面图区域 (渐变色块 + 星星图标)
  - 标题: "小兔子的勇气冒险"
  - 内容预览: 故事开头文字 (截断显示)
  - 底部: 模拟的播放按钮和图片生成按钮图标
  - 添加浮动动画 (animate-float)
```

**背景装饰**:
```
- 左上角: 浮动星星 SVG (absolute, opacity-20)
- 右下角: 浮动云朵 SVG (absolute, opacity-15)
- 使用 CSS animation 实现缓慢浮动效果
```

**i18n 键**:
- `home.heroTitle`, `home.heroTitleHighlight`
- `home.heroSubtitle`
- `home.heroCta`, `home.heroCtaSecondary`
- `home.heroPreviewTitle`, `home.heroPreviewText`

---

### 2.2 Trust Bar（信任背书区）

**布局**: 水平三等分，居中对齐

**内容**:
```
| 10,000+ 故事已创作 | 5,000+ 家庭信赖 | 98% 满意度 |
```

**样式**:
```
- 背景: 浅紫色渐变 (from-purple-50 to-pink-50)
- 数字: 大号加粗，渐变色
- 文字: 灰色小号
- 分隔: 使用竖线或间距分隔
```

**交互**:
```
- 数字使用计数动画 (从 0 递增到目标值)
- 使用 IntersectionObserver 触发动画
- 动画时长: 2 秒，使用 easeOutQuart 缓动
```

**实现要点**:
```typescript
// 计数动画函数
function animateCount(target: number, duration: number, callback: (value: number) => void) {
  const start = performance.now()
  const step = (timestamp: number) => {
    const progress = Math.min((timestamp - start) / duration, 1)
    const eased = 1 - Math.pow(1 - progress, 4) // easeOutQuart
    callback(Math.floor(eased * target))
    if (progress < 1) requestAnimationFrame(step)
  }
  requestAnimationFrame(step)
}
```

**i18n 键**:
- `home.trustStoriesCreated`, `home.trustFamilies`, `home.trustSatisfaction`

---

### 2.3 Features Section（功能特性区）

**布局**: 标题 + 副标题 + 6 卡片网格 (3x2，移动端 1 列)

**标题区**:
```
- 主标题: "为什么选择梦语织机"
- 副标题: "我们用 AI 技术和教育理念，为每个孩子打造独一无二的成长故事"
```

**6 个功能卡片**:

| # | 图标 | 标题 | 描述 |
|---|------|------|------|
| 1 | SparklesIcon | AI 智能创作 | 输入几个关键词，AI 即刻为您的孩子创作一个充满想象力的原创故事 |
| 2 | UserIcon | 个性化记忆 | 系统记住孩子的喜好和成长轨迹，故事越来越懂 TA |
| 3 | PhotoIcon | 精美 AI 插画 | 为每个故事自动生成独特的精美封面插画，让故事更加生动 |
| 4 | SpeakerWaveIcon | 温暖语音朗读 | 专业级 AI 配音，温暖的声音陪伴孩子进入甜美梦乡 |
| 5 | AcademicCapIcon | 教育主题融入 | 勇气、友谊、分享、诚实...在故事中自然传递正向价值观 |
| 6 | GlobeAltIcon | 故事宇宙 | 创建专属世界观，让喜爱的角色在不同故事中持续冒险 |

**卡片样式**:
```
- 使用 BaseCard 组件，添加 hover 效果
- 图标: 48x48，紫色渐变背景圆形容器
- 标题: font-bold text-gray-800
- 描述: text-gray-600 text-sm
- hover: 上移 + 阴影增强
```

**滚动动画**:
```
- 使用 IntersectionObserver
- 卡片依次渐入 (stagger 100ms)
- 动画: opacity 0->1, translateY 20px->0
```

**i18n 键**:
- `home.featuresTitle`, `home.featuresSubtitle`
- `home.feature1Title` ~ `home.feature6Title`
- `home.feature1Desc` ~ `home.feature6Desc`

---

### 2.4 How It Works Section（使用流程区）

**布局**: 标题 + 4 步骤水平排列（移动端垂直）

**步骤内容**:

| 步骤 | 图标 | 标题 | 描述 |
|------|------|------|------|
| 1 | LightBulbIcon | 输入灵感 | 输入关键词、角色或简单想法 |
| 2 | CpuChipIcon | AI 创作 | AI 根据输入生成专属故事 |
| 3 | PaintBrushIcon | 丰富内容 | 自动生成精美插画和语音 |
| 4 | ShareIcon | 分享故事 | 保存收藏，随时为孩子讲述 |

**样式**:
```
- 步骤编号: 圆形渐变背景，白色数字
- 步骤之间: 虚线连接 (桌面端水平，移动端垂直)
- 图标: 在编号下方，较大尺寸
- 文字: 居中对齐
```

**连接线实现**:
```css
/* 桌面端水平连接线 */
.step-connector {
  position: absolute;
  top: 24px;
  left: 100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #c084fc, #f472b6);
  opacity: 0.3;
}

/* 移动端隐藏水平线，显示垂直线 */
@media (max-width: 768px) {
  .step-connector { display: none; }
  .step-connector-vertical { display: block; }
}
```

**i18n 键**:
- `home.howItWorksTitle`, `home.howItWorksSubtitle`
- `home.step1Title` ~ `home.step4Title`
- `home.step1Desc` ~ `home.step4Desc`

---

### 2.5 Product Showcase Section（产品展示区）

**布局**: 两栏，左侧功能列表，右侧模拟界面

**左侧内容**:
```
- 小标题: "专为家长设计"
- 大标题: "简单易用，功能强大"
- 功能列表 (带勾选图标):
  ✓ 直观的创作界面，几秒即可生成故事
  ✓ 多孩子档案管理，每个孩子独立记忆
  ✓ 故事历史永久保存，随时回顾美好时光
  ✓ 支持中英双语，培养语言能力
```

**右侧内容**:
```
- 模拟的产品界面截图 (CSS 绘制)
- 包含:
  - 模拟浏览器顶栏 (三个圆点)
  - 模拟导航栏
  - 模拟故事卡片列表
- 使用 glass 样式 + 阴影
- 轻微倾斜 (transform: perspective + rotateY)
```

**模拟界面 CSS**:
```css
.mock-browser {
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: perspective(1000px) rotateY(-5deg);
}

.mock-browser-bar {
  height: 32px;
  background: #f1f5f9;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mock-dot-red { background: #ef4444; }
.mock-dot-yellow { background: #eab308; }
.mock-dot-green { background: #22c55e; }
```

**i18n 键**:
- `home.showcaseTitle`, `home.showcaseSubtitle`
- `home.showcaseFeature1` ~ `home.showcaseFeature4`

---

### 2.6 Testimonials Section（用户评价区）

**布局**: 标题 + 3 评价卡片水平排列

**评价内容**:

| # | 评价 | 用户名 | 身份 |
|---|------|--------|------|
| 1 | "每晚睡前，女儿都要听一个新故事。梦语织机让我不再为编故事发愁，而且故事质量真的很高！" | 小雨妈妈 | 5岁女孩家长 |
| 2 | "最惊喜的是个性化功能，系统记住了儿子喜欢恐龙和太空，每个故事都能戳中他的兴趣点。" | 航航爸爸 | 6岁男孩家长 |
| 3 | "语音朗读功能太棒了！出差时也能远程给孩子讲故事，声音温暖自然，孩子很喜欢。" | 朵朵妈妈 | 4岁女孩家长 |

**卡片样式**:
```
- 背景: glass 样式
- 顶部: 引号图标 (大号，低透明度)
- 评价文字: 斜体，灰色
- 底部: 头像 + 用户名 + 身份
- 头像: 渐变色圆形 + 首字母
```

**头像生成**:
```typescript
// 根据名字生成渐变色头像
function getAvatarStyle(name: string) {
  const colors = [
    ['#667eea', '#764ba2'],
    ['#f093fb', '#f5576c'],
    ['#4facfe', '#00f2fe'],
  ]
  const index = name.charCodeAt(0) % colors.length
  return {
    background: `linear-gradient(135deg, ${colors[index][0]}, ${colors[index][1]})`,
  }
}
```

**i18n 键**:
- `home.testimonialsTitle`, `home.testimonialsSubtitle`
- `home.testimonial1Text` ~ `home.testimonial3Text`
- `home.testimonial1Name` ~ `home.testimonial3Name`
- `home.testimonial1Role` ~ `home.testimonial3Role`

---

### 2.7 FAQ Section（常见问题区）

**布局**: 标题 + 手风琴问答列表

**问答内容**:

| # | 问题 | 答案 |
|---|------|------|
| 1 | 梦语织机适合多大的孩子？ | 我们专为 3-8 岁儿童设计，故事内容、语言难度和教育主题都针对这个年龄段优化。 |
| 2 | 生成的故事安全吗？ | 绝对安全。所有故事都经过内容过滤，确保适合儿童阅读，传递积极正向的价值观。 |
| 3 | 可以自定义故事角色吗？ | 可以！您可以在孩子档案中设置喜好，或在创作时指定角色名称、特点，AI 会将其融入故事。 |
| 4 | 故事会重复吗？ | 不会。每个故事都是 AI 实时原创生成的，即使使用相同关键词，也会产生不同的故事。 |
| 5 | 支持哪些语言？ | 目前支持中文和英文，您可以随时切换界面语言，故事也会相应调整。 |

**手风琴实现**:
```typescript
const expandedFaq = ref<number | null>(null)

function toggleFaq(index: number) {
  expandedFaq.value = expandedFaq.value === index ? null : index
}
```

**样式**:
```
- 问题行: 可点击，右侧箭头图标
- 展开时: 箭头旋转 180°，答案滑入显示
- 使用 Transition 组件实现平滑动画
```

**i18n 键**:
- `home.faqTitle`
- `home.faq1Question` ~ `home.faq5Question`
- `home.faq1Answer` ~ `home.faq5Answer`

---

### 2.8 Final CTA Section（底部转化区）

**布局**: 居中，渐变背景

**内容**:
```
- 大标题: "准备好为孩子创造魔法了吗？"
- 副标题: "立即开始，让 AI 为您的孩子编织独一无二的成长故事"
- CTA 按钮: "免费开始创作" (大号，btn-magic)
- 小字: "无需信用卡，立即体验"
```

**背景**:
```css
.cta-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position: relative;
  overflow: hidden;
}

/* 装饰性圆形 */
.cta-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  top: -200px;
  right: -100px;
}
```

**i18n 键**:
- `home.ctaTitle`, `home.ctaSubtitle`
- `home.ctaButton`, `home.ctaNote`

---

## 3. 创作模态框规范

### 3.1 触发方式
- 点击 Hero 区 "开始创作" 按钮
- 点击 Final CTA 区按钮
- 已登录用户直接打开模态框
- 未登录用户跳转登录流程

### 3.2 模态框结构
```
- 遮罩层: 半透明黑色背景
- 模态框: 居中，最大宽度 600px
- 关闭按钮: 右上角 X 图标
- 内容: 复用原有表单逻辑
```

### 3.3 表单内容（保留原有逻辑）
```
1. 输入类型切换: 关键词创作 / 故事润色
2. 孩子档案选择 (可选)
3. 故事宇宙选择 (可选，依赖档案)
4. 输入区域 (关键词或故事文本)
5. 教育主题选择 (可选)
6. 提交按钮
```

### 3.4 状态管理
```typescript
const showCreateModal = ref(false)

function openCreateModal() {
  if (!userStore.user) {
    // 跳转登录
    return
  }
  showCreateModal.value = true
}
```

---

## 4. 动画规范

### 4.1 滚动渐入动画

**实现方式**: 使用 IntersectionObserver + CSS Transition

```typescript
// composables/useScrollAnimation.ts
export function useScrollAnimation() {
  const observedElements = ref<Set<Element>>(new Set())

  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-in')
            observer.unobserve(entry.target)
          }
        })
      },
      { threshold: 0.1 }
    )

    document.querySelectorAll('.scroll-animate').forEach((el) => {
      observer.observe(el)
    })
  })
}
```

**CSS**:
```css
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 延迟类 */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
```

### 4.2 浮动动画

```css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 5s ease-in-out infinite;
}
```

### 4.3 数字计数动画

见 2.2 节 Trust Bar 实现要点。

---

## 5. 响应式规范

### 5.1 断点定义
```
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
```

### 5.2 各区块响应式行为

| 区块 | 桌面端 | 平板端 | 移动端 |
|------|--------|--------|--------|
| Hero | 两栏 60/40 | 两栏 50/50 | 单栏堆叠 |
| Trust Bar | 水平三等分 | 水平三等分 | 垂直堆叠 |
| Features | 3x2 网格 | 2x3 网格 | 单列 |
| How It Works | 水平 4 步 | 水平 4 步 | 垂直 4 步 |
| Showcase | 两栏 | 两栏 | 单栏堆叠 |
| Testimonials | 水平 3 卡 | 水平 3 卡 | 单列滚动 |
| FAQ | 单列 | 单列 | 单列 |
| Final CTA | 居中 | 居中 | 居中 |

---

## 6. 暗色模式规范

### 6.1 颜色映射

| 元素 | 亮色模式 | 暗色模式 |
|------|----------|----------|
| 背景 | 渐变浅色 | 渐变深色 |
| 卡片背景 | rgba(255,255,255,0.7) | rgba(15,23,42,0.6) |
| 主文字 | gray-800 | gray-100 |
| 次文字 | gray-600 | gray-400 |
| 边框 | gray-200 | gray-700 |

### 6.2 实现方式
使用 Tailwind dark: 前缀，配合现有 .dark 类切换。

---

## 7. 验收标准

### 7.1 功能验收
- [ ] Hero 区正确显示，CTA 按钮可点击
- [ ] Trust Bar 数字动画正常触发
- [ ] Features 6 个卡片正确显示
- [ ] How It Works 4 步骤正确显示，连接线可见
- [ ] Product Showcase 模拟界面正确渲染
- [ ] Testimonials 3 个评价卡片正确显示
- [ ] FAQ 手风琴展开/收起正常
- [ ] Final CTA 按钮可点击
- [ ] 创作模态框正常打开/关闭
- [ ] 故事生成功能正常（保留原有逻辑）

### 7.2 样式验收
- [ ] 所有文案使用 i18n，中英文切换正常
- [ ] 响应式布局在 320px ~ 1920px 宽度下正常
- [ ] 暗色模式下所有元素可读
- [ ] 滚动动画流畅，无卡顿
- [ ] 所有图标正确显示

### 7.3 性能验收
- [ ] 首屏加载时间 < 3s
- [ ] Lighthouse Performance 分数 > 80
- [ ] 无控制台错误

---

## 8. 文件变更清单

| 文件 | 操作 | 说明 |
|------|------|------|
| `frontend/src/views/Home.vue` | 重写 | 完整重构落地页 |
| `frontend/src/locales/zh.json` | 已更新 | 新增落地页文案 |
| `frontend/src/locales/en.json` | 已更新 | 新增落地页文案 |
| `frontend/src/style.css` | 修改 | 新增动画和样式类 |
| `frontend/src/composables/useScrollAnimation.ts` | 新建 | 滚动动画 composable |

---

## 9. 依赖说明

### 9.1 现有依赖（无需新增）
- Vue 3
- vue-router
- vue-i18n
- Pinia
- Tailwind CSS
- @heroicons/vue

### 9.2 需要使用的图标
```typescript
import {
  SparklesIcon,
  UserIcon,
  PhotoIcon,
  SpeakerWaveIcon,
  AcademicCapIcon,
  GlobeAltIcon,
  LightBulbIcon,
  CpuChipIcon,
  PaintBrushIcon,
  ShareIcon,
  CheckIcon,
  ChevronDownIcon,
  XMarkIcon,
  ArrowRightIcon,
} from '@heroicons/vue/24/outline'
```

---

## 10. 实现顺序建议

1. **Phase 1**: 基础结构
   - 创建页面骨架（8 个 section）
   - 实现 Hero 区（不含动画）
   - 实现创作模态框

2. **Phase 2**: 内容区块
   - Trust Bar + 计数动画
   - Features 卡片
   - How It Works 步骤

3. **Phase 3**: 展示区块
   - Product Showcase
   - Testimonials
   - FAQ 手风琴

4. **Phase 4**: 收尾
   - Final CTA
   - 滚动动画
   - 响应式调整
   - 暗色模式适配

---

*文档版本: 1.0*
*创建时间: 2025-12-30*
*作者: Claude Code*