docs: add landing page preview guide

web/PREVIEW.md

@@ -0,0 +1,55 @@
+# 落地页预览说明
+
+## 如何查看
+
+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 加载