From 811908558eef853fa97659e3388a261541e040cf Mon Sep 17 00:00:00 2001
From: Afinjuomo <afinjuomooluwatunde17@gmail.com>
Date: Fri, 2 Feb 2024 01:53:26 +0100
Subject: [PATCH 1/3] login page design

---
 apps/Client/src/App.tsx                   |  2 +
 apps/Client/src/pages/Login/LoginPage.tsx | 99 +++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 apps/Client/src/pages/Login/LoginPage.tsx

diff --git a/apps/Client/src/App.tsx b/apps/Client/src/App.tsx
index 83114b4..3b1bb44 100644
--- a/apps/Client/src/App.tsx
+++ b/apps/Client/src/App.tsx
@@ -3,6 +3,7 @@ import "./index.css";
 import HomePage from "./pages/HomePage";
 import RequestRiderPage from "./pages/riderForm/RequestRiderPage";
 import RiderSignUpPage from "./pages/Auth/Rider/SignUp";
+import LoginPage from "./pages/Login/LoginPage";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/request-rider" element={<RequestRiderPage />} />
         <Route path="/signup/rider" element={<RiderSignUpPage />} />
+        <Route path="/login" element={<LoginPage />} />
       </Routes>
     </Router>
   );
diff --git a/apps/Client/src/pages/Login/LoginPage.tsx b/apps/Client/src/pages/Login/LoginPage.tsx
new file mode 100644
index 0000000..a11a1d6
--- /dev/null
+++ b/apps/Client/src/pages/Login/LoginPage.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+// Import your logo and button here
+import riderPhoto from "../Auth/Images/image 4.png";
+import Button from '../../components/Button';
+import riderLogo from "../Auth/Images/Logo.png";
+
+const LoginPage: React.FC = () => {
+  const { register, handleSubmit } = useForm();
+
+  const onSubmit = (data: unknown) => {
+    // Handle the logic for requesting a rider using the form data
+    console.log('Requesting rider with data:', data);
+    // Add additional logic such as sending a request to your backend
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row h-screen bg-white">
+      {/* Left Half: Image with Text Overlay */}
+      <div className="w-full hidden md:flex md:w-4/6 relative bg-cover bg-center h-80 md:h-screen overflow-hidden">
+        <img src={riderPhoto} alt="bikeman" className="w-full h-full object-cover" />
+        <div className="absolute inset-0 flex items-center justify-center text-white text-center bg-black bg-opacity-50">
+          <div>
+          <p className="text-lg md:text-xl lg:text-4xl font-bold mt-[720px]">
+              Delivery service just got <br />
+              easier, elegant & superb <br />
+              <span style={{ marginLeft: '-15rem'}}>with</span> <span style={{ color: 'orange' }}>Ryder</span>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Half: Form */}
+      <div className="w-full md:w-1/2 p-4 md:p-8 flex flex-col justify-center">
+        {/* Logo and Title */}
+        <div className="text-center mb-40">
+          <img src={riderLogo} alt="Logo" className="w-40 mx-auto mt-10 ml-10" />
+        </div>
+
+
+        {/* Form */}
+        <form onSubmit={handleSubmit(onSubmit)} className="max-w-md mx-auto mb-60">
+        <div className="text-xl font-bold pb-10 mr-40">Login</div>
+
+          <div className="mb-3 relative">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
+              Email
+            </label>
+            <input
+              {...register('email')}
+              className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
+              id="email"
+              type="text"
+              placeholder="Enter your Email"
+              style={{ width: '110%' }} // Adjust the percentage as needed
+
+            />
+            
+          </div>
+
+          <div className="mb-3 relative">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
+              Password
+            </label>
+            <input
+              {...register('password')}
+              className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              style={{ width: '110%' }} // Adjust the percentage as needed
+
+            />
+          </div>
+
+          {/* Forgot Password */}
+          <div className="mb-3 text-center mr-40">
+            <a href="#" className="text-blue-500 hover:underline">
+              Forgot Password?
+            </a>
+          </div>
+
+          {/* Login Button */}
+          <div>
+            <Button type="submit">Log In</Button>
+          </div>
+          <div className="mt-7 text-center">
+            <span>
+              Don’t have an account? <span style={{ color: 'orange' }}>Create account</span>
+            </span>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

From 9979a736244f3b1ddfcbcc838d501da7031a243d Mon Sep 17 00:00:00 2001
From: Afinjuomo <afinjuomooluwatunde17@gmail.com>
Date: Fri, 2 Feb 2024 02:03:57 +0100
Subject: [PATCH 2/3] updated button

---
 apps/Client/src/components/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/Client/src/components/Button.tsx b/apps/Client/src/components/Button.tsx
index 1e58b99..f87c381 100644
--- a/apps/Client/src/components/Button.tsx
+++ b/apps/Client/src/components/Button.tsx
@@ -8,7 +8,7 @@ interface ButtonProps {
 
 const Button: React.FC<ButtonProps> = ({ onClick, type = 'button', children }) => {
   return (
-    <button type={type} onClick={onClick} className="bg-[#FB8500] w-full text-white py-2 px-4 hover:bg-[#FB8500]">
+    <button type={type} onClick={onClick} className="bg-[#FB8500] w-full text-white py-2 px-4 hover:bg-[#FB8500]" style={{ width: '110%'}}>
       {children}
     </button>
   );

From 746e86a2c66b6d8eb247ca434669bc3ffed699d4 Mon Sep 17 00:00:00 2001
From: Afinjuomo <afinjuomooluwatunde17@gmail.com>
Date: Fri, 2 Feb 2024 12:48:43 +0100
Subject: [PATCH 3/3] added email and password icons

---
 apps/Client/src/components/Button.tsx     |  2 +-
 apps/Client/src/pages/Login/LoginPage.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/Client/src/components/Button.tsx b/apps/Client/src/components/Button.tsx
index f87c381..e18cc85 100644
--- a/apps/Client/src/components/Button.tsx
+++ b/apps/Client/src/components/Button.tsx
@@ -8,7 +8,7 @@ interface ButtonProps {
 
 const Button: React.FC<ButtonProps> = ({ onClick, type = 'button', children }) => {
   return (
-    <button type={type} onClick={onClick} className="bg-[#FB8500] w-full text-white py-2 px-4 hover:bg-[#FB8500]" style={{ width: '110%'}}>
+    <button type={type} onClick={onClick} className="bg-[#FB8500] w-full text-white border rounded-md py-2 px-4 hover:bg-[#FB8500]" style={{ width: '110%'}}>
       {children}
     </button>
   );
diff --git a/apps/Client/src/pages/Login/LoginPage.tsx b/apps/Client/src/pages/Login/LoginPage.tsx
index a11a1d6..bacce11 100644
--- a/apps/Client/src/pages/Login/LoginPage.tsx
+++ b/apps/Client/src/pages/Login/LoginPage.tsx
@@ -5,6 +5,8 @@ import { useForm } from 'react-hook-form';
 import riderPhoto from "../Auth/Images/image 4.png";
 import Button from '../../components/Button';
 import riderLogo from "../Auth/Images/Logo.png";
+import Icon from "../Auth/Images/Icon (1).png";
+import Vector from "../Auth/Images/Vector (1).png"
 
 const LoginPage: React.FC = () => {
   const { register, handleSubmit } = useForm();
@@ -49,14 +51,15 @@ const LoginPage: React.FC = () => {
             </label>
             <input
               {...register('email')}
-              className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
+              className="w-full px-10 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
               id="email"
               type="text"
               placeholder="Enter your Email"
               style={{ width: '110%' }} // Adjust the percentage as needed
 
             />
-            
+                          <img src={Icon} alt="email icon" className="absolute left-2 top-10" />
+
           </div>
 
           <div className="mb-3 relative">
@@ -65,13 +68,15 @@ const LoginPage: React.FC = () => {
             </label>
             <input
               {...register('password')}
-              className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
+              className="w-full px-10 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
               id="password"
               type="password"
               placeholder="Enter your password"
               style={{ width: '110%' }} // Adjust the percentage as needed
 
             />
+             <img src={Vector} alt="password icon" className="absolute left-2 top-10" />
+
           </div>
 
           {/* Forgot Password */}