需求描述

項目概述：
該項目的目標是開發(fā)一個僅包含前端的Web應用程序，模仿Crunchbase的布局(https://www.crunchbase.com/)。該Web應用程序將包含以下頁面：

1.登錄/注冊頁面
2.主頁
3.公司信息頁面
4. 賬戶設置頁面
5. 浮動客服功能
所有后端交互將在本項目中使用模擬數(shù)據(jù)。用戶應能夠無縫地在頁面之間導航，頁面設計要簡潔、響應迅速，類似于提供的截圖。

1. 登錄/注冊頁面
目的：
允許用戶登錄或注冊。
主要功能：
簡單的登錄表單（電子郵件，密碼）。
注冊選項，包括電子郵件和密碼輸入。
提供兩個社交登錄按鈕（Google 和 LinkedIn）。
忘記密碼的鏈接。
選項允許用戶使用單點登錄或發(fā)送登錄鏈接。

2. 主頁
目的：
登錄后的頁面，顯示最近的活動和關鍵統(tǒng)計數(shù)據(jù)給用戶。
主要功能：
顯示推薦內(nèi)容（例如公司或聯(lián)系人）。
顯示最近的活動，例如融資輪次和并購記錄。
顯示熱門的公司檔案和特色搜索。
上方顯示搜索框允許用戶探索和搜索公司。
界面布局清晰有序，類似于Crunchbase。

3. 公司信息頁面
目的：
通過不同的分類標簽為用戶提供公司的詳細信息。
主要功能：
頁面頂部有多個選項卡，如“概要”，“財務信息”，“人員”，“技術”等。
財務選項卡中展示融資輪次、領投投資、退出情況及總融資金額（使用模擬數(shù)據(jù)）。
提供額外的公司亮點信息，如股票代碼、投資數(shù)量和融資輪次。
用戶可以通過按鈕將公司檔案連接到CRM或保存公司信息。
UI參考：
設計基于 company profile.png，重點關注選項卡式導航和詳細的公司信息。

4. 賬戶設置頁面
目的：
允許用戶修改個人信息、連接社交賬戶以及管理電子郵件通知。
主要功能：
可編輯的字段，包括名字、姓氏、電子郵件及上傳頭像的選項。
提供按鈕更改密碼和驗證電子郵件。
連接社交賬戶的部分（Google，LinkedIn）。
提供電子郵件通知開關。
驗證公司的選項。
UI參考：
按照 Account setting.png 的布局和結構進行設計。

5. 浮動客服功能
目的：
提供用戶與客服溝通的實時對話功能。
主要功能：
在頁面右下角設計一個浮動客服圖標，用戶可以點擊圖標打開對話框與客服進行對話。
對話框應保持簡潔，并允許用戶輸入問題。
將用戶的輸入通過模擬數(shù)據(jù)發(fā)送到后臺，后臺返回模擬回復內(nèi)容。
用戶關閉對話框前，保留之前的聊天內(nèi)容。
客服對話框應支持展開、最小化和關閉功能。
當用戶再次打開對話框時，未關閉前的聊天記錄應被保留。
UI參考：
設計類似于常見網(wǎng)站的在線客服浮動圖標和對話框界面，客服對話框可參考主流網(wǎng)站的設計風格。

技術要求：
框架： 首選React，但對其他建議持開放態(tài)度。
樣式： 使用現(xiàn)代CSS框架（如Tailwind CSS，Bootstrap）或自定義CSS，確保響應式設計。
狀態(tài)管理： 可以使用React的 useState 和 useEffect 進行簡單的狀態(tài)管理，如果有需要，也可以整合狀態(tài)管理庫如Redux。
路由： 使用React Router（或類似工具）實現(xiàn)登錄頁面、主頁、公司信息頁面和賬戶設置頁面之間的導航。
模擬數(shù)據(jù)： 暫時使用硬編碼的數(shù)據(jù)或從JSON文件中獲取數(shù)據(jù)，模擬后端交互。
響應式設計： 確保設計適用于不同尺寸的屏幕，尤其是移動端和桌面端。
客服對話框交互： 模擬客服消息的收發(fā)過程，使用硬編碼數(shù)據(jù)或JSON模擬后臺返回信息。
界面顯示語言：英文優(yōu)先（可仿照crunchbase），中文也可
交付內(nèi)容：
1. 完全功能性的前端Web應用程序，包含以上描述的頁面和客服對話功能。
2. 代碼文檔齊全，并附有README文件，提供如何在本地運行項目的說明。
4. 所有頁面的響應式設計。
5. 使用模擬數(shù)據(jù)處理用戶交互（如查看公司詳細信息，修改賬戶信息等）。
6. 客服對話框的完整功能實現(xiàn)。
7. 咨詢與講解幫助甲方理解代碼。
項目時間表：
請?zhí)峁┟總€階段的預估時間表（例如設計、開發(fā)和測試）。