nice log in page

pages/index.js

@@ -61,11 +61,18 @@ export default function Home() {
             </span> */}
             <button
               onClick={handleLogin}
-              className="ml-auto text-gray-500 mr-2 hidden md:block"
+              className="ml-auto text-gray-500  hidden md:block"
             >
               Log In
             </button>
 
+            <button
+              onClick={handleLogin}
+              className="rounded font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
+            >
+              <span>Sign Up</span>
+            </button>
+
             {getStartedButton}
           </span>
         </div>

pages/teams/login.tsx

@@ -1,28 +1,68 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react';
-import {FaGoogle} from "react-icons/fa";
-import { useAuth } from '../../contexts/authContext'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { FaArrowLeft } from "react-icons/fa";
+import { FcGoogle } from "react-icons/fc";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Login() {
-  const { currUser, signInGoogle } = useAuth()
-  const router = useRouter()
+  const { currUser, signInGoogle } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     // if auth, go to dashboard
     if (currUser) {
-      console.log('already logged in, redirecting to router')
-      router.push('/teams')
+      console.log("already logged in, redirecting to router");
+      router.push("/teams");
     }
-  }, [currUser])
+  }, [currUser]);
 
   return (
-    <div className="container mx-auto max-w-screen-sm bg-white bg-opacity-80 mt-20 p-10 rounded-lg shadow-lg flex flex-col items-start">
-      <button onClick={signInGoogle} className='mx-auto text-md text-sky-500 py-2 px-5 bg-gray-200 rounded flex flex-row items-center space-x-2 shadow-lg'>
-        <FaGoogle />
-        <span>Continue with Google</span>
-      </button>
+    <>
+      <div className="h-screen w-screen flex flex-row">
+        {/* nice image on right side */}
+        <div
+          className="landing-page-bg bg-cover bg-no-repeat bg-center flex-1"
+          style={
+            {
+              // background: "url('/wallpapers/superhuman.jpg')",
+            }
+          }
+        ></div>
 
-      {JSON.stringify(currUser?.email)}
-    </div> 
-  )
-}
+        {/* signin modal */}
+        <div className="flex-1 bg-white bg-opacity-80 p-10 rounded-lg shadow-lg flex flex-col items-start justify-start">
+          {/* header */}
+          <div className="text-lg flex flex-row items-center space-x-2">
+            <FaArrowLeft
+              className="hover:cursor-pointer"
+              onClick={() => router.push("/")}
+            />{" "}
+          </div>
+
+          <div className="mx-auto my-auto flex flex-col items-center">
+            <button
+              onClick={signInGoogle}
+              className=" text-md text-sky-500 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 rounded flex flex-row items-center space-x-2"
+            >
+              <FcGoogle className="text-lg" />
+              <span>Continue with Google</span>
+            </button>
+            <span className="text-xs text-center mt-2 text-gray-300">
+              By continuing, you are agreeing <br></br>
+              to the{" "}
+              <a href="https://docs.google.com/document/d/1NRWN-6kDyOcADaUAQ-YWVHnz6i9ccGJ3/edit?usp=sharing&ouid=113470786690353109086&rtpof=true&sd=true">
+                terms and conditions
+              </a>{" "}
+              and{" "}
+              <a href="https://docs.google.com/document/d/1S3JsGqXgkriAsBOybXpVR0JJ4hiRkaNt/edit?usp=sharing&ouid=113470786690353109086&rtpof=true&sd=true">
+                privacy policy.
+              </a>
+            </span>
+          </div>
+
+          {JSON.stringify(currUser?.email)}
+        </div>
+      </div>
+    </>
+  );
+}