Branch2

frontend/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

frontend/src/pages/Login.jsx

@@ -1,9 +1,25 @@
-import React from 'react'
+import "./Login.css";
 
-const Login = () => {
+function Login() {
   return (
-    <div>Login</div>
-  )
+    <div className="container">
+      <form className="login-form">
+
+        <h2>Login</h2>
+
+        <label>Email</label>
+        <input type="email" placeholder="Enter email" />
+
+        <label>Password</label>
+        <input type="password" placeholder="Enter password" />
+
+        <button type="submit">Login</button>
+
+        <p>Don't have an account? <a href="#">Create Account</a></p>
+
+      </form>
+    </div>
+  );
 }
 
-export default Login
+export default Login;

frontend/src/pages/login.css

@@ -0,0 +1,56 @@
+.container{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height:100vh;
+  background:aliceblue;
+}
+
+.login-form{
+  background:white;
+  padding:25px;
+  width:300px;
+  border:1px solid #ccc;
+  border-radius:10px;
+}
+
+.login-form h2{
+  text-align:center;
+  margin-bottom:20px;
+  font-family:'Times New Roman', Times, serif;
+}
+
+.login-form label{
+  display:block;
+  margin-top:10px;
+  font-weight: 500;
+}
+
+.login-form input{
+  width:100%;
+  padding:8px;
+  margin-top:5px;
+  border:1px solid #ccc;
+  border-radius:20px;
+}
+
+.login-form button{
+  width:100%;
+  margin-top:15px;
+  padding:8px;
+  background:blue;
+  color:white;
+  border:none;
+  border-radius:20px;
+  cursor:pointer;
+}
+
+.login-form button:hover{
+  background:blue;
+}
+
+.login-form p{
+  text-align:center;
+  margin-top:10px;
+  font-size:14px;
+}