adds data access, login flow, navigation menu.

And some more stuff. :)

frontend/src/app/page.tsx

@@ -1,43 +1,40 @@
 "use client";
 
 import Image from "next/image";
+import Link from "next/link";
 import { Log } from "oidc-client-ts";
 import { useAuth } from "react-oidc-context";
+import { Nunito } from "next/font/google";
 
 Log.setLogger(console);
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
 
 export default function Page() {
   const auth = useAuth();
   console.log(auth);
 
-  switch (auth.activeNavigator) {
-    case "signinSilent":
-      return <div>Signing you in...</div>;
-    case "signoutRedirect":
-      return <div>Signing you out...</div>;
-  }
-
-  if (auth.isLoading) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <main
       className={`flex min-h-screen flex-col items-center justify-between p-24`}
     >
-      {auth.error && <div>{auth.error.message}</div>}
-      {auth.isAuthenticated && (
-        <div>
-          <p>Hello {auth.user?.profile.name} </p>
-        </div>
-      )}
-      {auth.isAuthenticated && (
-        <button onClick={() => void auth.removeUser()}>Log out</button>
-      )}
-      {!auth.isAuthenticated && (
-        <button onClick={() => void auth.signinRedirect()}>Log in</button>
-      )}
-      <Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          Herzlich Willkommen bei Muzak!
+        </h1>
+        {auth.isAuthenticated && <></>}
+        {!auth.isAuthenticated && (
+          <h2
+            className={`${nunito.className} text-outline text-[32px] tracking-tighter text-yellow-500`}
+          >
+            Bitte authentificeren.
+          </h2>
+        )}
+      </div>
     </main>
   );
 }