refactor: ♻️ remove swiper component and add page instead

frontend/package.json

@@ -19,7 +19,6 @@
     "axios": "^1.4.0",
     "pinia": "^2.1.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "swiper": "^9.3.2",
     "vite": "^4.3.7",
     "vue": "^3.3.2",
     "vue-router": "^4.2.0"

frontend/src/components/HeaderMain.vue

@@ -31,7 +31,7 @@ function onClickOnLogo () {
 
 function onClickOnInfo (event) {
   event.stopPropagation()
-  router.push({ name: 'Home' })
+  router.push({ name: 'HomePage' })
 }
 
 </script>
@@ -43,7 +43,7 @@ function onClickOnInfo (event) {
     @click="onClickOnLogo"
   >
     <span
-      v-if="route.name !== 'Home'"
+      v-if="route.name !== 'HomePage'"
       class="information fr-icon-info-line"
       aria-hidden="true"
       @click="onClickOnInfo"

frontend/src/router/index.js

@@ -5,7 +5,7 @@ import { clearLocalStorage } from '@/utils/storage-utils.js'
 import { useResultStore } from '@/stores/result.js'
 import { useStepsStore } from '@/stores/steps.js'
 
-const Home = () => import('@/views/Home.vue')
+const HomePage = () => import('@/views/HomePage.vue')
 const Start = () => import('@/views/Start.vue')
 const Instructions = () => import('@/views/Instructions.vue')
 const Result = () => import('@/views/Result.vue')
@@ -25,8 +25,8 @@ const SelectAmmo = () => import('@/views/GuideFactice/SelectAmmo.vue')
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home,
+    name: 'HomePage',
+    component: HomePage,
     meta: {
       displayHeader: true,
     },

frontend/src/views/HomePage.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="text-center relative top-1/6 <md:top-4">
+    <div>
+      <img
+        src="@/assets/basegun_green.png"
+        alt=""
+        class="homepage-logo"
+      >
+      <div class="homepage-content">
+        <ul class="homepage-ul fr-text--sm">
+          <li class="mb-2">
+            Basegun est une application <span class="homepage-green-highlight">prototype</span> en cours de développement par le Ministère de l’Intérieur et des Outre-Mer.
+          </li>
+          <li class="mb-2">
+            A ce jour, Basegun <span class="homepage-green-highlight">permet</span> d'identifier uniquement des <span class="homepage-green-highlight">armes à feu létales</span> et des<span class="homepage-green-highlight"> armes factices type airsoft</span>.
+          </li>
+          <li class="mb-2">
+            Basegun propose également de les <span class="homepage-green-highlight">mettre en sécurité</span> grâce à des <span class="homepage-green-highlight">tutoriels personnalisés</span>.
+          </li>
+        </ul>
+      </div>
+      <router-link
+        v-slot="{navigate}"
+        :to="{name:'Start'}"
+      >
+        <button
+          id="agree-button"
+          class="fr-btn fr-btn--sm"
+          @click="navigate()"
+        >
+          J'ai compris
+        </button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.homepage {
+  width: 100%;
+  height: 100%;
+  position: static;
+}
+
+.homepage-logo {
+  width: 40%;
+}
+
+.homepage-content {
+  width: 75%;
+  margin: 1rem auto;
+  text-align: center;
+}
+
+.homepage-ul {
+  list-style-position: inside;
+  text-indent: -1em;
+  padding-left: 1em;
+  display: inline-block;
+  text-align: left;
+  max-width: 700px;
+  margin-bottom: 12px !important;
+}
+
+.homepage-green-highlight {
+  font-weight: bold;
+  color: #00c7c8;
+}
+
+#agree-button {
+  display: block;
+  margin: 0 auto;
+}
+
+</style>