init

app/login/page.tsx

@@ -1,36 +1,31 @@
 import { signIn } from "@/auth";
+import { Wordmark } from "@/components/wordmark";
 
 export default function LoginPage() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-10">
-      <div className="flex flex-col items-center gap-4">
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src="/logo.svg"
-          alt="KNUR"
-          width={160}
-          height={160}
-          className="rounded-3xl shadow-2xl ring-2 ring-surface"
-        />
-        <h1 className="text-3xl font-bold tracking-tight text-fg">KNUR</h1>
-        <p className="text-sm text-fg/50">
-          Książka Notowań Udźwigów i Rezultatów
-        </p>
-      </div>
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <div className="flex w-full max-w-sm flex-col items-center gap-7 rounded-2xl border border-white/10 bg-surface/55 p-8 shadow-lg shadow-black/10 backdrop-blur-md">
+        <div className="flex flex-col items-center gap-4">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src="/logo-bars.svg" alt="" width={51} height={48} className="h-12 w-auto" />
+          <Wordmark className="text-3xl" />
+          <p className="text-center text-sm text-fg/50">
+            Książka Notowań Udźwigów i Rezultatów
+          </p>
+        </div>
 
-      <form
-        action={async () => {
-          "use server";
-          await signIn("keycloak", { redirectTo: "/" });
-        }}
-      >
-        <button
-          type="submit"
-          className="rounded-lg bg-accent px-8 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+        <form
+          className="w-full"
+          action={async () => {
+            "use server";
+            await signIn("keycloak", { redirectTo: "/" });
+          }}
         >
-          Zaloguj
-        </button>
-      </form>
+          <button type="submit" className="btn btn-primary w-full px-8 py-3 text-base">
+            Zaloguj
+          </button>
+        </form>
+      </div>
     </div>
   );
 }