added js and logic

Frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

Frontend/src/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import Body from './components/Body'
-//  import Header from './components/Header'
+import Body from './components/Login'
+
 
 
 const App = () => {

Frontend/src/components/Login.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { SiValorant } from "react-icons/si";
+import { SiPubg } from "react-icons/si";
+import Header from './Header';
+const Body = () => {
+
+  const [isLogin, setIslogin] = useState(false);
+  const LoginHandler = () =>{
+    setIslogin (!isLogin);
+  }
+  const [Fullname,setFullname]=useState("");
+  const [Email,setEmail]=useState("");
+  const [Password,setPassword]=useState("");
+  const getInputData=(e)=>{
+e.preventDefault();
+console.log(Email,Password,Fullname);
+  }
+  return (
+    <div>
+      <div className='body'>
+        <div className="page">
+        <Header/>
+
+     <form className="sign-in-box " onSubmit={getInputData}>
+       <h2 className="sign-in-box-heading text-3xl font-bold">{isLogin ? "LOGIN" : "SIGN UP"}</h2>
+       {!isLogin&&
+         <input
+         onChange={(e)=>setFullname(e.target.value)}
+         className="input-text"
+         type="text"
+         placeholder="USERNAME"
+         name="username"
+         value={Fullname}
+       />
+       }
+
+       <input
+         className="input-text"
+         type="email"
+         placeholder="Email"
+         name="username"
+         value={Email}
+         onChange={(e)=>setEmail(e.target.value)}
+       />
+         <input
+         className="input-text"
+         onChange={(e)=>setPassword(e.target.value)}
+         type="password"
+         placeholder="PASSWORD"
+         name="username"
+         value={Password}
+       />
+       <input type="checkbox" id="checkbox" name="scales" checked />
+       <label for="checkbox">Stay Signed In</label>
+       <button className="sign-in-button" >Continue</button>
+       <div className="sign-in-div">
+       <p className="text">{isLogin ? "Create a new account" : "Already Have a account "}</p>
+         <p className="text-yellow-800 mr-11 cursor-pointer " onClick={LoginHandler}>{isLogin ? "SIGN-IN" : "login"}</p>
+
+       </div>
+       <div>
+         <div className="line"></div>
+         <div className="line"></div>
+         <div className="line"></div>
+         <div className="line"></div>
+       </div>
+       <p className="end-text">Tournament Supported Games</p>
+       <div className = "logo flex  justify-between ml-5 mr-5">
+         <div><SiValorant size={25} /></div>
+         <div>< SiPubg size={25} /></div>
+         <div><SiValorant size={25} /></div>
+         <div><SiValorant size={25} /></div>
+       </div>
+     </form>
+
+
+     <footer className="page-footer">
+       <ul className="footer-list">
+         <li className="list-item">CONTACT US</li>
+         <li className="list-item">TERMS OF SERVICE</li>
+         <li className="list-item">PRIVACY POLICY</li>
+       </ul>
+     </footer>
+   </div>
+    </div>
+    </div>
+  )
+}
+
+export default Body

Frontend/src/index.css

@@ -8,7 +8,7 @@
 }
 
 .body{
-    background-image: url("https://cdn.discordapp.com/attachments/1241785032725631079/1257564641433878568/vite.png?ex=6684ddd6&is=66838c56&hm=06cdcfad5d2e4f69e071e0856571babec173b898564b3d73533184c869400a65&");
+    background-image: url("../public/vite.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
@@ -17,20 +17,17 @@
     width: 100vw;
     margin-bottom: 0px;
 }
-img{
-    width : 100%;
-    height : 100%;
-}
+
        /* sign in box */
 
 .sign-in-box{
     background-color: white;
-    height : 60vh;
+    height : 65vh;
     width : 23vw;
     border-radius : 20px;
     padding : 20px;
     position : absolute;
-    top : 20%;
+    top : 15%;
     left : 65%;
     opacity : 90%;
 }
@@ -40,7 +37,7 @@ img{
 }
 .input-text{
     width : 90%;
-    margin: 15px 12px;
+    margin: 10px 10px;
     height : 35px;
     border-radius : 10px;
     text-align: center;