items-center the header

app/src/router.js

@@ -11,9 +11,8 @@ import { isLoggedIn } from './utils/auth'
 const routes = [
   {
     path: '/',
-    redirect: {
+    name: 'landing-page',
-      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,81 +18,74 @@ 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
-        <div
+        class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
-          id="header"
+      >
-          class="bg-bg-secondary content-center h-full w-full p-1 items-center"
+        <div class="flex flex-row items-center gap-3">
-        >
+          <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-          <div class="h-full flex items-center justify-center mx-3">
+          <button
-            <div class="flex items-center gap-3">
+            id="GameTitle"
-              <img src="../img/icon_totem.svg" class="h-5" />
+            class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
-              <button
+            style="font-size: 2vh"
-                id="GameTitle"
+          >
-                class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+            Linux Odyssey
-                style="font-size: 2vh"
+          </button>
-              >
+        </div>
-                Welcome to Linux Odyssey !
+        <div class="flex flex-row items-center gap-3">
-              </button>
+          <button
-            </div>
+            id="Intro"
-            <div class="h-full w-full flex gap-3 items-center justify-end">
+            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-              <button
+            @click="scrollToSection('intro')"
-                id="Intro"
+            style="font-size: 2vh"
-                class="text-text inline-block font-bold whitespace-nowrap pt-1"
+          >
-                @click="scrollToSection('intro')"
+            Intro
-                style="font-size: 2vh"
+          </button>
-              >
+          <button
-                Intro
+            id="Feature"
-              </button>
+            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-              <button
+            @click="scrollToSection('feature')"
-                id="Feature"
+            style="font-size: 2vh"
-                class="text-text inline-block font-bold whitespace-nowrap pt-1"
+          >
-                @click="scrollToSection('feature')"
+            Feature</button
-                style="font-size: 2vh"
+          ><button
-              >
+            id="Info"
-                Feature</button
+            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-              ><button
+            @click="scrollToSection('info')"
-                id="Info"
+            style="font-size: 2vh"
-                class="text-text inline-block font-bold whitespace-nowrap pt-1"
+          >
-                @click="scrollToSection('info')"
+            Info
-                style="font-size: 2vh"
+          </button>
-              >
-                Info
-              </button>
 
-              <button
+          <button
-                id="Contact"
+            id="Contact"
-                class="text-text inline-block font-bold whitespace-nowrap pt-1"
+            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-                @click="scrollToSection('contact')"
+            @click="scrollToSection('contact')"
-                style="font-size: 2vh"
+            style="font-size: 2vh"
-              >
+          >
-                Contact Us
+            Contact Us
-              </button>
+          </button>
-              <RouterLink
+          <RouterLink
-                title="Sign In"
+            title="Sign In"
-                id="SignIn"
+            id="SignIn"
-                to="/register"
+            to="/register"
-                class="text-text inline-block font-bold whitespace-nowrap pt-1"
+            class="text-text inline-block font-bold whitespace-nowrap pt-1"
-                style="font-size: 2vh"
+            style="font-size: 2vh"
-              >
+          >
-                Sign In
+            Sign In
-              </RouterLink>
+          </RouterLink>
-              <a
+          <a
-                title="Bug Report"
+            title="Bug Report"
-                :href="bugReportUrl"
+            :href="bugReportUrl"
-                target="_blank"
+            target="_blank"
-                class="h-5 w-5"
+            class="h-5 w-5"
-              >
+          >
-                <font-awesome-icon
+            <font-awesome-icon
-                  :icon="['fas', 'bug']"
+              :icon="['fas', 'bug']"
-                  class="text-text-primary h-full w-full"
+              class="text-text-primary h-full w-full"
-                />
+            />
-              </a>
+          </a>
-            </div>
-          </div>
         </div>
       </div>