SOLO 集成 Stripe 支付，助力你的 AI 应用变现
Role
你是一位拥有10年经验的高级前端工程师，擅长像素级还原 UI 设计。请使用 React (Next.js)、Tailwind CSS 和 Lucide React 图标库，复刻所描述的网页。
页面视觉结构描述
该页面是一个典型的 SaaS 产品着陆页，风格现代、简洁、具有科技感。主要由三部分组成：
1. 顶部导航栏 (Navbar)
- 布局：固定在顶部，白色背景，高度约 64px-80px，底部有轻微阴影 (shadow-sm)。使用 Flexbox 布局，两端对齐。
- 左侧 (Logo区)：
- 图标：使用一个类似地图或书本的蓝色图标 (Map 或 BookOpen)。
- 文字："AI旅游规划"，深灰色或黑色，加粗，字号适中。
- 中间 (菜单区)：
- 包含四个链接："首页" (高亮/蓝色背景块), "AI规划", "我的行程", "用户中心"。
- 每个链接前都有一个小图标。
- 间距适中，鼠标悬停时有轻微的灰色背景反馈。
- 右侧 (用户区)：
- 会员徽章：一个胶囊状按钮，背景色为明亮的金黄色 (bg-yellow-400)，文字为白色 "黄金会员"，带有一个星星图标。
- 用户名：灰色文本 "berylmiao"，带有一个简单的用户头像图标。
- 操作：灰色文本链接 "退出"。
2. Hero 区域 (首屏海报)
- 背景：一张宽屏的风景图（请使用
https://images.unsplash.com/photo-1483729558449-99ef09a8c325?q=80&w=2000作为占位图）。 - 关键视觉处理 (Overlay)：在图片上方必须叠加一层 蓝紫色渐变遮罩 (从 blue-600 到 purple-600，opacity 约为 70%-80%)，确保背景变暗偏蓝，使白色文字清晰可见。
- 内容布局：垂直居中，水平居中。
- 文字内容：
- H1 标题："AI旅游规划助手"，白色，极大字号 (text-5xl)，加粗，字间距微调。
- 副标题："让AI为您规划完美旅程，从想法到行程，只需几分钟"，白色，中号字号 (text-lg)，透明度 90%。
- CTA 按钮：
- 位于文字下方。
- 样式：纯白色背景，蓝色文字 (text-blue-600)。
- 形状：圆角矩形，内边距宽敞。
- 内容：左侧有一个对话气泡图标 (MessageSquare)，文字为 "开始规划旅程"。
3. 特性介绍区 (底部)
- 背景：纯白。
- 布局：文本居中。
- 内容：
- 标题："为什么选择AI旅游规划？"，深色 (gray-900)，大字号 (text-3xl)，加粗。
- 描述："体验前所未有的智能旅游规划服务，让每一次旅行都成为完美回忆"，灰色 (gray-500)，及有适度的 margin-top。
技术要求
- 使用
<nav>,<header>,<section>等语义化标签。 - 使用 Tailwind 的
flex,justify-between,items-center,absolute,z-index,overlay等类名。 - 确保响应式设计（移动端适配）。
- 代码必须完整，可以直接运行。
请开始编写代码。
设计并开发一个功能完整、高性能的AI旅游规划助手网站，该平台应整合先进的人工智能技术与旅游服务资源，为用户提供端到端的个性化旅行规划解决方案。具体要求如下：
核心功能模块开发：
-
智能旅游路线规划系统：基于用户输入的出发地、目的地、旅行天数、交通偏好等参数，自动生成最优行程路线
-
目的地智能推荐引擎：根据用户历史偏好、季节因素、热门趋势及预算范围，推荐匹配的旅行目的地
-
行程安排自动生成器：提供可编辑的详细日程表，包含每日景点安排、餐饮推荐、活动建议及时长分配
-
景点信息查询数据库：整合景点详细介绍、开放时间、门票价格、用户评价及实时人流数据
-
住宿与交通智能建议系统：根据行程、预算和偏好，推荐最佳住宿选项和交通组合方案
AI技术集成要求：
-
深度整合DeepSeek AI算法，实现自然语言交互界面，支持语音和文本输入
-
开发用户偏好分析模型，基于用户历史数据、明确需求及隐含偏好生成个性化方案
-
构建动态调整机制，允许用户通过简单反馈实时优化推荐结果
用户系统与权限管理：
-
实现安全的用户注册/登录系统，支持多种登录方式及完善的密码找回机制
-
开发个人旅行计划管理中心，支持创建、编辑、删除多个旅行方案
-
设计方案保存与多渠道分享功能（链接分享、社交媒体集成、PDF导出）
-
构建分级会员系统：免费用户每月可生成1次完整旅行方案；付费用户根据套餐享受无限次生成、高级定制及优先服务等特权
技术架构规范：
-
采用前后端分离架构，前端使用React/Vue等现代框架实现组件化开发
-
确保响应式设计兼容桌面端、平板及移动端设备，实现一致的用户体验
-
后端采用Node.js/Python等高效技术栈，构建RESTful API接口
-
设计高效的数据处理流程，优化AI模型调用性能，确保响应时间<3秒
-
实现数据库分片与缓存策略，提升高并发场景下的系统稳定性
安全与性能要求：
-
实施严格的数据安全措施，加密存储用户个人信息及支付数据
-
遵循GDPR等隐私保护标准，明确用户数据使用范围与期限
-
进行全面的性能优化，包括代码分割、资源压缩、懒加载等技术
-
设计负载均衡与自动扩容机制，确保系统在旅游高峰期仍能稳定运行
-
建立完善的监控告警系统，实时监测系统性能与异常情况
测试与交付标准：
-
开发全流程自动化测试（单元测试、集成测试、E2E测试），核心功能测试覆盖率>95%
-
进行多场景压力测试，验证系统在1000+并发用户下的稳定性
-
提供完整的技术文档、用户手册及维护指南
-
部署灰度发布机制，确保系统更新平滑过渡
该网站应定位为一站式旅游规划平台，通过智能化技术简化旅行规划流程，为用户提供真正个性化、高效率的旅行解决方案。
设计并开发一个功能完整、高性能的AI旅游规划助手网站，该平台应整合先进的人工智能技术与旅游服务资源，为用户提供端到端的个性化旅行规划解决方案。具体要求如下：
核心功能模块开发：
-
智能旅游路线规划系统：基于用户输入的出发地、目的地、旅行天数、交通偏好等参数，自动生成最优行程路线
-
目的地智能推荐引擎：根据用户历史偏好、季节因素、热门趋势及预算范围，推荐匹配的旅行目的地
-
行程安排自动生成器：提供可编辑的详细日程表，包含每日景点安排、餐饮推荐、活动建议及时长分配
-
景点信息查询数据库：整合景点详细介绍、开放时间、门票价格、用户评价及实时人流数据
-
住宿与交通智能建议系统：根据行程、预算和偏好，推荐最佳住宿选项和交通组合方案
AI技术集成要求：
-
深度整合DeepSeek AI算法，实现自然语言交互界面，支持语音和文本输入
-
开发用户偏好分析模型，基于用户历史数据、明确需求及隐含偏好生成个性化方案
-
构建动态调整机制，允许用户通过简单反馈实时优化推荐结果
用户系统与权限管理：
-
实现安全的用户注册/登录系统，支持多种登录方式及完善的密码找回机制
-
开发个人旅行计划管理中心，支持创建、编辑、删除多个旅行方案
-
设计方案保存与多渠道分享功能（链接分享、社交媒体集成、PDF导出）
-
构建分级会员系统：免费用户每月可生成1次完整旅行方案；付费用户根据套餐享受无限次生成、高级定制及优先服务等特权
技术架构规范：
-
采用前后端分离架构，前端使用React/Vue等现代框架实现组件化开发
-
确保响应式设计兼容桌面端、平板及移动端设备，实现一致的用户体验
-
后端采用Node.js/Python等高效技术栈，构建RESTful API接口
-
设计高效的数据处理流程，优化AI模型调用性能，确保响应时间<3秒
-
实现数据库分片与缓存策略，提升高并发场景下的系统稳定性
安全与性能要求：
-
实施严格的数据安全措施，加密存储用户个人信息及支付数据
-
遵循GDPR等隐私保护标准，明确用户数据使用范围与期限
-
进行全面的性能优化，包括代码分割、资源压缩、懒加载等技术
-
设计负载均衡与自动扩容机制，确保系统在旅游高峰期仍能稳定运行
-
建立完善的监控告警系统，实时监测系统性能与异常情况
测试与交付标准：
-
开发全流程自动化测试（单元测试、集成测试、E2E测试），核心功能测试覆盖率>95%
-
进行多场景压力测试，验证系统在1000+并发用户下的稳定性
-
提供完整的技术文档、用户手册及维护指南
-
部署灰度发布机制，确保系统更新平滑过渡
该网站应定位为一站式旅游规划平台，通过智能化技术简化旅行规划流程，为用户提供真正个性化、高效率的旅行解决方案。
