🎨 style: establish console design system

apps/web/app/login/page.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
+import { BrandLockup } from "@/components/brand";
+import { FullScreenLoader } from "@/components/page-layout";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { signIn, useSession } from "@/lib/auth-client";
+import { authClient, signIn, useSession } from "@/lib/auth-client";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -39,7 +41,16 @@ export default function LoginPage() {
       if (result.error) {
         setError(result.error.message || "Invalid email or password");
       } else {
-        router.push("/dashboard");
+        const refreshedSession = await authClient.getSession({
+          query: { disableCookieCache: true },
+        });
+
+        if (!refreshedSession.data?.user) {
+          setError("Signed in, but the session cookie was not accepted. Check the web and API URLs.");
+          return;
+        }
+
+        window.location.assign("/dashboard");
       }
     } catch (_err) {
       setError("Failed to connect to server");
@@ -48,59 +59,72 @@ export default function LoginPage() {
     }
   };
 
-  if (isPending) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (session?.user) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
+  if (isPending || session?.user) return <FullScreenLoader />;
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold text-center">Minikura</CardTitle>
-          <CardDescription className="text-center">Sign in to your account</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                placeholder="admin@example.com"
-                required
-                autoFocus
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
-              <Input
-                id="password"
-                name="password"
-                type="password"
-                placeholder="••••••••"
-                required
-              />
-            </div>
-            {error && <div className="text-sm text-red-600 text-center">{error}</div>}
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? "Signing in..." : "Sign In"}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
+    <main className="grid min-h-screen bg-sidebar text-sidebar-foreground lg:grid-cols-[1.2fr_0.8fr]">
+      <section className="relative hidden overflow-hidden border-r border-sidebar-border bg-[url('/background.png')] bg-cover bg-center p-10 lg:flex lg:flex-col lg:justify-between xl:p-16">
+        <div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-black/20" />
+        <BrandLockup subtitle="Infrastructure console" className="relative z-10" />
+
+        <div className="relative z-10 max-w-2xl py-20">
+          <span className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]">
+            <span className="size-2 bg-sidebar-primary" /> Minecraft operations platform
+          </span>
+          <h1 className="text-6xl font-black uppercase leading-[0.86] tracking-[-0.065em] xl:text-8xl">
+            Orchestrate
+            <br />
+            <span className="text-sidebar-primary">Every World.</span>
+          </h1>
+          <p className="mt-7 max-w-lg text-base leading-7 text-sidebar-foreground/55">
+            Provision servers, manage proxy routes, and monitor Kubernetes workloads from a single
+            operational interface.
+          </p>
+        </div>
+
+        <p className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35">
+          Server and cluster administration
+        </p>
+      </section>
+
+      <section className="flex items-center justify-center bg-background p-5 text-foreground sm:p-10">
+        <AuthFormCard
+          title="Sign In"
+          description="Use your administrator account to access Minikura."
+          className="border-2 border-foreground shadow-none"
+          headerClassName="border-b"
+          contentClassName="pt-2"
+        >
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="admin@example.com"
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  placeholder="Enter password"
+                  required
+                />
+              </div>
+              <FormError message={error} />
+              <Button type="submit" size="lg" className="w-full" disabled={loading}>
+                {loading ? "Signing in..." : "Sign In"}
+                {!loading && <ArrowRight className="ml-auto" />}
+              </Button>
+            </form>
+        </AuthFormCard>
+      </section>
+    </main>
   );
 }