From a470eac307a73273d9c10c036b94aabf921250b6 Mon Sep 17 00:00:00 2001
From: shuvadeepmondal <121492365+shuvadeepmondal@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:54:59 +0530
Subject: [PATCH] feat:UI updated

---
 apps/frontend/src/components/auth/Forgot-Password.tsx | 6 +++---
 apps/frontend/src/components/auth/Login.tsx           | 8 ++++----
 apps/frontend/src/components/auth/Register.tsx        | 8 ++++----
 apps/frontend/src/components/homepage/Hero.tsx        | 6 +++---
 apps/frontend/src/components/homepage/HeroCard.tsx    | 2 +-
 apps/frontend/src/components/homepage/HeroCard2.tsx   | 2 +-
 apps/frontend/src/components/homepage/HeroCard3.tsx   | 2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/frontend/src/components/auth/Forgot-Password.tsx b/apps/frontend/src/components/auth/Forgot-Password.tsx
index 4cc50f5..26ecb4b 100644
--- a/apps/frontend/src/components/auth/Forgot-Password.tsx
+++ b/apps/frontend/src/components/auth/Forgot-Password.tsx
@@ -13,8 +13,8 @@ export default function ForgotPassword(): JSX.Element {
   };
 
   return (
-    <main className="w-full h-screen flex dark:bg-slate-800">
-      <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[500px] sm:max-w-[900px] rounded-2xl">
+    <main className="w-full min-h-[120vh] flex dark:bg-slate-800">
+      <div className="grid grid-cols-1 md:grid-cols-2 m-auto px-6 py-5 h-[400px] sm:max-w-[850px] rounded-2xl dark:bg-slate-700 bg-white">
         <div className="w-full h-[450px] hidden md:block">
           <img className="w-full mt-4 ml-2 h-[380px]" src={log_img} alt="Forgot Password" />
         </div>
@@ -44,7 +44,7 @@ export default function ForgotPassword(): JSX.Element {
               />
             </div>
             <button
-              className="w-44 mt-7 ml-24 active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-3 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500 text-white poppins-extrabold"
+              className="w-44 mt-7 ml-[90px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-3 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500 text-white poppins-extrabold"
               key="1"
             >
               Update Password
diff --git a/apps/frontend/src/components/auth/Login.tsx b/apps/frontend/src/components/auth/Login.tsx
index 182d19c..61cb43c 100644
--- a/apps/frontend/src/components/auth/Login.tsx
+++ b/apps/frontend/src/components/auth/Login.tsx
@@ -19,14 +19,14 @@ export default function Login(): JSX.Element {
   };
 
   return (
-    <main className="w-full min-h-[80vh] flex dark:bg-slate-800">
-      <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[400px] sm:max-w-[800px] rounded-2xl dark:bg-slate-700 bg-white">
+    <main className="w-full min-h-[110vh] flex dark:bg-slate-800">
+      <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[450px] sm:max-w-[800px] rounded-2xl dark:bg-slate-700 bg-white">
         <div className="w-full h-[300px] hidden md:block">
           <img className="mt-12" src={log_img} alt="Login illustration" />
         </div>
         <div className="p-5 flex flex-col justify-around">
           <form onSubmit={handleClick}>
-            <h1 className="text-5xl ml-[110px] text-blue-500 font-medium mb-8">Login</h1>
+            <h1 className="text-4xl ml-[40px] font-medium mb-8 dark:text-white">Welcome<span className="text-blue-400"> Back!</span></h1>
             <div>
               <label className="poppins-medium ml-1 text-slate-600 dark:text-slate-300">Email Address</label>
               <input
@@ -48,7 +48,7 @@ export default function Login(): JSX.Element {
               />
             </div>
             <div className="ml-56">
-              <button className="mt-3 font-normal text-base text-blue-500">Forgot Password?</button>
+              <button className="mt-3 font-normal text-base text-blue-500"><Link to='/forgot-password'>Forgot Password?</Link></button>
             </div>
             <button
               className="ml-14 mt-3 w-[230px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500 text-white text-lg font-semibold poppins-extrabold"
diff --git a/apps/frontend/src/components/auth/Register.tsx b/apps/frontend/src/components/auth/Register.tsx
index 3127a0d..4db4583 100644
--- a/apps/frontend/src/components/auth/Register.tsx
+++ b/apps/frontend/src/components/auth/Register.tsx
@@ -26,18 +26,18 @@ export default function Register(): JSX.Element {
   };
 
   return (
-    <main className="w-full min-h-[80vh] flex dark:bg-slate-800">
-      <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[520px] sm:max-w-[900px] rounded-2xl dark:bg-slate-700 bg-white">
+    <main className="w-full min-h-[110vh] flex dark:bg-slate-800">
+      <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[620px] sm:max-w-[900px] rounded-2xl dark:bg-slate-700 bg-white">
         <div className="w-full h-[450px] hidden md:block">
           <img
-            className="w-full mt-[100px] ml-2 h-[380px]"
+            className="w-full mt-[130px] ml-2 h-[380px]"
             src={reg_img}
             alt="Register illustration"
           />
         </div>
         <div className="p-4 flex flex-col justify-around">
           <form onSubmit={handleClick}>
-            <h2 className="text-4xl font-medium text-center mb-8 mr-10">
+            <h2 className="text-4xl font-medium text-center mb-8 mr-14 dark:text-white">
               Create <span className="text-blue-600">Account</span>
             </h2>
             <div className="mt-3">
diff --git a/apps/frontend/src/components/homepage/Hero.tsx b/apps/frontend/src/components/homepage/Hero.tsx
index 786e165..42c98d3 100644
--- a/apps/frontend/src/components/homepage/Hero.tsx
+++ b/apps/frontend/src/components/homepage/Hero.tsx
@@ -3,10 +3,10 @@ import { HeroCard2 } from "./HeroCard2"
 import { HeroCard3 } from "./HeroCard3"
 const Hero = () => {
   return (
-    <section className="pt-8 mt-[100px] lg:mt-0 lg:pt-32 bg-[url('https://pagedone.io/asset/uploads/1691055810.png')] bg-center bg-cover">
+    <section className="pt-8 mt-[100px] lg:mt-0 lg:pt-32 bg-[url('https://pagedone.io/asset/uploads/1691055810.png')] dark:bg-slate-900 bg-center bg-cover">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative text-center">
         <div className="border border-blue-600 p-1 w-60 mx-auto rounded-full flex items-center justify-between mb-4">
-          <span className="font-inter text-xs font-medium text-gray-900 ml-3"
+          <span className="font-inter text-xs font-medium dark:text-white text-gray-900 ml-3"
           > Request Help</span>
           <a href="javascript:;" className="w-8 h-8 rounded-full flex justify-center items-center bg-blue-600">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -17,7 +17,7 @@ const Hero = () => {
           </a>
         </div>
         <h1
-          className="max-w-3xl mx-auto text-center font-manrope font-bold text-4xl text-gray-900 mb-5 md:text-5xl leading-[50px]">
+          className="max-w-3xl mx-auto text-center font-manrope dark:text-white font-bold text-4xl text-gray-900 mb-5 md:text-5xl leading-[50px]">
           {/* Control your Finances with our
             <span className="text-blue-600">Smart Tool </span> */}
 
diff --git a/apps/frontend/src/components/homepage/HeroCard.tsx b/apps/frontend/src/components/homepage/HeroCard.tsx
index a06c216..1a62d02 100644
--- a/apps/frontend/src/components/homepage/HeroCard.tsx
+++ b/apps/frontend/src/components/homepage/HeroCard.tsx
@@ -5,7 +5,7 @@ import img from '../../assets/sign_up.gif'
 export function HeroCard() {
   return (
     <CardContainer className="inter-var">
-      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-slate-900 dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
         <CardItem
           translateZ="50"
           className="text-3xl font-bold text-neutral-600 dark:text-white"
diff --git a/apps/frontend/src/components/homepage/HeroCard2.tsx b/apps/frontend/src/components/homepage/HeroCard2.tsx
index a95c7f8..161ad6a 100644
--- a/apps/frontend/src/components/homepage/HeroCard2.tsx
+++ b/apps/frontend/src/components/homepage/HeroCard2.tsx
@@ -5,7 +5,7 @@ import img from '../../assets/support.gif'
 export function HeroCard2() {
     return (
         <CardContainer className="inter-var">
-            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-slate-900 dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
                 <CardItem
                     translateZ="50"
                     className="text-3xl font-bold text-neutral-600 dark:text-white"
diff --git a/apps/frontend/src/components/homepage/HeroCard3.tsx b/apps/frontend/src/components/homepage/HeroCard3.tsx
index 501cece..23f6275 100644
--- a/apps/frontend/src/components/homepage/HeroCard3.tsx
+++ b/apps/frontend/src/components/homepage/HeroCard3.tsx
@@ -5,7 +5,7 @@ import img from '../../assets/explore.gif'
 export function HeroCard3() {
     return (
         <CardContainer className="inter-var">
-            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-slate-900 dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
                 <CardItem
                     translateZ="50"
                     className="text-3xl font-bold text-neutral-600 dark:text-white"