add login page

frontend/src/app/lobby/page.tsx

@@ -1,7 +1,47 @@
+"use client";
+
+import { Vollkorn, Nunito } from "next/font/google";
+import { useState } from "react";
+
+const vollkorn = Vollkorn({
+  weight: "600",
+  subsets: ["latin"],
+});
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
 export default function Lobby() {
+  const [userName, setUserName] = useState("Stroop");
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Lobby</h1>
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-orange-300`}
+        >
+          LOGIN
+        </h1>
+      </div>
+
+      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+        <p className="text-xl text-white/90">Welkom, {userName}!</p>
+        <form className="flex flex-col items-center justify-center gap-4">
+          <input
+            className="w-full rounded border-2 border-gray-300 px-4 py-2 font-bold text-white/70"
+            type="text"
+            placeholder="Game PIN"
+          />
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            type="submit"
+          >
+            Join
+          </button>
+        </form>
+      </div>
+      <div></div>
     </main>
   );
 }