🐛 fix: align dashboard with secured APIs

apps/web/app/login/page.tsx

@@ -2,15 +2,111 @@
 
 import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useRef, useState } from "react";
 import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
-import { BrandLockup } from "@/components/brand";
+import { BrandLockup, BrandMark } from "@/components/brand";
 import { FullScreenLoader } from "@/components/page-layout";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient, signIn, useSession } from "@/lib/auth-client";
+import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
+
+function LoginHero() {
+  const heroRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const root = heroRef.current;
+      if (!root || prefersReducedMotion()) return;
+
+      const bg = root.querySelector("[data-hero-bg]");
+      const brand = root.querySelector("[data-hero-brand]");
+      const chip = root.querySelector("[data-hero-chip]");
+      const lines = root.querySelectorAll("[data-hero-line]");
+      const copy = root.querySelector("[data-hero-copy]");
+      const foot = root.querySelector("[data-hero-foot]");
+      const rail = root.querySelector("[data-hero-rail]");
+
+      const tl = gsap.timeline({ defaults: { ease: motionEase.out } });
+      tl.from(bg, { scale: 1.12, duration: 1.2, ease: "power2.out" }, 0)
+        .from(rail, { scaleY: 0, duration: 0.6, transformOrigin: "top" }, 0.05)
+        .from(brand, { y: -12, autoAlpha: 0, duration: 0.45 }, 0.08)
+        .from(chip, { y: 14, autoAlpha: 0, duration: 0.4 }, 0.16)
+        .from(lines, { yPercent: 110, duration: 0.7, stagger: 0.08, ease: motionEase.snap }, 0.2)
+        .from(copy, { y: 14, autoAlpha: 0, duration: 0.45 }, 0.42)
+        .from(foot, { autoAlpha: 0, duration: 0.35 }, 0.55);
+
+      gsap.to(bg, {
+        scale: 1.06,
+        duration: 18,
+        ease: "none",
+        yoyo: true,
+        repeat: -1,
+        delay: 1.2,
+      });
+    },
+    { scope: heroRef }
+  );
+
+  return (
+    <section
+      ref={heroRef}
+      className="relative flex min-h-[42vh] flex-col justify-between overflow-hidden border-b border-sidebar-border p-6 sm:min-h-[48vh] sm:p-10 lg:min-h-screen lg:border-r lg:border-b-0 xl:p-16"
+    >
+      <div
+        data-hero-bg=""
+        className="absolute inset-0 origin-center bg-[url('/background.png')] bg-cover bg-center will-change-transform"
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-black/25" />
+      <div className="auth-scanlines pointer-events-none absolute inset-0" />
+      <div
+        data-hero-rail=""
+        className="absolute top-0 bottom-0 left-0 w-1 origin-top bg-sidebar-primary"
+      />
+
+      <div data-hero-brand="" className="relative z-10">
+        <BrandLockup subtitle="Minecraft control plane" />
+      </div>
+
+      <div className="relative z-10 max-w-2xl py-10 lg:py-20">
+        <span
+          data-hero-chip=""
+          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 Control Plane
+        </span>
+        <h1 className="text-4xl font-black uppercase leading-[0.86] tracking-[-0.065em] sm:text-6xl xl:text-8xl">
+          <span className="block overflow-hidden">
+            <span data-hero-line="" className="block">
+              Play more
+            </span>
+          </span>
+          <span className="block overflow-hidden">
+            <span data-hero-line="" className="block text-sidebar-primary">
+              Operate less
+            </span>
+          </span>
+        </h1>
+        <p
+          data-hero-copy=""
+          className="mt-6 max-w-lg text-sm leading-7 text-sidebar-foreground/55 sm:mt-7 sm:text-base"
+        >
+          Spin up servers, route players, and run the whole network from one console.
+        </p>
+      </div>
+
+      <p
+        data-hero-foot=""
+        className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35"
+      >
+        Built for people who actually run servers
+      </p>
+    </section>
+  );
+}
 
 export default function LoginPage() {
   const router = useRouter();
@@ -47,7 +143,9 @@ export default function LoginPage() {
         });
 
         if (!refreshedSession.data?.user) {
-          setError("Signed in, but the session cookie was not accepted. Check the web and API URLs.");
+          setError(
+            "Signed in, but the session cookie was not accepted. Check the web and API URLs."
+          );
           return;
         }
 
@@ -64,67 +162,45 @@ export default function LoginPage() {
 
   return (
     <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>
+      <LoginHero />
 
       <section className="relative flex items-center justify-center bg-background p-5 text-foreground sm:p-10">
-        <ThemeToggle className="absolute top-5 right-5 sm:top-8 sm:right-8" />
+        <ThemeToggle className="absolute top-5 right-5 z-10 sm:top-8 sm:right-8" />
         <AuthFormCard
-          title="Sign In"
-          description="Use your administrator account to access Minikura."
-          className="border-2 border-foreground shadow-none"
+          title="Sign in"
+          description="Use your administrator account to access the console."
+          leading={<BrandMark className="size-10" />}
+          className="border-2 border-foreground shadow-[8px_8px_0_color-mix(in_oklch,var(--foreground)_18%,transparent)]"
           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>
+          <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>