Gogo/branch

src/App.jsx

@@ -1,21 +1,18 @@
-//how to use the images from the assets.js file
-//import the directory below
-import { assets } from "./assets/assets";
+import { Routes, Route } from 'react-router-dom'
+import PasswordReset from './pages/PasswordReset';
+import Form from './components/form';
 
 
 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>
+      <Routes>
+          {/* reset-password */}
+          <Route path='/' element={<PasswordReset />}/>
+      </Routes>
+    </div>
   )
 }
 

src/components/Form.jsx

@@ -0,0 +1,55 @@
+
+
+function Form() {
+
+    return (
+        <div className='lg:flex items-center justify-center w-full'>
+            <div className='space-y-10'>
+                <div className='text-center  lg:w-[150%]'>
+                    <h2 className='font-bold text-2xl'>Forgot Password</h2>
+                    <p>No worries, we’ll send you a reset link.</p>
+                </div>
+                <form>
+                    <div className="mb-5">
+                        <label
+                            className="block text-sm text-gray-900 mb-1 font-bold"
+                            htmlFor="email"
+                        >
+                            New password
+                        </label>
+                        <input
+                            className="w-full px-3 py-2 h-13 rounded focus:outline-none border border-gray-300 lg:w-[150%]"
+                            type="New password"
+                            name=""
+                            placeholder="Email"
+                            required
+                        />
+                    </div>
+                    <div className="mb-5">
+                        <label
+                            className="block text-sm text-gray-900 mb-1 font-bold"
+                            htmlFor=""
+                        >
+                            Confirm new password
+                        </label>
+                        <input
+                            className=" w-full px-3 py-2 h-13 rounded focus:outline-none border border-gray-300 lg:w-[150%]"
+                            type="password"
+                            name=""
+                            placeholder="Confirm new password"
+                            required
+                        />
+                    </div>
+                    <button
+                        className="w-full bg-[#02402D] text-white py-4 rounded-md font-bold shadow-2xl lg:w-[150%]"
+                        type="submit"
+                    >
+                        Reset Password
+                    </button>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default Form;

src/pages/PasswordReset.jsx

@@ -0,0 +1,29 @@
+import {assets} from '../assets/assets'
+import Form from '../components/form';
+
+function PasswordReset(){
+    return (
+        <div className='flex items-center min-h-screen justify-center'>
+            <div className='w-full px-8 py-10 grid lg:grid-cols-2 sm:w-2/3 md:w-2/3 lg:w-full lg:px-20 xl:px-50'>
+                <div className='hidden bg-[#F0F2F5] py-10  lg:inline-block mx-auto'>
+                    <img src={assets.agriconLogo} alt="agricon" className='w-32 mx-auto pb-5'/>
+                    <img src={assets.authImage} alt="image" className='w-[80%] mx-auto'/>
+                    <div className=' mt-4 text-center'>
+                        <h6 className='font-bold text-lg'>Find Nearby Infrastructure</h6>
+                        <p className='text-[12px]'>Discover dryers, cold rooms, and processing units close to your farm.</p>
+                        <div className='flex items-center justify-between mx-6 mt-8'>
+                            <span className='border-3 border-[#010E0A] border-b w-18'></span>
+                            <span className='border-3 border-[#A7E0CF] border-b w-18'></span>
+                            <span className='border-3 border-[#A7E0CF] border-b w-18'></span>
+                            <span className='border-3 border-[#A7E0CF] border-b w-18'></span>
+                            <span className='border-3 border-[#A7E0CF] border-b w-18'></span>
+                        </div>
+                    </div>
+                </div>
+                <Form />
+            </div>       
+        </div>
+    )
+}
+
+export default PasswordReset;