注册页

.env.development

@@ -1,2 +1,4 @@
 VITE_APP_DEV = 'dev-api'
-VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'https://8.217.122.133:10020'
+VITE_API_URL = 'https://api.pineer.cc'

.env.production

@@ -1,2 +1,4 @@
 VITE_APP_DEV = 'prod-api'
-VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'https://8.217.122.133:10020'
+VITE_API_URL = 'https://api.pineer.cc'

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/App.tsx

@@ -10,7 +10,7 @@ function App() {
   const {i18n} = useTranslation()
   const lang:string = navigator.language.split('-')[1].toLocaleLowerCase()
   useEffect(()=>{    
-    i18n.changeLanguage(lang)
+    i18n.changeLanguage('en')
   },[ i18n,lang])
   return (
     <Router>

src/api/request.ts

@@ -16,7 +16,7 @@ const service = axios.create({
 // 统一请求拦截，可配置自定义 headers 例如 language、token 等
 service.interceptors.request.use(
   (config: any): any => {
-    // 确保 headers 对象存在
+    // 确保 headers 对象存在 
     if (!config.headers) {
       config.headers = {};
     }

src/assets/iconfont/email.svg

@@ -9,7 +9,7 @@
         <g>
             <path
                 d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
-                fill="#333333" fill-opacity="1" />
+                fill="#999999" fill-opacity="1" />
         </g>
     </g>
 </svg>

src/assets/iconfont/email_Select.svg

@@ -9,7 +9,7 @@
         <g>
             <path
                 d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
-                fill="#BF62FF" fill-opacity="1" />
+                fill="#f5d90a" fill-opacity="1" />
         </g>
     </g>
 </svg>

src/components/EmailForm.tsx

@@ -1,20 +1,25 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, Button } from "antd-mobile";
 import "../pages/SignIn.scss";
 import { useCountdown } from "../hooks/useCountdown";
 import { sendCode, signUp } from "../api";
-import { sendCodeTypes, signUpTypes,ErrorType } from "../type/SignIn";
+import { sendCodeTypes, signUpTypes, ErrorType } from "../type/SignIn";
 import { Toast } from "antd-mobile";
+import { useLocation, useNavigate } from "react-router-dom";
 
 function EmailForm() {
+  const formRef: any = useRef()
+  const location = useLocation()
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { start, time } = useCountdown();
   const [email, setEmail] = useState("");
   const [authCode, setAuthCode] = useState("");
   const [shareCode, setShareCode] = useState("");
   const [remainingTime, setRemainingTime] = useState(0);
+
   const config = {
     headers: {
       "Accept-Language": navigator.language,
@@ -49,7 +54,7 @@ function EmailForm() {
           },
         });
       }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
       // 检查 error 是否是 ErrorType 类型
       if (typeof error === 'object' && error !== null && 'msg' in error) {
         const typedError = error as ErrorType; // 使用类型断言
@@ -66,9 +71,26 @@ function EmailForm() {
       console.warn(error);
     }
   };
+
+  const getShareCode = (url: string) => {
+    const newStr = url.replace('?', '')?.split('&')
+    if (!newStr) return ''
+    const shareStr = newStr.find(item => item.includes('shareCode'))
+    if (!shareStr) return ''
+    if (shareStr) {
+      const code = shareStr.split('=')[1]
+      if (code) {
+        // setShareCode(code)
+        return code
+      }
+    }
+    return ''
+  }
+
   useEffect(() => {
     setRemainingTime(time / 1000);
   }, [time]);
+
   const handleSignUp = async () => {
     if (email === "" || authCode === "") {
       return;
@@ -80,21 +102,25 @@ function EmailForm() {
           area: "",
           areaCode: "",
           authCode: authCode,
-          shareCode: shareCode,
+          shareCode: shareCode || formRef.current?.getFieldValue('shareCode'),
         },
         config
       );
       console.log("res", res);
       if (res.status === 200 && res.data.data.token) {
+        console.log(111)
         Toast.show({
           content: res.data.msg,
         });
+        setTimeout(() => {
+          navigate("/Download")
+        }, 1000)
       } else {
         Toast.show({
           content: res.data.msg,
         });
       }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
       // 检查 error 是否是 ErrorType 类型
       if (typeof error === 'object' && error !== null && 'msg' in error) {
         const typedError = error as ErrorType; // 使用类型断言
@@ -110,7 +136,11 @@ function EmailForm() {
   };
   return (
     <Form
+      ref={formRef}
       name="form"
+      initialValues={{
+        shareCode: getShareCode(location.search)
+      }}
       footer={
         <Button
           block

src/components/PhoneForm.tsx

@@ -1,15 +1,17 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, Button } from "antd-mobile";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import "../pages/SignIn.scss";
 import useUserStore from "../store/user.ts";
 import { useCountdown } from "../hooks/useCountdown";
 import { sendCode, signUp } from "../api";
-import { sendCodeTypes, signUpTypes,ErrorType} from "../type/SignIn";
+import { sendCodeTypes, signUpTypes, ErrorType } from "../type/SignIn";
 import { Toast } from "antd-mobile";
 
 function PhoneForm() {
+  const formRef: any = useRef()
+  const location = useLocation()
   const { t } = useTranslation();
   const { start, time } = useCountdown();
   const navigate = useNavigate();
@@ -19,6 +21,22 @@ function PhoneForm() {
     UpdateCurrentPhoneNumber,
     UpdatePreviousPathName,
   } = useUserStore();
+
+  const getShareCode = (url: string) => {
+    const newStr = url.replace('?', '')?.split('&')
+    if (!newStr) return ''
+    const shareStr = newStr.find(item => item.includes('shareCode'))
+    if (!shareStr) return ''
+    if (shareStr) {
+      const code = shareStr.split('=')[1]
+      if (code) {
+        // setShareCode(code)
+        return code
+      }
+    }
+    return ''
+  }
+
   const defaultAreaCode = "+1";
   const [authCode, setAuthCode] = useState("");
   const [shareCode, setShareCode] = useState("");
@@ -43,13 +61,14 @@ function PhoneForm() {
       }
       const res = await sendCode<sendCodeTypes>({
         account: CurrentPhoneNumber,
-        areaCode: SelectCountry?.code,
+        areaCode: SelectCountry?.code || defaultAreaCode,
         status: 2,
-      },config);
+      }, config);
       console.log("res", res);
       if (res.status === 200 && res.data.data.sms) {
+        console.log(111)
         Toast.show({
-          content:t('send successfully'),
+          content: t('send successfully'),
           afterClose: () => {
             start(60 * 1000);
           },
@@ -62,7 +81,7 @@ function PhoneForm() {
           },
         });
       }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
       // 检查 error 是否是 ErrorType 类型
       if (typeof error === 'object' && error !== null && 'msg' in error) {
         const typedError = error as ErrorType; // 使用类型断言
@@ -83,29 +102,32 @@ function PhoneForm() {
     setRemainingTime(time / 1000)
   }, [time]);
 
-  const handleSignUp = async () =>{    
+  const handleSignUp = async () => {
-    if(CurrentPhoneNumber === '' || authCode === '') {
+    if (CurrentPhoneNumber === '' || authCode === '') {
-     return
+      return
     }
     try {
       const res = await signUp<signUpTypes>({
-        account:CurrentPhoneNumber,
+        account: CurrentPhoneNumber,
-        area:SelectCountry?.cn,
+        area: SelectCountry?.cn,
-        areaCode:SelectCountry?.code,
+        areaCode: SelectCountry?.code,
-        authCode:authCode,
+        authCode: authCode,
-        shareCode:shareCode
+        shareCode: shareCode || formRef.current?.getFieldValue('shareCode'),
-      },config)
+      }, config)
-      console.log('res',res)
+      console.log('res', res)
-      if(res.status === 200 && res.data.data.token) {
+      if (res.status === 200 && res.data.data.token) {
         Toast.show({
           content: res.data.msg,
         })
-      }else {
+        setTimeout(() => {
+          navigate("/Download")
+        }, 1000)
+      } else {
         Toast.show({
           content: res.data.msg,
         })
       }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
       // 检查 error 是否是 ErrorType 类型
       if (typeof error === 'object' && error !== null && 'msg' in error) {
         const typedError = error as ErrorType; // 使用类型断言
@@ -118,12 +140,15 @@ function PhoneForm() {
       }
       console.warn(error);
     }
-    
+
 
   };
   return (
     <Form
       name="form"
+      initialValues={{
+        shareCode: getShareCode(location.search)
+      }}
       footer={
         <Button
           block

src/i18n/cn/translation.json

@@ -1,24 +1,23 @@
 {
-    "E-mail": "电子邮件",
+  "E-mail": "電子郵件",
-    "phone":"电话",
+  "phone": "電話",
-    "Please enter your email address":"请输入您的电子邮件地址",
+  "Please enter your email address": "請輸入您的電子郵件地址",
-    "Please enter the email verification code":"请输入电子邮件验证码",
+  "Please enter the email verification code": "請輸入電子郵件驗證碼",
-    "Please enter your phone number":"请输入您的电话号码",
+  "Please enter your phone number": "請輸入您的電話號碼",
-    "Please enter SMS verification code":"请输入短信验证码",
+  "Please enter SMS verification code": "請輸入短信驗證碼",
-    "Send verification code":"发送验证码",
+  "Send verification code": "發送驗證碼",
-    "Please enter the invitation code (optional)":"请输入邀请码(可选)",
+  "Please enter the invitation code (optional)": "請輸入邀請碼(可選)",
-    "register":"注册",
+  "register": "注冊",
-    "If you already have an account":"如果你已经有一个帐户",
+  "If you already have an account": "已有帳戶",
-    "download the APP directly":"直接下载APP",
+  "download the APP directly": "直接下載APP",
-    "Continuing to represent you in agreeing to our":"继续代表你方同意我们的",
+  "Continuing to represent you in agreeing to our": "繼續代表妳方同意我們的",
-    "Terms of Service":"服务条款",
+  "Terms of Service": "服務條款",
-    "and":"和",
+  "and": "和",
-    "Privacy Policy":"隐私政策",
+  "Privacy Policy": "隱私政策",
-    "Select country/region":"选择国家/地区",
+  "Select country/region": "選擇國家/地區",
-    "seconds":  "秒",
+  "seconds": "秒",
-    "Official Website":"官方网站",
+  "Official Website": "官方網站",
-    "Download":"下载",
+  "Download": "下載",
-    "send successfully":"发送成功",
+  "send successfully": "發送成功",
-    "Send failure":"发送失败"
+  "Send failure": "發送失敗"
-  }
+}
-  

src/index.css

@@ -59,6 +59,10 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.adm-form-item-feedback-error {
+  text-align: left;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/pages/Download.scss

@@ -1,5 +1,5 @@
 .container {
-    background: #fafafb;
+    background: #131313;
     width: 100vw;
     min-height: 100vh;
     padding: 4.625rem 2.5rem;
@@ -18,12 +18,16 @@
 
     .btn-box {
         margin-top: 11.4375rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         .btn-item {
             width: 18.4375rem;
             height: 2.75rem;
             border-radius: .3125rem;
             box-sizing: border-box;
-            border: .0625rem solid #BF62FF;
+            border: .0625rem solid #f5d90a;
             margin-bottom: 1.25rem;
             display: flex;
             align-items: center;
@@ -36,7 +40,7 @@
             a {
                 font-family: PingFang SC;
                 font-size: 1.125rem;
-                color: #333333;
+                color: #ffffff;
             }
         }
     }

src/pages/Download.tsx

@@ -23,10 +23,10 @@ function Download() {
             <a href="">App Store</a>
         </div>
         <div className="btn-item">
-            <a href="http://8.217.122.133/upload/apk/app-release.apk">{t('Download')} APK</a>
+            <a href="https://d.pineer.cc/app-release.apk">{t('Download')} APK</a>
         </div>
         <div className="btn-item">
-            <a href="">{t('Official Website')}</a>
+            <a href="https://www.pineer.cc">{t('Official Website')}</a>
         </div>
       </div>
     </div>

src/pages/SelectCountry.scss

@@ -69,8 +69,8 @@
                 line-height: 3.25rem;
                 border-bottom: .0625rem solid #D8D8D8;
                 &.selected {
-                    border-bottom: .0625rem solid  #BF62FF;
+                    border-bottom: .0625rem solid  #f5d90a;
-                    color: #BF62FF;
+                    color: #f5d90a;
                 }
             }
         }

src/pages/SignIn.scss

@@ -1,15 +1,32 @@
+.popoverContainer {
+  .adm-popover-inner {
+    .adm-popover-inner-content {
+      padding: 0 !important;
+    }
+  }
+}
+
 .container {
   background: #fafafb;
   width: 100vw;
   min-height: 100vh;
   padding: 4.625rem 2.5rem;
   box-sizing: border-box;
+  position: relative;
+
+  .language {
+    position: absolute;
+    right: 3rem;
+    top: 2rem;
+    color: #fff;
+  }
 
   .logo {
     width: 4.25rem;
     height: 4.25rem;
     margin-left: 50%;
     transform: translateX(-50%);
+
     img {
       width: 100%;
       height: 100%;
@@ -26,14 +43,16 @@
       font-size: 18px;
       font-weight: normal;
       line-height: normal;
-      color: #333333;
+      color: #999999;
       display: flex;
       align-items: center;
       margin-right: 2.0625rem;
+
       &.selected {
-        border-bottom: .0625rem solid #BF62FF;
+        border-bottom: .0625rem solid #f5d90a;
-        color:#BF62FF;
+        color: #f5d90a;
       }
+
       img {
         margin-right: .4375rem;
       }
@@ -47,16 +66,19 @@
   }
 
   .adm-list-item {
-    background: #FFFFFF;
+    background: #333333;
     margin-bottom: 1.7rem;
     width: 100%;
     height: 2.75rem;
     border-radius: .3125rem;
     box-sizing: border-box;
-    border: 1px solid #999999 !important;
+    border: 1px solid #56512c !important;
-    box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 50%);
+    // box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 50%);
     padding-left: 0;
+
     .adm-input-element {
+      color: #c6c6c6;
+
       &::placeholder {
         font-size: .75rem;
         color: #999999
@@ -67,55 +89,70 @@
   .adm-list-item-content {
     border-style: none;
   }
+
   .adm-list-item-content-main {
     padding: 0;
   }
+
   .adm-input {
-    padding: .75rem 0;
+    padding: 0.5rem 0 0.6rem 0;
     padding-left: .625rem;
   }
+
   .send-code {
     font-family: PingFang SC;
     font-size: .75rem;
-    color: #BF62FF;
+    color: #0957c0;
-    margin-bottom:.9375rem;
+    margin-bottom: 1.5375rem;
+    margin-top: -0.5rem;
     text-align: right;
   }
+
   .adm-form-footer {
     display: flex;
     justify-content: center;
   }
+
   .submit-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 6.1875rem;
     height: 2.75rem;
     border-radius: .3125rem;
-    background: #BF62FF;
+    background: #f5d90a;
     font-family: PingFang SC;
     font-size: .75rem;
-    color: #FFFFFF;
+    color: #333;
   }
+
   .to-download {
     font-family: PingFang SC;
     font-size: .875rem;
-    color: #BF62FF;
+    color: #0957c0;
   }
+
   .terms-service {
     font-family: PingFang SC;
     font-size: .75rem;
     text-align: center;
     width: 100%;
     margin-top: 5rem;
+
     p {
       color: #999999;
     }
-    span {
+
-      color:#BF62FF;
+    span>a {
+      color: #0957c0;
     }
   }
+
   .phone-box {
     display: flex;
     align-items: center;
     border-radius: .3125rem;
+
     span {
       width: 3.75rem;
       height: 2.6rem;
@@ -123,18 +160,17 @@
       text-align: center;
       font-family: PingFang SC;
       font-size: .75rem;
-      color: #666666;
+      color: #c6c6c6;
-      background: #EAEAEA;
+      background: #333333;
-      border-right: .0625rem solid #999999;
+      border-right: .0625rem solid #5d5d5d;
-      border-left: .0625rem solid #999999;
-      border-bottom: .0625rem solid #999999;
       border-top-left-radius: .3125rem;
       border-bottom-left-radius: .3125rem;
     }
+
     .adm-input {
-      padding-top: 0.55rem;
+      padding-top: 0rem;
       padding-left: 0.625rem;
-      padding-bottom: 0;
+      padding-bottom: 0.1rem;
     }
   }
 }

src/pages/SignIn.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, getI18n } from "react-i18next";
 import phoneIconSelect from "../assets/iconfont/phone_Select.svg";
 import phoneIcon from "../assets/iconfont/phone.svg";
 import emailIcon from "../assets/iconfont/email.svg";
@@ -10,13 +10,15 @@ import EmailForm from "../components/EmailForm";
 import PhoneForm from "../components/PhoneForm";
 import { useNavigate } from "react-router-dom";
 import useUserStore from "../store/user.ts";
+import { Popover } from "antd-mobile";
 
-console.log('language',navigator.language)
 function SignIn() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lang: string = getI18n().language
+  const [visible, setVisible] = useState(false)
 
   const [selectIndex, setSelectIndex] = useState<number>(0);
-  const {previousPathName,UpdatePreviousPathName} = useUserStore()
+  const { previousPathName, UpdatePreviousPathName } = useUserStore()
   const navigate = useNavigate();
   const handleTabs = (num: number) => {
     return () => {
@@ -25,15 +27,48 @@ function SignIn() {
     };
   };
   useEffect(() => {
-      // 当组件加载时，保存当前路径
+    // 当组件加载时，保存当前路径
-      console.log("previousPathName", previousPathName);
+    console.log("previousPathName", previousPathName);
 
-      if (previousPathName === "/SelectCountry") {
+    if (previousPathName === "/SelectCountry") {
-        setSelectIndex(1);
+      setSelectIndex(1);
-      }
+    }
   }, [previousPathName]);
+
   return (
     <div className="container">
+      <div className="language">
+        <Popover
+          className="popoverContainer"
+          mode='dark'
+          visible={visible}
+          placement='bottom-end'
+          trigger='click'
+          content={<ul style={{
+            listStyle: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            margin: 0,
+            padding: '5px 10px',
+            fontSize: 14,
+            background: '#333333',
+            borderRadius: 6
+          }}>
+            <li style={{ borderBottom: '1px solid #2f2f2f', padding: '5px 10px', cursor: 'pointer' }}><span onClick={() => {
+              i18n.changeLanguage('cn')
+              setVisible(false)
+            }}>中文（繁体）</span></li>
+            <li style={{ padding: '5px 10px', cursor: 'pointer' }}><span onClick={() => {
+              i18n.changeLanguage('en')
+              setVisible(false)
+            }}>English</span></li>
+          </ul>}
+        >
+          <span style={{ cursor: 'pointer' }} onClick={() => setVisible(!visible)}>{lang === 'cn' ? '中文' : 'English'}</span>
+        </Popover>
+      </div>
       <div className="logo">
         <img src={Logo} alt="" />
       </div>
@@ -55,15 +90,15 @@ function SignIn() {
       </div>
       {selectIndex === 0 && <EmailForm></EmailForm>}
       {selectIndex === 1 && <PhoneForm></PhoneForm>}
-      <div className="to-download" onClick={()=> navigate("/Download")}>
+      <div className="to-download">
-        <p>{t("If you already have an account")}</p>
+        <p style={{ color: '#999999' }}>{t("If you already have an account")}</p>
-        <p>{t("download the APP directly")}</p>
+        <p onClick={() => navigate("/Download")}>{t("download the APP directly")}</p>
       </div>
       <div className="terms-service">
         <p>{t("Continuing to represent you in agreeing to our")}</p>
         <p>
-          <span>{t("Terms of Service")}</span> {t("and")}{" "}
+          <span><a target="_blank" href="https://lm0-1.gitbook.io/terms-of-service/">{t("Terms of Service")}</a></span> {t("and")}{" "}
-          <span>{t("Privacy Policy")}</span>
+          <span><a target="_blank" href="https://lm0-1.gitbook.io/privacy-policy/">{t("Privacy Policy")}</a></span>
         </p>
       </div>
     </div>