post-game opleuken

frontend/src/app/post-game/page.tsx

@@ -2,6 +2,11 @@
 import { useEffect, useState } from "react";
 import { api } from "muzak/data/fetcher";
 import { useSession } from "muzak/contexts/SessionContext";
+import { Nunito } from "next/font/google";
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
 
 export default function PostGame() {
   const { sessionId, setSessionId } = useSession();
@@ -22,10 +27,34 @@ export default function PostGame() {
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Post-game</h1>
-      <p>{trackCount} tracks</p>
-      <p>{voteCount} votes</p>
-      <p>{averageVote} average vote</p>
+      <p
+        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+      >
+        Bedankt voor het stemmen!
+      </p>
+      <div className="flex flex-col text-center">
+        <p
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          Jullie hebben {voteCount} stemmen uitgebracht op {trackCount} nummers.
+        </p>
+        <p
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          Gemiddeld vonden jullie {(averageVote * 100).toFixed(0)}% van de
+          nummers best oké.
+        </p>
+        <p
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          Applaus voor jezelf!
+        </p>
+      </div>
+      <p
+        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+      >
+        Tot HDcon!
+      </p>
     </main>
   );
 }