Added a new route

Mainly for test and dev purposes

src/App.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import app_footer from './components/footer.vue';
+import GOLbackground from '@/components/GOLbackground.vue';
 </script>
 
 <template>
+  <GOLbackground />
   
   <RouterView/>
 

src/components/header.vue

@@ -0,0 +1,40 @@
+<template>
+  <header>
+    <div id="header_content">
+        <RouterLink to="/">
+            <div id="header_picture">
+                <img src="https://picsum.photos/50/50"/>
+            </div>
+        </RouterLink>
+    </div>
+  </header>
+</template>
+
+<script setup>
+    import { RouterLink } from 'vue-router';
+</script>
+
+<style scoped>
+    header{
+        height: 60px;
+        background-color: #252525;
+        display: flex;
+    }
+    #header_content{
+        height: 100%;
+        width: 95%;
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    #header_picture{
+        width: 50px;
+        height: 50px
+    }
+    #header_picture img{
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+    }
+</style>

src/main.js

@@ -18,6 +18,7 @@ else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja"
 else userLanguage = "en";
 
 const i18n = createI18n({
+    legacy:false,
     locale: userLanguage,
     fallbackLocale: 'en',
     messages: {

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import BaseArticle from '@/views/BaseArticle.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/knowledge',
+      name: 'knowledge',
+      component: BaseArticle
+    },
     {
       path: '/about',
       name: 'about',

src/views/BaseArticle.vue

@@ -0,0 +1,21 @@
+<template>
+    <Header/>
+    <div class="about">
+      <h1>This is an about page</h1>
+    </div>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+</script>
+  
+  <style>
+  @media (min-width: 1024px) {
+    .about {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+    }
+  }
+  </style>
+  

src/views/HomeView.vue

@@ -1,5 +1,4 @@
 <script setup>
-  import GOLbackground from '@/components/GOLbackground.vue';
   import welcome from '@/components/home/welcome.vue';
   import intersection from '@/components/home/intersection.vue';
   import presentation from '@/components/home/presentation.vue';
@@ -43,8 +42,6 @@
 
 <template>
 
-    <GOLbackground />
-
     <welcome/>
 
     <intersection text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#"/>