styles: refactor codebase base style

src/app/(full-page)/login/page.tsx

@@ -6,45 +6,19 @@ import { Label } from '@/components/ui/label';
 import { GuestGuard } from '@/guards';
 import { useLoginForm } from '@/hooks/useLoginForm';
 import { Loader2 } from 'lucide-react';
-import Image from 'next/image';
 
 export default function LoginPage() {
   const { register, handleSubmit, errors, isLoading } = useLoginForm();
 
   return (
     <GuestGuard>
-      <main className="grid min-h-screen bg-background text-foreground lg:grid-cols-[1.05fr_0.95fr]">
-        <section className="relative hidden overflow-hidden border-r border-border/60 lg:block">
-          <Image
-            src="/background.png"
-            alt=""
-            fill
-            priority
-            className="object-cover"
-            sizes="55vw"
-          />
-          <div className="absolute inset-0 bg-background/35" />
-          <div className="absolute inset-x-0 bottom-0 p-10">
-            <div className="max-w-lg space-y-3">
-              <p className="text-sm font-medium uppercase tracking-[0.18em] text-primary">
-                VisionRoad
-              </p>
-              <h1 className="text-4xl font-semibold tracking-normal text-foreground">
-                Road intelligence for faster inspection decisions
-              </h1>
-              <p className="text-sm leading-6 text-muted-foreground">
-                Review projects, uploads, detections, and chainage insights from one secure
-                workspace.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        <section className="flex min-h-screen items-center justify-center px-6 py-10">
-          <div className="w-full max-w-sm space-y-7">
-            <header className="space-y-2">
+      <div className="flex min-h-screen w-full">
+        <div className="hidden md:flex w-[40%]" />
+        <div className="flex flex-1 md:w-[60%] items-center justify-center p-6 border-l border-border h-screen">
+          <section className="w-full max-w-sm space-y-7">
+            <header className="space-y-2 text-center md:text-left">
               <p className="text-sm font-medium text-muted-foreground">VisionRoad</p>
-              <h2 className="text-2xl font-semibold tracking-normal">Sign in</h2>
+              <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
               <p className="text-sm text-muted-foreground">
                 Use your email and password to continue.
               </p>
@@ -98,9 +72,9 @@ export default function LoginPage() {
                 )}
               </Button>
             </form>
-          </div>
-        </section>
-      </main>
+          </section>
+        </div>
+      </div>
     </GuestGuard>
   );
 }