Connect to signup route

src/pages/landing_page.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { IconCrossStroked } from "@douyinfe/semi-icons";
 import logo from "../assets/logo_light_46.png";
@@ -6,6 +6,10 @@ import logo from "../assets/logo_light_46.png";
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
 
+  useEffect(()=>{
+    document.title = "drawDB | Online database diagram editor and SQL generator"
+  })
+
   return (
     <div>
       {showSurvey && (
@@ -48,7 +52,7 @@ export default function LandingPage() {
             </Link>
             <Link
               to="/signup"
-              className="px-5 py-2.5 bg-[#386b8f] hover:bg-[#4e8bb6] text-white font-semibold rounded-md"
+              className="px-6 py-3 bg-[#386b8f] hover:bg-[#4e8bb6] text-white font-semibold rounded-md"
             >
               Sign up
             </Link>

src/pages/signup.jsx

@@ -4,6 +4,7 @@ import logo from "../assets/logo_light_46.png";
 import ReCAPTCHA from "react-google-recaptcha";
 import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
 import { Banner } from "@douyinfe/semi-ui";
+import axios from "axios";
 
 export default function SignUp() {
   const [formValues, setFormValues] = useState({
@@ -21,7 +22,18 @@ export default function SignUp() {
       [e.target.name]: e.target.value,
     }));
 
-  const onSubmit = () => console.log(formValues);
+  const onSubmit = async () => {
+    await axios
+      .post(`${process.env.REACT_APP_BACKEND_URL}/signup`, {
+        username: formValues.username,
+        email: formValues.email,
+        password: formValues.password,
+      })
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {});
+  };
 
   useEffect(() => {
     document.title = "Create account | drawDB";
@@ -29,8 +41,8 @@ export default function SignUp() {
 
   return (
     <div className="grid grid-cols-5 h-screen select-none">
-      <div className="bg-indigo-300 col-span-3 overflow-y-hidden"></div>
+      <div className="bg-indigo-300 col-span-3 sm:hidden md:hidden lg:col-span-2 overflow-y-hidden"></div>
-      <div className="col-span-2 flex flex-col justify-center items-center my-6">
+      <div className="col-span-2 lg:col-span-3 sm:col-span-full md:col-span-full flex flex-col justify-center items-center my-6 mx-2">
         <Link to="/">
           <img src={logo} alt="logo" className="mx-auto h-[38px]" />
         </Link>
@@ -139,7 +151,7 @@ export default function SignUp() {
           </div>
           <button className="w-full px-3 py-2.5 mt-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
             Google
-          </button>{" "}
+          </button>
           <button className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
             Github
           </button>