feat: 联系人页面

src/i18n/locales/en.json

@@ -38,6 +38,17 @@
   "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",
+  "contactUsTitle": "Contact us",
+  "contactUsTitle1": "Let's Connect",
+  "contactUsContent1": "Have questions or want to learn more about Freego? Fill out the form and our team will get back to you shortly.",
+  "contactProperty1": "Name*",
+  "contactProperty2": "Email*",
+  "contactProperty3": "Phone (Optional)",
+  "contactProperty4": "Country/Region*",
+  "contactProperty5": "Your Message*",
+  "contactButton": "Submit",
+  "submitSuccess": "Submit Success",
+  "submitFailed": "Submit Failed",
 
 
   "recruit": "「FreeGo X5」 Global Experience Program",

src/pages/ContactUs/ContactUs.js

@@ -1,11 +1,111 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styles from "./ContactUs.module.css";
-// 首页内容组件
+import {t} from "i18next";
+
 const ContactUs = () => {
-    return (
-        <main className={styles.root}>
-        </main>
-    );
+    const [formData, setFormData] = useState({
+        name: "", email: "", phone: "", country: "", message: ""
+    });
+
+    // 输入时更新数据
+    const handleChange = (e) => {
+        const {name, value} = e.target;
+        setFormData((prev) => ({
+            ...prev, [name]: value
+        }));
+    };
+
+    // 提交表单
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // 获取当前时间（北京时间）
+        const now = new Date();
+        const beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000); // UTC+8
+
+        const formattedTime = beijingTime.toISOString().slice(0, 19).replace("T", " ");
+        // => "2025-09-08 20:31:45"
+        const dataToSubmit = {
+            ...formData,
+            timestamp: formattedTime // YYYY-MM-DD HH:mm:ss
+        };
+        console.log("提交的数据:", dataToSubmit);
+
+        // 示例：提交到后端
+        fetch("http://60.205.235.193:3005/submit", {
+            method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(dataToSubmit)
+        })
+            .then(res => res.text())
+            .then(msg => {
+                console.log("提交成功:", msg);
+                alert(`${t('submitSuccess')}`);
+            })
+            .catch(err => {
+                console.error("提交失败:", err);
+                alert(`${t('submitFailed')}`);
+            });
+    };
+
+    return (<main className={styles.root}>
+        <div className={styles.topContainer}>
+            <p className={styles.title}>{t('contactUsTitle')}</p>
+        </div>
+        <form className={styles.contentContainer} onSubmit={handleSubmit}>
+            <p className={styles.title1}>{t('contactUsTitle1')}</p>
+            <p className={styles.content1}>{t('contactUsContent1')}</p>
+
+            <label className={styles.property}>{t('contactProperty1')}</label>
+            <input
+                className={styles.input}
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                required
+            />
+
+            <label className={styles.property}>{t('contactProperty2')}</label>
+            <input
+                className={styles.input}
+                type="text"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+            />
+
+            <label className={styles.property}>{t('contactProperty3')}</label>
+            <input
+                className={styles.input}
+                type="text"
+                name="phone"
+                value={formData.phone}
+                onChange={handleChange}
+            />
+
+            <label className={styles.property}>{t('contactProperty4')}</label>
+            <input
+                className={styles.input}
+                type="text"
+                name="country"
+                value={formData.country}
+                onChange={handleChange}
+                required
+            />
+
+            <label className={styles.property}>{t('contactProperty5')}</label>
+            <textarea
+                className={styles.textarea}
+                name="message"
+                value={formData.message}
+                onChange={handleChange}
+                required
+            />
+
+            <button type="submit" className={styles.button}>
+                {t('contactButton')}
+            </button>
+        </form>
+    </main>);
 };
 
 export default ContactUs;

src/pages/ContactUs/ContactUs.module.css

@@ -1,4 +1,113 @@
 .root {
     flex: 1; /* 占据剩余空间 */
     text-align: center;
+    background-color: #FBFBFB;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.topContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 500px;
+    width: 100%;
+    background-image: url("../../assets/images/aboutus/top.png");
+    background-size: cover;
+    background-position: center;
+    background-Repeat: no-repeat;
+}
+
+.title {
+    font-size: 48px;
+    font-weight: bold;
+    color: #000000;
+}
+
+.title1 {
+    font-size: 24px;
+    font-weight: bold;
+    color: #000000;
+    margin-bottom: 20px;
+    text-align: start;
+    width: 100%;
+}
+
+.content1 {
+    font-size: 16px;
+    font-weight: normal;
+    color: #000000;
+    margin-bottom: 53px;
+    text-align: start;
+}
+
+.property {
+    font-size: 18px;
+    font-weight: bold;
+    color: #000000;
+    margin-bottom: 10px;
+    text-align: start;
+    width: 100%;
+}
+
+.input {
+    background-color: white;
+    border: 1px solid #DFDFDF;
+    border-radius: 5px;
+    opacity: 1;
+    width: 600px;
+    height: 50px;
+    padding: 15px;
+    margin-bottom: 20px;
+    outline: none;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.input:focus {
+    outline: none;
+    border: 1px solid #808080;
+    --input-border-color: #808080;
+}
+
+.textarea {
+    background-color: white;
+    border: 1px solid #DFDFDF;
+    border-radius: 5px;
+    opacity: 1;
+    width: 600px;
+    height: 140px;
+    padding: 15px;
+    resize: none;
+    margin-bottom: 30px;
+    outline: none;
+}
+
+.textarea:focus {
+    outline: none;
+    border: 1px solid #808080;
+    --input-border-color: #808080;
+}
+
+.button {
+    text-align: center;
+    font-size: 18px;
+    font-weight: normal;
+    width: 138px;
+    height: 45px;
+    color: white;
+    background: #000000;
+    border-radius: 30px;
+    align-self: flex-end;
+}
+
+.contentContainer {
+    padding: 120px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 600px;
 }