skillhub/web/PREVIEW.md

落地页预览说明

如何查看

1. 启动开发服务器：

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 加载