feat:about us 页面

src/i18n/locales/en.json

@@ -33,6 +33,12 @@
   "footerEmail": " Email: info@freegoai.com",
   "footerHelp": "We're here to help. Whether you're a customer, a dealer, or a media partner - feel free to reach out.",
   "footerBtn": "Let's Connect",
+  "aboutUsTitle": "Brand Story Slogan",
+  "aboutUsTipTitle1": "About Freego",
+  "aboutUsTipContent1": "Freego is dedicated to creating intelligent mobility solutions for people with limited mobility, combining cutting-edge technology with human-centered design.",
+  "aboutUsTipContent2": "To empower independence and dignity though smart, safe, and stylish mobility ",
+  "aboutUsTipContent3": "Innovation from deep tech backgrounds (Huawei & Baidu autonomous driving) ",
+  "aboutUsTipContent4": "Safety in every sense: physical, operational, and emotional Commitment to accessibility and inclusive design",
 
 
   "recruit": "「FreeGo X5」 Global Experience Program",

src/pages/AboutUs/AboutUs.js

@@ -1,47 +1,27 @@
 import React from 'react';
 import styles from './AboutUs.module.css'
 import {useTranslation} from "react-i18next";
-import left from "../../assets/images/join/left.png";
-import right from "../../assets/images/join/right.png";
+import img1 from "../../assets/images/home/img1.png";
 
 const AboutUs = () => {
     const {t} = useTranslation();
     return (
         <main className={styles.root}>
             <div className={styles.topContainer}>
-                <div className={styles.titleContainer}>
-                    <p className={styles.joinUsTitle}>{t('joinUsTitle')}</p>
-                    <p className={styles.joinUsSubtitle}>{t('joinUsContent1')}</p>
-                    <p className={styles.joinUsSubtitle}>{t('joinUsContent2')}</p>
-                </div>
+                <p className={styles.aboutUsTitle}>{t('aboutUsTitle')}</p>
             </div>
-
-            <div className={styles.centerImageContainer}>
-                <div className={styles.centerImageItem}>
-                    <img className={styles.centerImg} src={left}/>
-                    <p className={styles.centerText1}>{t('joinUsLeftContent1')}</p>
-                    <p className={styles.centerText2}>{t('joinUsLeftContent2')}</p>
-                </div>
-                <div className={styles.centerImageItem}>
-                    <img className={styles.centerImg} src={right}/>
-                    <p className={styles.centerText1}>{t('joinUsRightContent1')}</p>
-                    <p className={styles.centerText2}>{t('joinUsRightContent2')}</p>
+            <div className={styles.contentContainer}>
+                <img className={styles.image} src={img1}/>
+                <div className={styles.fontContainer}>
+                    <p className={styles.boldFont}>{t('aboutUsTipTitle1')}</p>
+                    <p className={styles.normalFont}>{t('aboutUsTipContent1')}</p>
+                    <p className={styles.normalFont}>{t('aboutUsTipContent2')}</p>
+                    <p className={styles.normalFont}>{t('aboutUsTipContent3')}</p>
+                    <p className={styles.normalFont}>{t('aboutUsTipContent4')}</p>
                 </div>
             </div>
-            <div className={styles.bottomImgContainer}>
-                <p className={styles.bottomText}>{t('joinUsBottomText1')}&nbsp;{t('joinUsBottomText2')}</p>
-            </div>
-            <div className={styles.jobsContainer}>
-                <p className={styles.jobItem}>{t('joinUsJob1')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob2')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob3')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob4')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob5')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob6')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob7')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob8')}</p>
-                <p className={styles.jobItem}>{t('joinUsJob9')}</p>
-            </div>
+            <div className={styles.bottomContainer}/>
+
         </main>
     );
 };

src/pages/AboutUs/AboutUs.module.css

@@ -1,15 +1,14 @@
 .root {
-    flex: 1; /* 占据剩余空间 */
     text-align: center;
+    background-color: #FBFBFB;
 }
 
 .topContainer {
     display: flex;
     flex-direction: column;
-    align-items: self-start;
+    align-items: center;
     justify-content: center;
-    padding-left: 255px;
-    height: 850px;
+    height: 500px;
     width: 100%;
     background-image: url("../../assets/images/join/top.png");
     background-size: cover;
@@ -17,108 +16,52 @@
     background-Repeat: no-repeat;
 }
 
-.joinUsTitle {
-    font-size: 72px;
-    font-weight: normal;
-    color: #ffffff;
-    margin-bottom: 30px;
-}
-
-.joinUsSubtitle {
-    font-size: 22px;
+.aboutUsTitle {
+    font-size: 48px;
     font-weight: bold;
-    color: #ffffff;
-    width: 650px;
-    text-align: left;
-}
-
-.titleContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
+    color: #000000;
+    margin-bottom: 30px;
 }
 
-.centerImageContainer {
+.contentContainer {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    gap: 69px;
     justify-content: center;
-    background-color: #2B3034;
-    gap: 29px;
-    padding: 150px 0;
+    align-items: center;
+    margin-top: 120px;
 }
 
-.centerImageItem {
+.fontContainer {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    width: 555px;
+    text-align: left;
 }
 
-.centerImg {
-    width: 690px;
-    height: 380px;
-    object-fit: contain;
-}
-
-.centerText1 {
-    font-size: 30px;
-    font-weight: 300;
-    color: #ffffff;
-    margin-bottom: 6px;
-    margin-top: 15px;
-}
-
-.centerText2 {
-    font-size: 36px;
-    font-weight: normal;
-    color: #ffffff;
-}
-
-.bottomImgContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: center;
+.image {
+    width: 640px;
     height: 500px;
-    width: 100%;
-    padding-right: 255px;
-    background-image: url("../../assets/images/join/bottom.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
 }
 
-.bottomText {
-    font-size: 56px;
-    font-weight: bold;
-    color: #FFFFFF;
+.normalFont {
+    font-size: 16px;
+    font-weight: normal;
+    color: #000000;
+    text-align: left;
+    width: 371px;
+    margin-bottom: 20px;
 }
 
-.jobsContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    height: 757px;
-    width: 100%;
-    background-image: url("../../assets/images/join/jobs_bg.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
-    flex-wrap: wrap;
-    column-gap: 30px;
-    padding: 90px 255px;
+.boldFont {
+    font-size: 36px;
+    font-weight: Bold;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 20px;
 }
-
-.jobItem {
-    width: 450px;
-    height: 160px;
-    background-color: #ffffff;
-    font-size: 22px;
-    font-weight: normal;
-    color: #333333;
-    text-align: center;
-    line-height: 160px;
+.bottomContainer{
+    height: 120px;
 }