feat:桌面端首页页面

src/component/Drawer/Drawer.css

@@ -0,0 +1,51 @@
+/* Drawer.css */
+.drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.drawer {
+    position: fixed;
+    top: 0;
+    left: -300px; /* 默认隐藏在左侧 */
+    width: 300px;
+    height: 100vh;
+    background: white;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: left 0.3s ease;
+}
+
+.drawer-open {
+    left: 0; /* 打开时显示 */
+}
+
+.drawer-content {
+    padding: 2rem;
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.drawer-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+/* 手机端样式 */
+@media (max-width: 768px) {
+    .drawer {
+        width: 80%; /* 手机端占满大部分屏幕 */
+        left: -80%;
+    }
+}

src/component/Drawer/Drawer.jsx

@@ -0,0 +1,19 @@
+const Drawer = ({isOpen, onClose, children}) => {
+    console.log(isOpen);
+    return (
+        <>
+            {/* 遮罩层 */}
+            {isOpen && <div className="drawer-overlay" onClick={onClose}/>}
+
+            {/* 抽屉导航 */}
+            <div className={`drawer ${isOpen ? 'drawer-open' : ''}`}>
+                <div className="drawer-content">
+                    <button className="drawer-close" onClick={onClose}>×</button>
+                    {children}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Drawer;

src/i18n/index.js

@@ -12,8 +12,8 @@ i18n
             en: {translation: en},
             zh: {translation: zh},
         },
-        lng: 'zh',               // 默认语言
-        fallbackLng: 'zh',       // 找不到翻译时使用的语言
+        lng: 'en',               // 默认语言
+        fallbackLng: 'en',       // 找不到翻译时使用的语言
         interpolation: {
             escapeValue: false,    // 防止 XSS（React 已经安全处理）
         },

src/i18n/locales/en.json

@@ -2,27 +2,33 @@
   "test": "Multilingual Testing",
   "home": "Home",
   "freeGo": "FreeGo",
-  "partner": "City Partner",
-  "news": "News & Updates",
   "aboutUs": "About Us",
   "contactUs": "Contact Us",
   "address": "Address: Building D, Tower 13, Jingxi AI Valley, Beijing",
   "email": "Email: info@zhengqiai.com",
-  "resumeEmail": "Email: zhengqi_hr@zhengqiai.com",
-  "weixin": "Official WeChat",
   "videoNotSupport": "Your browser does not support HTML5 video.",
-  "homeTip1-1": "FeeeGo Co-pilot",
-  "homeTip1-2": "Breaking Multidimensional Safety Boundaries",
-  "homeTip1-3": "Comprehensive Intelligent Control” + “Autonomous Decision-Making",
-  "homeTip1-4": "Establishing a Dual-Layered Safety System for Human-AI Collaborative Navigation",
-  "homeTip2-1": "FreeGo Al Space",
-  "homeTip2-2": "Creating a New Ecosystem for Mobility Space",
-  "homeTip2-3": "Emotional Engagement × Personalized Entertainment × Comprehensive Safety",
-  "homeTip2-4": "Unlocking a New Era of Mobility Experience",
-  "homeTip3-1": "FreeGo Aesthetics",
-  "homeTip3-2": "Pioneering a New Wave in Design Philosophy",
-  "homeTip3-3": "Embracing Future-Forward Minimalism",
-  "homeTip3-4": "to Define the New Iconography of Confident Mobility" ,
+  "homeTipTitle1": "FeeeGo X5",
+  "homeTipTitle2": "Narrow Passage Assist",
+  "homeTipTitle3": "Rearview & Obstacle Avoidance",
+  "homeTipTitle4": "Rearview & Obstacle Avoidance",
+  "homeTipTitle5": "Forward obstacle avoidance",
+  "homeTipTitle6": "Remote Family Pickup",
+  "homeTipTitle7": "Autonomous Charging",
+  "homeTipTitle8": "Location Sync",
+  "homeTipTitle9": "Never Boring",
+  "homeTipTitle10": "Follow Me",
+  "homeTipBoldTitle1": "Never Hit",
+  "homeTipBoldTitle2": "Never Lost",
+  "homeTipContent1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
+  "homeTipContent2": "In narrow passages, the chair down and adjusts its path, letting you pass safely without hitting the sides.",
+  "homeTipContent3": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
+  "homeTipContent4": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
+  "homeTipContent5": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
+  "homeTipContent6": "Family can check the chair's surroundings remotely, ensure safety, and then drive it to you from afar.",
+  "homeTipContent7": "When the battery is low, the chair automatically goes to the charging station to recharge.",
+  "homeTipContent8": "Family can see the chair's location anytime on their phone to ensure safety.",
+  "homeTipContent9": "A high-tech and stylish appearance, wrap-around super armrests, and a streamlined body design",
+  "homeTipContent10": "With auto-follow and stylish design, the chair makes travel more free and enjoyable, bringing fun and companionship",
   "recruit": "「FreeGo X5」 Global Experience Program",
   "scanCode": "Scan to Apply Now",
   "bottomLeftText1": "Be Among the First to Experience and Influence AI Mobility！",

src/pages/Home/Home.js

@@ -2,66 +2,124 @@ import React from 'react';
 import Styles from "./Home.module.css";
 import videoSource from "../../assets/videos/FreeGo-web.mp4"
 import img1 from '../../assets/images/home/img1.png';
-import img2 from '../../assets/images/home/img2.png';
-import img3 from '../../assets/images/home/img3.png';
-import code from '../../assets/images/home/code.png';
 import {useTranslation} from "react-i18next";
 // 首页内容组件
 const Home = () => {
     const {t} = useTranslation();
     return (
         <main className={Styles.root}>
-            <div className={Styles.videoContainer}>
-                <video className={Styles.video}
-                       controls
-                       loop
-                       autoPlay
-                       muted={true}
-                       playsInline>
-                    <source src={videoSource} type="video/mp4"/>
-                    {t('videoNotSupport')}
-                </video>
-            </div>
-            <div className={Styles.imagAndFontContainer}>
+            <div className={Styles.rootDesk}>
+                <div className={Styles.videoContainer}>
+                    <video className={Styles.video}
+                           controls
+                           loop
+                           autoPlay
+                           muted={true}
+                           playsInline>
+                        <source src={videoSource} type="video/mp4"/>
+                        {t('videoNotSupport')}
+                    </video>
+                </div>
                 <div className={Styles.contentContainer}>
+                    <img className={Styles.image} src={img1}/>
                     <div className={Styles.fontContainer}>
-                        <p className={Styles.boldFont}>{t('homeTip1-1')}</p>
-                        <p className={Styles.boldFont} style={{marginBottom: 16}}>{t('homeTip1-2')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip1-3')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip1-4')}</p>
+                        <p className={Styles.boldFont}>{t('homeTipTitle1')}</p>
+                        <p className={Styles.normalFont}>{t('homeTipContent1')}</p>
                     </div>
-                    <img className={Styles.image} src={img1}/>
                 </div>
-                <div className={Styles.contentContainer}>
-                    <img className={Styles.image} src={img2}/>
-                    <div className={Styles.fontContainer}>
-                        <p className={Styles.boldFont}>{t('homeTip2-1')}</p>
-                        <p className={Styles.boldFont} style={{marginBottom: 16}}>{t('homeTip2-2')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip2-3')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip2-4')}</p>
+
+                <p className={Styles.bigBoldFont}>{t('homeTipBoldTitle1')}</p>
+
+                <div className={Styles.verticalFontMediaContainer}>
+                    <video className={Styles.verticalMedia}
+                           controls
+                           loop
+                           autoPlay
+                           muted={true}
+                           playsInline>
+                        <source src={videoSource} type="video/mp4"/>
+                        {t('videoNotSupport')}
+                    </video>
+                    <div className={Styles.verticalFontContainer}>
+                        <p className={Styles.verticalBoldFont}>{t('homeTipTitle2')}</p>
+                        <p className={Styles.verticalNormalFont}>{t('homeTipContent2')}</p>
                     </div>
                 </div>
-                <div className={Styles.contentContainer}>
-                    <div className={Styles.fontContainer}>
-                        <p className={Styles.boldFont}>{t('homeTip3-1')}</p>
-                        <p className={Styles.boldFont}>{t('homeTip3-2')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip3-3')}</p>
-                        <p className={Styles.normalFont}>{t('homeTip3-4')}</p>
+                <div className={Styles.horizontalFontMediaContainer}>
+                    <div className={Styles.verticalFontMediaContainer2}>
+                        <video className={Styles.verticalMedia2}
+                               controls
+                               loop
+                               autoPlay
+                               muted={true}
+                               playsInline>
+                            <source src={videoSource} type="video/mp4"/>
+                            {t('videoNotSupport')}
+                        </video>
+                        <div className={Styles.verticalFontContainer}>
+                            <p className={Styles.verticalBoldFont}>{t('homeTipTitle4')}</p>
+                            <p className={Styles.verticalNormalFont}>{t('homeTipContent4')}</p>
+                        </div>
+                    </div>
+                    <div className={Styles.verticalFontMediaContainer3}>
+                        <video className={Styles.verticalMedia3}
+                               controls
+                               loop
+                               autoPlay
+                               muted={true}
+                               playsInline>
+                            <source src={videoSource} type="video/mp4"/>
+                            {t('videoNotSupport')}
+                        </video>
+                        <div className={Styles.verticalFontContainer}>
+                            <p className={Styles.verticalBoldFont}>{t('homeTipTitle5')}</p>
+                            <p className={Styles.verticalNormalFont2}>{t('homeTipContent5')}</p>
+                        </div>
                     </div>
-                    <img className={Styles.image} src={img3}/>
                 </div>
-            </div>
 
-            <div className={Styles.bottomContainerBg}>
-                <p className={Styles.bottomTitle}>{t('bottomTitle')}</p>
-                <p className={Styles.bottomSubtitle1}>{t('bottomSubtitle1')}</p>
-                <p className={Styles.bottomSubtitle2}>{t('bottomSubtitle2')}</p>
-                <div className={Styles.scanContainer}>
-                    <img className={Styles.bottomCode} src={code}/>
-                    <p className={Styles.bottomCodeText}>{t('scanCode')}</p>
+                <p className={Styles.bigBoldFont2}>{t('homeTipBoldTitle2')}</p>
+
+                <div className={Styles.verticalFontMediaContainer}>
+                    <img className={Styles.verticalMedia3} src={img1}/>
+                    <div className={Styles.verticalFontContainer}>
+                        <p className={Styles.verticalBoldFont}>{t('homeTipTitle6')}</p>
+                        <p className={Styles.verticalNormalFont}>{t('homeTipContent6')}</p>
+                    </div>
+                </div>
+                <div className={Styles.horizontalFontMediaContainer}>
+                    <div className={Styles.verticalFontMediaContainer4}>
+                        <img className={Styles.verticalMedia4} src={img1}/>
+                        <div className={Styles.verticalFontContainer2}>
+                            <p className={Styles.verticalBoldFont}>{t('homeTipTitle7')}</p>
+                            <p className={Styles.verticalNormalFont}>{t('homeTipContent7')}</p>
+                        </div>
+                    </div>
+                    <div className={Styles.verticalFontMediaContainer4}>
+                        <img className={Styles.verticalMedia4} src={img1}/>
+                        <div className={Styles.verticalFontContainer2}>
+                            <p className={Styles.verticalBoldFont}>{t('homeTipTitle8')}</p>
+                            <p className={Styles.verticalNormalFont2}>{t('homeTipContent8')}</p>
+                        </div>
+                    </div>
+                </div>
+                <div className={Styles.bottomContainer}>
+                    <div className={Styles.verticalFontContainer2}>
+                        <p className={Styles.verticalBoldFont1}>{t('homeTipTitle9')}</p>
+                        <p className={Styles.verticalNormalFont3}>{t('homeTipContent9')}</p>
+                    </div>
+                </div>
+                <div className={Styles.bottomContainer1}>
+                    <div className={Styles.verticalFontContainer3}>
+                        <p className={Styles.verticalBoldFont2}>{t('homeTipTitle10')}</p>
+                        <p className={Styles.verticalNormalFont3}>{t('homeTipContent10')}</p>
+                    </div>
                 </div>
             </div>
+            <div className={Styles.rootPhone}>
+            </div>
         </main>
+
     )
 
 };

src/pages/Home/Home.module.css

@@ -1,9 +1,15 @@
 .root {
+    background-color: #FBFBFB;
+}
+
+.rootDesk {
+    display: flex;
+    flex-direction: column;
     text-align: center;
-    background-color: #2B3034;
+    align-items: center;
 }
 
-.videoContainer{
+.videoContainer {
     width: 100%;
 }
 
@@ -13,21 +19,11 @@
     object-fit: cover;
 }
 
-.imagAndFontContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 150px;
-    margin: 150px 0;
-}
-
 .contentContainer {
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 86px;
+    gap: 85px;
+    margin-top: 150px;
 }
 
 .fontContainer {
@@ -35,84 +31,208 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 400px;
+    width: 555px;
     text-align: left;
 }
 
 .image {
-    width: 930px;
-    height: 450px;
-    object-fit: contain;
+    width: 640px;
+    height: 500px;
 }
 
 .normalFont {
-    font-size: 22px;
+    font-size: 18px;
     font-weight: normal;
-    color: #FFFFFF;
-    margin-top: 10px;
+    color: #000000;
+    text-align: left;
+    width: 371px;
 }
 
 .boldFont {
-    font-size: 40px;
+    font-size: 36px;
     font-weight: Bold;
-    color: #FFFFFF;
-    margin-bottom: 10px;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 20px;
+}
+
+.bigBoldFont {
+    font-size: 90px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-top: 175px;
+    width: 1280px;
+}
+
+.bigBoldFont2 {
+    font-size: 90px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-top: 263px;
+    width: 1280px;
+}
+
+.verticalFontMediaContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 35px;
+    margin-top: 24px;
+}
+
+.verticalFontMediaContainer2 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 35px;
+    margin-top: 24px;
+    width: 800px;
+}
+
+.verticalFontMediaContainer3 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 35px;
+    margin-top: 24px;
+    width: 440px;
 }
 
-.bottomContainerBg {
+.verticalFontMediaContainer4 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-end;
-    height: 724px;
-    width: 100%;
-    background-image: url("../../assets/images/home/bottom_bg.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
+    gap: 40px;
+    margin-top: 24px;
+    width: 620px;
+}
+
+.verticalFontContainer {
+    width: 1280px;
+    align-items: flex-start;
+}
+
+.verticalFontContainer2 {
+    width: 620px;
+    align-items: flex-start;
+}
+
+.verticalFontContainer3 {
+    align-items: flex-end;
 }
 
-.bottomTitle {
-    font-size: 56px;
-    font-weight: bold;
-    color: #ffffff;
+.verticalBoldFont {
+    font-size: 24px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 13px;
+}
+
+.verticalBoldFont1 {
+    font-size: 90px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 30px;
+}.verticalBoldFont2 {
+    font-size: 24px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 10px;
 }
 
-.bottomSubtitle1 {
-    font-size: 30px;
-    font-weight: 300;
-    color: #ffffff;
-    margin-top: 50px;
+.verticalNormalFont {
+    font-size: 18px;
+    font-weight: normal;
+    color: #000000;
+    text-align: left;
+    width: 538px;
 }
 
-.bottomSubtitle2 {
-    font-size: 30px;
-    font-weight: 300;
-    color: #ffffff;
-    margin-bottom: 59px;
+.verticalMedia {
+    width: 1280px;
+    height: 600px;
 }
 
-.scanContainer {
+.horizontalFontMediaContainer {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    align-items: start;
     justify-content: center;
-    gap: 10px;
-    margin-bottom: 52px;
+    gap: 40px;
+    margin-top: 80px;
+}
+
+.verticalMedia2 {
+    width: 800px;
+    height: 500px;
 }
 
-.bottomCode {
-    width: 109px;
-    height: 109px;
+.verticalMedia3 {
+    width: 1280px;
+    height: 500px;
 }
 
-.bottomCodeText {
-    font-size: 12px;
+.verticalMedia4 {
+    width: 620px;
+    height: 500px;
+}
+
+.verticalNormalFont2 {
+    font-size: 18px;
+    font-weight: normal;
+    color: #000000;
+    text-align: left;
+    width: 440px;
+}
+
+.verticalNormalFont3 {
+    font-size: 16px;
     font-weight: normal;
-    color: #ffffff;
+    color: #000000;
+    text-align: left;
+    width: 440px;
+}
+
+.bottomContainer {
+    display: flex;
+    background-image: url("../../assets/images/home/bottom_bg.png");
+    align-items: center;
+    margin-top: 185px;
+    width: 1920px;
+    height: 700px;
+    padding-left: 320px;
 }
 
+.bottomContainer1 {
+    display: flex;
+    background-image: url("../../assets/images/home/bottom_bg.png");
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 120px;
+    width: 1280px;
+    height: 500px;
+    padding-right: 93px;
+    margin-bottom: 200px;
+}
+
+.rootPhone {
+    display: none;
+}
 
+@media (max-width: 768px) {
+    .rootDesk {
+        display: none;
+    }
+
+    .rootPhone {
+        display: flex;
+    }
+}