add routing links

frontend/src/app/lobby/page.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { Markazi_Text, Nunito } from "next/font/google";
 import users from "muzak/data/users.json";
 import Image from "next/image";
+import Link from "next/link";
 
 const nunito = Nunito({
   weight: "900",
@@ -52,14 +53,12 @@ export default function Lobby() {
           <div className="text-3xl font-bold text-yellow-500">
             Players: {partySize}
           </div>
-          <button
+          <Link
+            href="/voting"
             className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
-            onClick={() =>
-              console.log(`Start game with ${partySize} players:`, userList)
-            }
           >
             START
-          </button>
+          </Link>
         </div>
 
         {partySize === 0 ? (
@@ -67,7 +66,6 @@ export default function Lobby() {
             Waiting for players...
           </div>
         ) : (
-          // <div className="grid min-w-52 grid-flow-col grid-cols-2 grid-rows-4 items-start justify-start gap-4">
           <div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
             {userList.map((user) => (
               <div

frontend/src/app/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { Nunito } from "next/font/google";
 import { useState } from "react";
+import Link from "next/link";
 
 const nunito = Nunito({
   weight: "900",
@@ -10,30 +11,35 @@ const nunito = Nunito({
 
 export default function Login() {
   const [userName, setUserName] = useState("Stroop");
+  const [pin, setPin] = useState("");
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div>
         <h1
-          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-orange-300`}
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
         >
           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>
+        <p className="text-2xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
+          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"
+            className="w-full rounded border border-white px-4 py-2 font-bold text-white/70 focus:border-yellow-500 focus:outline-2 focus:outline-yellow-500"
             type="text"
             placeholder="Game PIN"
+            value={pin}
+            onChange={(e) => setPin(e.target.value.toUpperCase())}
           />
-          <button
+          <Link
-            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            href="/lobby"
-            type="submit"
+            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
           >
             Join
-          </button>
+          </Link>
         </form>
       </div>
       <div></div>

frontend/src/app/pause/page.tsx

@@ -1,7 +1,34 @@
+"use client";
+import { Nunito } from "next/font/google";
+import Link from "next/link";
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
 export default function Pause() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Pause</h1>
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          PAUZE
+        </h1>
+      </div>
+
+      <Link
+        href="/voting"
+        className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+      >
+        START
+      </Link>
+      <h1
+        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+      >
+        PAUZE
+      </h1>
     </main>
   );
 }

frontend/src/app/voting/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Nunito } from "next/font/google";
+import users from "muzak/data/users.json";
+import Image from "next/image";
+import Link from "next/link";
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
+export default function Lobby() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          VOTING
+        </h1>
+      </div>
+
+      <div className="flex min-h-[500px] min-w-[500px] flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+        <div className="flex w-full flex-row items-center justify-between px-3">
+          <Link
+            href="/pause"
+            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+          >
+            PAUSE
+          </Link>
+          <Link
+            href="/voting"
+            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+          >
+            NEXT
+          </Link>
+        </div>
+        <div className="rounded-md bg-black p-2">
+          <Image src="/meowl.png" alt="meowl" width={400} height={400} />
+        </div>
+
+        <div className="text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
+          Artist - Title
+        </div>
+      </div>
+
+      <div></div>
+    </main>
+  );
+}