items-center the header

app/src/router.js

@@ -11,9 +11,8 @@ import { isLoggedIn } from './utils/auth'
 const routes = [
   {
     path: '/',
-    redirect: {
     name: 'landing-page',
-    },
+    component: LandingPage,
   },
   {
     path: '/login',
@@ -51,11 +50,6 @@ const routes = [
     name: 'leaderboard',
     component: LeaderboardPage,
   },
-  {
-    path: '/landing',
-    name: 'landing-page',
-    component: LandingPage,
-  },
 ]
 
 const router = createRouter({
@@ -70,8 +64,7 @@ router.beforeEach(async (to, from, next) => {
     // Check if the user isn't authenticated
     // Redirect to the login page
     next({
-      // name: 'register',
+      name: 'register',
-      name: 'landing',
       query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
     })
   } else if (to.meta.requiresGuest && loggedIn) {

app/src/views/LandingPage.vue

@@ -18,27 +18,22 @@ const scrollToSection = (sectionId) => {
 <template>
   <div class="w-screen h-screen bg-scroll bg-bg">
     <DynamicBackground class="w-full h-full" />
-    <div
+    <div class="h-screen w-screen absolute top-0 left-0">
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
-    >
       <!-- game header -->
-      <div class="h-[6vh] w-full">
       <div
-          id="header"
+        class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
-          class="bg-bg-secondary content-center h-full w-full p-1 items-center"
       >
-          <div class="h-full flex items-center justify-center mx-3">
+        <div class="flex flex-row items-center gap-3">
-            <div class="flex items-center gap-3">
+          <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-              <img src="../img/icon_totem.svg" class="h-5" />
           <button
             id="GameTitle"
             class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
             style="font-size: 2vh"
           >
-                Welcome to Linux Odyssey !
+            Linux Odyssey
           </button>
         </div>
-            <div class="h-full w-full flex gap-3 items-center justify-end">
+        <div class="flex flex-row items-center gap-3">
           <button
             id="Intro"
             class="text-text inline-block font-bold whitespace-nowrap pt-1"
@@ -93,8 +88,6 @@ const scrollToSection = (sectionId) => {
           </a>
         </div>
       </div>
-        </div>
-      </div>
 
       <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-y-auto">
         <div