responsive forgot password

src/App.jsx

@@ -1,23 +1,13 @@
 //how to use the images from the assets.js file
 //import the directory below
-import { assets } from "./assets/assets";
-
+import ForgotPassword from "./pages/ForgotPassword";
 
 function App() {
-
-
   return (
-    <div className='text-red-700 text-3xl flex items-center justify-center min-h-screen'>
-      <div>
-          <div>
-      {/* render it this way in your various components */}
-              <img src={assets.agriconLogo} alt="agriCon"/>
-          </div>
-          <div>Welcome to Agricon</div>
-          </div>
-      </div>
-  )
+    <div>
+      <ForgotPassword />
+    </div>
+  );
 }
 
-
 export default App;

src/components/Form.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import arrowBack from "../assets/arrowBack.png"
+
+export default function Form() {
+    const handleSubmitBtn = (e)=>{
+        e.preventDefault()
+      }
+  return (
+    <div>
+        <section className="flex flex-col justify-center p-10 rounded-md h-full max-w-[500px] w-full mx-auto lg:mx-0 ">
+        <div className="mb-8 text-center">
+          <h1 className="text-[28px] md:text-[32px] font-semibold">
+            Forgot Password
+          </h1>
+          <p className="text-[16px] text-[#000000] font-normal">
+            No worries, we’ll send you a reset link.
+          </p>
+        </div>
+
+        <form className="flex flex-col gap-4 w-full">
+          <label className="text-[16px] text-[#000000] font-medium">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            placeholder="johndoe@gmail.com"
+            className="px-4 py-3 placeholder-[#98A2B3] border text-black border-[#E4E7EC] rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+
+          <button
+            type="submit"
+            onClick={handleSubmitBtn}
+            className="bg-[#02402D] h-[56px] cursor-pointer rounded-md text-white hover:bg-[#336153] transition"
+          >
+            Send Reset Link
+          </button>
+
+          <div className="mt-4 flex justify-center items-center gap-2 cursor-pointer">
+            <img src={arrowBack} alt="arrowback" />
+            <span className="text-[16px] text-[#010E0A] font-medium">
+              Back to Log in
+            </span>
+          </div>
+        </form>
+      </section>
+    </div>
+  )
+}

src/pages/ForgotPassword.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import logo from "../assets/agriconLogo.png";
+import companyImage from "../assets/authImage.png";
+import lightBar from "../assets/LightBar.png";
+import darkBar from "../assets/darkBar.png";
+import Form from "../components/Form.jsx";
+
+export default function ForgotPassword() {
+  const [isActive, setIsActive] = useState(1);
+
+  return (
+    <main className="min-h-screen grid grid-cols-1 lg:grid-cols-2  px-6 py-12 md:px-16 md:py-16 items-center">
+      {/* Left Panel */}
+      <section className="flex flex-col items-center justify-center bg-[#F0F2F5] p-8 md:p-[75px] rounded-md w-full max-w-[600px] mx-auto">
+        <header className="mb-8">
+          <img src={logo} alt="logo" className="w-[140px]" />
+        </header>
+
+        <div className="mb-8">
+          <img
+            src={companyImage}
+            alt="companyimage"
+            className="w-full max-w-[441px] h-auto object-contain"
+          />
+        </div>
+
+        <footer className="text-center space-y-4 w-full">
+          <div>
+            <h2 className="text-lg font-semibold text-[#010E0A]">
+              Find Nearby Infrastructure
+            </h2>
+            <p className="text-sm text-[#010E0A]">
+              Discover dryers, cold rooms, and processing units close to your
+              farm.
+            </p>
+          </div>
+
+          {/* Had to reduce the width of the bar in response to the screen sizes */}
+
+          <div className=" flex gap-2 justify-center  mt-10">
+            {Array.from({ length: 5 }, (_, i) => i + 1).map((num) => {
+              const active = num === isActive;
+              return (
+                <img
+                  key={num}
+                  src={active ? darkBar : lightBar}
+                  onClick={() => setIsActive(num)}
+                  className="cursor-pointer w-[35px] md:w-[82px] lg:w-[55px] xl:w-[82px]"
+                />
+              );
+            })}
+          </div>
+        </footer>
+      </section>
+
+      {/* Right Panel */}
+      <Form />
+    </main>
+  );
+}