# 落地页预览说明

## 如何查看

1. 启动开发服务器：
```bash
cd web
npm run dev
```

2. 访问 `http://localhost:5173`

## 页面特性

### 动态效果
- 背景粒子动画会自动运行
- 鼠标悬停在特性卡片上会有缩放和颜色变化
- 按钮有渐变和阴影效果
- 搜索栏有光晕效果

### 响应式设计
- 移动端：单列布局，较小字体
- 平板：2列特性卡片
- 桌面：3列特性卡片，大标题

### 交互元素
- "探索技能" 按钮 → 跳转到搜索页面
- "发布技能" 按钮 → 跳转到发布页面
- 搜索栏 → 输入后跳转到搜索结果
- 统计数字 → 悬停有渐变效果

## 与原首页的区别

| 特性 | 原首页 | 新落地页 |
|------|--------|----------|
| 主要内容 | 技能列表（热门/最新） | 产品介绍和特性展示 |
| 视觉风格 | 简洁卡片式 | 科技感渐变 + 粒子动画 |
| 配色 | 浅色为主 | 深色主题 + 霓虹色 |
| 目标 | 快速浏览技能 | 吸引新用户了解产品 |
| 路由 | `/` | `/`（新），原首页移至 `/skills` |

## 设计亮点

1. **粒子连接动画**：80个粒子节点，距离小于120px时自动连线，透明度随距离变化
2. **渐变文字**：标题使用 cyan → blue → violet 三色渐变
3. **光晕效果**：搜索栏和背景有模糊的光晕装饰
4. **分层动画**：不同元素有不同的延迟时间，形成层次感
5. **悬浮交互**：卡片悬停时会上浮并显示边框高亮

## 技术细节

- 粒子系统使用 Canvas 2D API
- 动画使用 CSS animations 和 transitions
- 响应式使用 Tailwind 的 breakpoint 系统
- 字体通过 Google Fonts CDN 加载