Replace welcome screen with login form

Author: Uttam Singh

frontend/src/pages/Login.jsx

@@ -1,25 +1,92 @@
-import React from "react";
+import React, { useState } from "react";
 import logo from "../assets/logo.png";
+import "./Login.css";
 
 export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Replace this with your backend API call later
+    if (email === "[email protected]" && password === "password123") {
+      window.location.href = "/dashboard";
+    } else {
+      alert("Invalid credentials");
+    }
+  };
+
   return (
     <div
       style={{
-        textAlign: "center",
-        marginTop: "80px",
-        fontFamily: "Arial, sans-serif",
-        color: "#0047AB",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        backgroundColor: "#f5f9ff",
       }}
     >
-      {/* ✅ Logo */}
-      <img
-        src={logo}
-        alt="Edme Insurance Logo"
-        style={{ width: "120px", height: "auto", marginBottom: "20px" }}
-      />
+      <img src={logo} alt="Company Logo" style={{ width: "120px", marginBottom: "20px" }} />
+      <h1 style={{ color: "#004aad" }}>Welcome to FAT-EIBL</h1>
+      <p style={{ color: "#003b80", marginBottom: "30px" }}>
+        Finance Audit Tracker – Edme Insurance Brokers Limited
+      </p>
 
-      <h1>Welcome to FAT-EIBL</h1>
-      <p>Finance Audit Tracker – Edme Insurance Brokers Limited</p>
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          background: "white",
+          padding: "30px",
+          borderRadius: "12px",
+          boxShadow: "0px 2px 10px rgba(0,0,0,0.1)",
+          width: "320px",
+          textAlign: "center",
+        }}
+      >
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={{
+            width: "100%",
+            padding: "10px",
+            marginBottom: "15px",
+            border: "1px solid #ccc",
+            borderRadius: "8px",
+          }}
+          required
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={{
+            width: "100%",
+            padding: "10px",
+            marginBottom: "20px",
+            border: "1px solid #ccc",
+            borderRadius: "8px",
+          }}
+          required
+        />
+        <button
+          type="submit"
+          style={{
+            backgroundColor: "#004aad",
+            color: "white",
+            border: "none",
+            padding: "10px 20px",
+            borderRadius: "8px",
+            cursor: "pointer",
+            width: "100%",
+          }}
+        >
+          Login
+        </button>
+      </form>
     </div>
   );
 }