MindGuard 产品介绍网站

一个精美的产品介绍网站，用于展示 MindGuard 智能情绪管理应用的功能和特点。

网站风格

• 简洁优雅的设计
• 温暖的配色方案
• 响应式布局，适配各种设备
• 流畅的动画效果
• 清晰的内容结构

网站结构

website/
├── index.html      # 主页面
├── styles.css      # 样式文件
├── script.js       # 交互脚本
├── 1.png           # 产品截图 1
├── 2.png           # 产品截图 2
├── 3.png           # 产品截图 3
├── 4.png           # 产品截图 4
├── 5.png           # 产品截图 5
├── 6.png           # 产品截图 6
├── 7.png           # 产品截图 7
├── 8.png           # 产品截图 8
├── README.md       # 项目说明
└── deploy.md       # 部署指南

功能特点

1. 响应式设计：适配桌面端、平板和移动设备
2. 流畅动画：滚动动画、悬停效果、平滑过渡
3. 导航功能：固定导航栏、平滑滚动、响应式菜单
4. 内容展示：英雄区域、核心价值、功能介绍、产品截图、使用流程、下载区域等
5. 交互效果：按钮悬停、卡片动画、滚动监听

技术栈

• HTML5
• CSS3 (Flexbox, Grid, 响应式设计)
• JavaScript (ES6+)
• Font Awesome 图标
• Google Fonts 字体

本地预览

1. 克隆或下载项目到本地
2. 使用浏览器打开 index.html 文件
3. 查看网站效果

部署方式

1. GitHub Pages

详细部署指南请查看 deploy.md 文件。

2. 其他静态网站托管服务

• Netlify
• Vercel
• Cloudflare Pages
• AWS S3 + CloudFront

自定义修改

修改内容

1. 网站文字：编辑 index.html 文件中的文本内容
2. 样式：修改 styles.css 文件中的样式规则
3. 交互：调整 script.js 文件中的交互逻辑
4. 图片：替换 8 张产品截图（保持文件名不变）

修改颜色方案

在 styles.css 文件中，修改以下变量或颜色值：

• 主色调：#4299e1
• 辅助色：#667eea, #764ba2
• 背景色：#f8f9fa
• 文字颜色：#2d3748, #4a5568

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

性能优化

• 图片优化：压缩图片尺寸，使用适当的格式
• CSS 优化：使用精简的 CSS，避免不必要的样式
• JavaScript 优化：减少 DOM 操作，使用事件委托
• 懒加载：图片和资源的懒加载（可选）

许可证

MIT License

联系方式

• 邮箱：support@freemind.app
• 网站：https://www.freemind.app
• 社交媒体：@MindGuardApp