refactor: update AuthLayout to use grid layout and simplify LoginPage structure

Author: typescript-any

src/components/layout/auth-layout.tsx

@@ -2,9 +2,9 @@ import { Outlet } from "react-router";
 
 const AuthLayout = () => {
   return (
-    <div className="min-h-screen flex theme-transition">
+    <div className="min-h-screen grid grid-cols-1 md:grid-cols-2 theme-transition">
       {/* Left side - Branding */}
-      <div className="flex-1 bg-gradient-to-br from-background via-card to-background dark:from-background dark:via-muted dark:to-card flex items-center justify-center p-8 relative overflow-hidden">
+      <div className="bg-gradient-to-br from-background via-card to-background dark:from-background dark:via-muted dark:to-card flex items-center justify-center p-8 relative overflow-hidden">
         {/* Background decoration */}
         <div className="absolute inset-0 opacity-10 dark:opacity-20">
           <div className="absolute top-20 left-20 w-32 h-32 bg-primary rounded-full blur-3xl"></div>
@@ -111,22 +111,8 @@ const AuthLayout = () => {
         </div>
       </div>
 
-      {/* Right side - Form/Outlet */}
-      <div className="flex-1 flex items-center justify-center p-8 bg-gradient-to-br from-background to-muted relative">
-        {/* Subtle background pattern */}
-        <div className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05]">
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundImage: `radial-gradient(circle at 1px 1px, oklch(var(--foreground)) 1px, transparent 0)`,
-              backgroundSize: "24px 24px",
-            }}
-          ></div>
-        </div>
-
-        <div className="w-full max-w-md relative z-10">
-          <Outlet />
-        </div>
+      <div>
+        <Outlet />
       </div>
     </div>
   );

src/index.css

@@ -171,31 +171,32 @@
   }
 }
 
-/* Additional utility classes for theme consistency */
-.gradient-primary {
-  background: var(--gradient-primary);
-}
+@layer components {
+  .gradient-primary {
+    background: var(--gradient-primary);
+  }
 
-.gradient-secondary {
-  background: var(--gradient-secondary);
-}
+  .gradient-secondary {
+    background: var(--gradient-secondary);
+  }
 
-.hero-bg {
-  background: var(--hero-bg);
-}
+  .hero-bg {
+    background: var(--hero-bg);
+  }
 
-.text-hero-accent {
-  color: oklch(var(--hero-accent));
-}
+  .text-hero-accent {
+    color: oklch(var(--hero-accent));
+  }
 
-.bg-hero-accent {
-  background-color: oklch(var(--hero-accent));
-}
+  .bg-hero-accent {
+    background-color: oklch(var(--hero-accent));
+  }
 
-/* Smooth transitions for theme switching */
-.theme-transition {
-  transition: background-color 0.3s ease, color 0.3s ease,
-    border-color 0.3s ease;
+  /* Smooth transitions for theme switching */
+  .theme-transition {
+    transition: background-color 0.3s ease, color 0.3s ease,
+      border-color 0.3s ease;
+  }
 }
 
 /* Custom scrollbar theming */

src/pages/home/home-page.tsx

@@ -52,7 +52,7 @@ const HomePage = () => {
 
             {/* Main Title with enhanced animation */}
             <div className="mb-12">
-              <div className="text-9xl mb-8 animate-bounce">⚛️</div>
+              <div className="text-9xl mb-8">⚛️</div>
               <div className="space-y-4">
                 <div className="inline-block px-6 py-2 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full border border-border mb-4">
                   <span className="text-primary font-medium text-lg">

src/pages/login/login-page.tsx

@@ -3,9 +3,9 @@ import { LoginForm } from "./components/login-form";
 
 export default function LoginPage() {
   return (
-    <>
+    <div className="flex items-center justify-center h-screen bg-secondary">
       <MetaData />
       <LoginForm />
-    </>
+    </div>
   );
 }