From 8862dfa00e942fb0f2a21ef2f50fee528dc75a56 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Wed, 4 Sep 2024 16:15:05 +0700
Subject: [PATCH] update: Revision on Login Page

---
 apps/frontend/src/routes/login/index.lazy.tsx | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/routes/login/index.lazy.tsx b/apps/frontend/src/routes/login/index.lazy.tsx
index 2477ae9..bb4ba08 100644
--- a/apps/frontend/src/routes/login/index.lazy.tsx
+++ b/apps/frontend/src/routes/login/index.lazy.tsx
@@ -97,18 +97,24 @@ export default function LoginPage() {
 	};
 
 	return (
-		<div
-            className="flex items-center justify-center bg-contain bg-top lg:bg-right 
-				bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')] 
-                lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
-        >
-			<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
+		<div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
+			<div className="absolute top-6 left-7 text-base font-bold leading-5">
 				Amati
 			</div>
-			<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> 
-				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
-					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1>
-					<p className="text-sm mb-10 leading-[1.059rem]">
+			<div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden -z-20">
+				<div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
+					<div className="flex absolute border border-slate-400 rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
+						<div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
+							<div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="w-screen h-screen flex ml-0 lg:ml-28 justify-center lg:justify-start items-center"> 
+				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none">
+					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tight">Sign In</h1>
+					<p className="text-sm mb-10 leading-4 text-muted-foreground">
 						New to this app?{' '}
 						<a
 							href="/register"
@@ -129,7 +135,7 @@ export default function LoginPage() {
 									name="username"
 									render={({ field }) => (
 										<FormItem className="text-sm">
-											<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel>
+											<FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
 											<FormControl>
 												<Input
 													placeholder="eg; user@mail.com"
@@ -146,7 +152,7 @@ export default function LoginPage() {
 									name="password"
 									render={({ field }) => (
 										<FormItem className="text-sm">
-											<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel>
+											<FormLabel className="font-semibold leading-4">Password</FormLabel>
 											<FormControl>
 												<Input
 													type="password"
@@ -163,7 +169,7 @@ export default function LoginPage() {
 								<p className="text-sm">
 									<a
 										href="/forgot-password"
-										className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
+										className="text-blue-500 font-bold hover:text-blue-800 leading-4"
 									>
 										Forgot Password?
 									</a>
@@ -177,7 +183,7 @@ export default function LoginPage() {
 									className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] 
 										lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
 								>
-									<span className="leading-[1.25rem]">Sign In</span>
+									<span className="leading-5">Sign In</span>
 									<TbArrowNarrowRight className="h-5 w-5" />
 								</Button>
 							</div>
@@ -187,5 +193,4 @@ export default function LoginPage() {
 			</div>
 		</div>
 	);
-}
-
+}
\ No newline at end of file