feat:修改官网footer

src/component/Footer/Footer.js

@@ -1,63 +1,25 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import Styles from './Footer.module.css';
-import location from '../../assets/images/main/location.png';
-import email from '../../assets/images/main/email_white.png';
-import weiXin from '../../assets/images/main/weixin.png';
 import {useTranslation} from "react-i18next";
-import eventBus from "../../uitls/EventBus";
-import {ABOUT_US} from "../../uitls/Constants";
-import code from '../../assets/images/home/code.png';
 
 // 底部信息栏组件
 const Footer = () => {
     const {t} = useTranslation();
-    const [isJoinUs, setJoinUs] = useState(false)
-
-    useEffect(() => {
-        eventBus.on('changeTabEvent', (tab) => {
-            setJoinUs(tab === ABOUT_US)
-            console.log("tab", tab)
-        });
-
-        // 清除监听，防止内存泄漏
-        return () => {
-            eventBus.off('changeTabEvent');
-        };
-    }, []);
+    const onClick = () => {
+       console.log('点击了:Let\'s Connect');
+    };
 
     return (
         <footer className={Styles.root}>
-            <div className={Styles.Container}>
-                <p className={Styles.contactUs}>{isJoinUs ? t('submitResume') : t('contactUs')}</p>
-                <div className={Styles.item} style={{display: isJoinUs ? 'none' : 'flex'}}>
-                    <img className={Styles.locationIcon} src={location} alt={"address"}/>
-                    <p className={Styles.leftFont}>{t('address')}</p>
-                </div>
-                <div className={Styles.bottomContainer}>
-                    <div className={Styles.item}>
-                        <img className={Styles.email} src={email} alt={"email"}/>
-                        <p className={Styles.leftFont}>{isJoinUs ? t('resumeEmail') : t('email')}</p>
-                    </div>
-                    <div className={Styles.weixinContainer}>
-                        <img className={Styles.email} src={weiXin} alt={"weiXin"}/>
-                        <p className={Styles.rightFont}>{t('weixin')}</p>
-                        <div className={Styles.popContainer}>
-                            <img className={Styles.code} src={code} alt={"code"}/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-
-            {/*<div className={Styles.rightItem}>*/}
-            {/*    <img className={Styles.email} src={douyin} alt={"douyin"}/>*/}
-            {/*    <p className={Styles.rightFont}>官方抖音</p>*/}
-            {/*</div>*/}
-            {/*<div className={Styles.rightItem}>*/}
-            {/*    <img className={Styles.email} src={weibo} alt={"weibo"}/>*/}
-            {/*    <p className={Styles.rightFont}>官方抖音</p>*/}
-            {/*</div>*/}
-
+            <p className={Styles.title}>{t('footerTitle')}</p>
+            <p className={Styles.content}>{t('footerHelp')}</p>
+            <p className={Styles.content}>{t('footerEmail')}</p>
+            <button
+                className={Styles.ellipseBtn}
+                onClick={onClick}
+            >
+                {t('footerBtn')}
+            </button>
         </footer>
     );
 };

src/component/Footer/Footer.module.css

@@ -1,100 +1,36 @@
 /* 底部信息栏 */
 .root {
     flex: 1;
-    height: 242px;
+    height: 473px;
     display: flex;
-    background-color: #13151A;
+    background-color: #ffffff;
     color: white;
     text-align: center;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-}
-
-.Container {
-    flex: 1;
-    display: flex;
+    justify-content: center;
+    align-items: start;
     flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 0 255px;
-    gap: 23px;
+    padding-left: 320px;
+    gap: 40px;
 }
 
-.contactUs {
-    font-size: 40px;
-    font-weight: normal;
+.title {
+    font-size: 36px;
+    font-weight: bold;
+    color: black;
 }
 
-.item {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-}
-
-.locationIcon {
-    object-fit: contain;
-    width: 19px;
-    height: 25px;
-}
-
-.leftFont {
-    font-size: 24px;
-    font-weight: normal;
-    margin-left: 14px;
-}
-
-.bottomContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.email {
-    object-fit: contain;
-    width: 26px;
-    height: 18px;
-}
-
-.rightFont {
-    margin-left: 8px;
+.content {
     font-size: 16px;
     font-weight: normal;
+    color: black;
 }
 
-.code {
-    width: 109px;
-    height: 109px;
-}
-
-.weixinContainer {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-    position: relative;
-}
-
-.popContainer {
-    position: absolute;
-    bottom: 50px;
-    right: 0px;
-    background-color: white;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.weixinContainer:hover .popContainer {
-    opacity: 1;
-    visibility: visible;
+.ellipseBtn {
+    background-color: #000000;
+    color: white;
+    border: none;
+    padding: 12px 40px;
+    border-radius: 9999px;
+    font-size: 18px;
+    cursor: pointer;
 }

src/i18n/locales/en.json

@@ -29,6 +29,12 @@
   "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",
+  "footerTitle": "Contact FreeGo",
+  "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",
+
+
   "recruit": "「FreeGo X5」 Global Experience Program",
   "scanCode": "Scan to Apply Now",
   "bottomLeftText1": "Be Among the First to Experience and Influence AI Mobility！",