add forgot password page

src/App.jsx

@@ -12,6 +12,7 @@ import {Faq} from "./components/Faq";
 import AboutUs from "./pages/AboutUs";
 import Register from "./pages/Register";
 import Login from "./pages/Login";
+import ForgotPassword from "./pages/forgot-password";
 
 function App() {
   return (
@@ -28,6 +29,7 @@ function App() {
         <Route path="*" element={<NotFound />} />
         <Route path="/Faq" element={<Faq />} />
         <Route path="/contact" element={<ContactUs />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
       </Routes>
     </BrowserRouter>
   );

src/main.jsx

@@ -6,4 +6,5 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
+
 )

src/pages/Login.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import "../styles/login.css";
 import Google from "../assets/google.png";
-import logo from "../assets/bg-register.jpg";
 import show from "../assets/hide-password.png";
 import eye from "../assets/show-password.png";
-import Lock from "../assets/forgot-password.png";
-import { Link } from "react-router-dom";
+import "./forgot-password.jsx"
 
 const Login = () => {
   const [passwordVisible, setPasswordVisible] = useState(false);
@@ -29,8 +28,7 @@ const Login = () => {
                 <input
                   className="w-full border border-black rounded-xl p-3 mt-1 bg-transparent"
                   placeholder="Enter your email"
-                  type= "text"
-
+                  type="text"
                 />
               </div>
               <div className="mt-4 p">
@@ -44,7 +42,7 @@ const Login = () => {
                   className="eye-icon-login text-white"
                   onClick={togglePasswordVisibility}
                 >
-                  <img src={passwordVisible ? show : eye} alt="" />
+                  <img src={passwordVisible ? show : eye} alt="Toggle Password Visibility" />
                 </i>
               </div>
               <div className="mt-8">
@@ -55,9 +53,9 @@ const Login = () => {
                       Remember me
                     </label>
                   </div>
-                  <button className="text-base text-black fp">
+                  <Link to="/forgot-password" className="text-base text-black fp">
                     Forget password
-                  </button>
+                  </Link>
                 </div>
               </div>
               <div className="mt-8 flex flex-col gap-y-4">

src/pages/Register.jsx

@@ -65,9 +65,9 @@ const Register = () => {
                       Remember me
                     </label>
                   </div>
-                  <button className="text-base text-black fp">
+                  <Link to="/forgot-password" className="text-base text-black fp">
                     Forget password
-                  </button>
+                  </Link>
                 </div>
               </div>
               <div className="mt-8 flex flex-col gap-y-4">

src/pages/forgot-password.css

@@ -0,0 +1,65 @@
+.forgot-password {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #3a3d98, #9b31f9);
+  }
+
+  .forgot-password-box {
+    background: #1d1e3c;
+    border-radius: 15px;
+    padding: 40px;
+    text-align: center;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .forgot-password-content {
+    max-width: 400px;
+    margin: auto;
+  }
+
+  .lock-icon {
+    width: 50px;
+    margin-bottom: 20px;
+  }
+
+  .forgot-password-title {
+    color: #fff;
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  .forgot-password-subtitle {
+    color: #bbb;
+    margin-bottom: 30px;
+  }
+
+  .forgot-password-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .forgot-password-input {
+    padding: 15px;
+    border: none;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    font-size: 16px;
+  }
+
+  .forgot-password-button {
+    padding: 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #00aaff;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .forgot-password-button:hover {
+    background-color: #008ecc;
+  }
+

src/pages/forgot-password.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "./forgot-password.css";
+import Lock from "../assets/forgot-password.png"; // Ensure this asset is available
+
+const ForgotPassword = () => {
+  return (
+    <div className="forgot-password">
+      <div className="forgot-password-box">
+        <div className="forgot-password-content">
+          <img src={Lock} alt="Lock Icon" className="lock-icon" />
+          <h1 className="forgot-password-title">FORGOT PASSWORD?</h1>
+          <p className="forgot-password-subtitle">
+            You can reset your Password here
+          </p>
+          <form className="forgot-password-form">
+            <input
+              className="forgot-password-input"
+              type="email"
+              placeholder="Email address"
+            />
+            <button className="forgot-password-button" type="submit">
+              SEND MY PASSWORD
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;