style(login): styles the login page

package.json

@@ -71,6 +71,6 @@
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
     "sass": "^1.68.0",
-    "typescript": "^5.2.2"
+    "typescript": "^4.9.5"
   }
 }

src/features/login/index.scss

@@ -0,0 +1,61 @@
+.login_wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+    position: absolute;
+    z-index: -2;
+    top: -6vh;
+}
+
+.hero_content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    row-gap: 5vh;
+}
+
+.hero_content h1 {
+    color: rgba(255, 255, 255, 0.80);
+    font-family: Montserrat;
+    font-size: 59.815px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.hero_content h3 {
+    color: rgba(223, 223, 223, 0.80);
+    text-align: center;
+    font-family: Poppins;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.hero_content button {
+    display: flex;
+    width: 372px;
+    height: 81px;
+    padding: 20px 0px 20px 30px;
+    align-items: center;
+    gap: 20px;
+    flex-shrink: 0;
+    border-radius: 14px;
+    border: 0.8px solid var(--Button, #402AA4);
+    background: #402AA4;
+    color: #ADADFF;
+    font-family: Poppins;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+
+.hero_image img {
+    height: 105vh;
+}

src/features/login/index.tsx

@@ -1,58 +1,51 @@
-
-
 import { useEffect } from 'react';
 import { CLIENT_ID } from '../../envConstants';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { login } from 'app/api/login';
 import { useQuery } from 'react-query';
-import {getUser } from 'app/api/user';
-
-
-
+import { getUser } from 'app/api/user';
+import heroImg from 'app/assets/images/login2.png';
+import github from 'app/assets/images/github.png';
+import './index.scss';
 const Login = () => {
-  const [searchParam, ] = useSearchParams();
+  const [searchParam] = useSearchParams();
   const navigate = useNavigate();
 
-   const token=localStorage.getItem('token')
-   const checklogin=async()=>{
-    if(token!=null){
-     try{
-      const userData= await getUser(token);
+  const token = localStorage.getItem('token');
+  const checklogin = async () => {
+    if (token != null) {
+      try {
+        const userData = await getUser(token);
 
-       navigate('/')
-     }catch(e){
-       navigate('/login')
-     }
-
+        navigate('/');
+      } catch (e) {
+        navigate('/login');
+      }
     }
-   }
+  };
 
-  useEffect(()=>{
-         checklogin()
-  },[])
-
-
+  useEffect(() => {
+    checklogin();
+  }, []);
 
-  const loginFunc= async()=>{
-
-      if(searchParam.get('code')!==null){
-        console.log("hello")
-        const code:string= searchParam.get('code')!;
-        const loginData= await login(code);
-        const token= loginData.data.token
-        localStorage.setItem('token',token)
-        navigate("/")
-      }
-
-  }
+  const loginFunc = async () => {
+    if (searchParam.get('code') !== null) {
+      console.log('hello');
+      const code: string = searchParam.get('code')!;
+      const loginData = await login(code);
+      const token = loginData.data.token;
+      localStorage.setItem('token', token);
+      navigate('/');
+    }
+  };
 
-  const {isError}=useQuery({
-    queryFn: ()=>loginFunc(),
-    queryKey:"loginData"
-  })
+  const { isError } = useQuery({
+    queryFn: () => loginFunc(),
+    queryKey: 'loginData',
+  });
 
-  if(isError){
-     navigate("/login")
+  if (isError) {
+    navigate('/login');
   }
 
   function loginWithGithub() {
@@ -62,8 +55,21 @@ const Login = () => {
   }
 
   return (
-    <div>
-      <button onClick={loginWithGithub}>Login Witth Github</button>
+    <div className='login_wrapper'>
+      <div className='hero_image'>
+        <img src={heroImg} alt='' />
+      </div>
+      <div className='hero_content'>
+        <h1>ACTIVITY LEADERBOARD</h1>
+        <h3>
+          Track your progress, healthy competition in organization others, and
+          unleash your GitHub potential"
+        </h3>
+
+        <button onClick={loginWithGithub}>
+          <img src={github} alt='' /> Login Witth Github
+        </button>
+      </div>
     </div>
   );
 };