海外前端兼职程序员外包

需求描述

项目概述：
该项目的目标是开发一个仅包含前端的Web应用程序，模仿Crunchbase的布局(https://www.crunchbase.com/)。该Web应用程序将包含以下页面：

1.登录/注册页面
2.主页
3.公司信息页面
4. 账户设置页面
5. 浮动客服功能
所有后端交互将在本项目中使用模拟数据。用户应能够无缝地在页面之间导航，页面设计要简洁、响应迅速，类似于提供的截图。

1. 登录/注册页面
目的：
允许用户登录或注册。
主要功能：
简单的登录表单（电子邮件，密码）。
注册选项，包括电子邮件和密码输入。
提供两个社交登录按钮（Google 和 LinkedIn）。
忘记密码的链接。
选项允许用户使用单点登录或发送登录链接。

2. 主页
目的：
登录后的页面，显示最近的活动和关键统计数据给用户。
主要功能：
显示推荐内容（例如公司或联系人）。
显示最近的活动，例如融资轮次和并购记录。
显示热门的公司档案和特色搜索。
上方显示搜索框允许用户探索和搜索公司。
界面布局清晰有序，类似于Crunchbase。

3. 公司信息页面
目的：
通过不同的分类标签为用户提供公司的详细信息。
主要功能：
页面顶部有多个选项卡，如“概要”，“财务信息”，“人员”，“技术”等。
财务选项卡中展示融资轮次、领投投资、退出情况及总融资金额（使用模拟数据）。
提供额外的公司亮点信息，如股票代码、投资数量和融资轮次。
用户可以通过按钮将公司档案连接到CRM或保存公司信息。
UI参考：
设计基于 company profile.png，重点关注选项卡式导航和详细的公司信息。

4. 账户设置页面
目的：
允许用户修改个人信息、连接社交账户以及管理电子邮件通知。
主要功能：
可编辑的字段，包括名字、姓氏、电子邮件及上传头像的选项。
提供按钮更改密码和验证电子邮件。
连接社交账户的部分（Google，LinkedIn）。
提供电子邮件通知开关。
验证公司的选项。
UI参考：
按照 Account setting.png 的布局和结构进行设计。

5. 浮动客服功能
目的：
提供用户与客服沟通的实时对话功能。
主要功能：
在页面右下角设计一个浮动客服图标，用户可以点击图标打开对话框与客服进行对话。
对话框应保持简洁，并允许用户输入问题。
将用户的输入通过模拟数据发送到后台，后台返回模拟回复内容。
用户关闭对话框前，保留之前的聊天内容。
客服对话框应支持展开、最小化和关闭功能。
当用户再次打开对话框时，未关闭前的聊天记录应被保留。
UI参考：
设计类似于常见网站的在线客服浮动图标和对话框界面，客服对话框可参考主流网站的设计风格。

技术要求：
框架： 首选React，但对其他建议持开放态度。
样式： 使用现代CSS框架（如Tailwind CSS，Bootstrap）或自定义CSS，确保响应式设计。
状态管理： 可以使用React的 useState 和 useEffect 进行简单的状态管理，如果有需要，也可以整合状态管理库如Redux。
路由： 使用React Router（或类似工具）实现登录页面、主页、公司信息页面和账户设置页面之间的导航。
模拟数据： 暂时使用硬编码的数据或从JSON文件中获取数据，模拟后端交互。
响应式设计： 确保设计适用于不同尺寸的屏幕，尤其是移动端和桌面端。
客服对话框交互： 模拟客服消息的收发过程，使用硬编码数据或JSON模拟后台返回信息。
界面显示语言：英文优先（可仿照crunchbase），中文也可
交付内容：
1. 完全功能性的前端Web应用程序，包含以上描述的页面和客服对话功能。
2. 代码文档齐全，并附有README文件，提供如何在本地运行项目的说明。
4. 所有页面的响应式设计。
5. 使用模拟数据处理用户交互（如查看公司详细信息，修改账户信息等）。
6. 客服对话框的完整功能实现。
7. 咨询与讲解帮助甲方理解代码。
项目时间表：
请提供每个阶段的预估时间表（例如设计、开发和测试）。