First components !

.gitmodules

+[submodule "frontend/src/assets/img/mahjong-tiles"]
+	path = frontend/src/assets/img/mahjong-tiles
+	url = https://github.com/FluffyStuff/riichi-mahjong-tiles.git

frontend/package-lock.json

@@ -10835,6 +10835,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-awesome": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.1.0.tgz",
+      "integrity": "sha512-4n+hg8KIMrwjXV6sRHcRZd18Somih5j4Yk2ZOv95pnvDpzbBkIYW4ktfivhqgNt50m0zDjmeEWiy1iVLtcccfw==",
+      "requires": {
+        "core-js": "^3.4.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-awesome": "^4.1.0",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

frontend/src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/accueil">Acceuil</router-link>
+    </div> -->
     <router-view/>
   </div>
 </template>
@@ -14,7 +15,22 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  background-image: linear-gradient(to bottom, #fff1eb 0%, #ace0f9 100%);
+  height: 100vh;
+}
+
+.column {
+  flex-basis: 100%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+body{
+  margin:0
 }
 
 #nav {

mahjong-tiles @ 9e2eba21

+Subproject commit 9e2eba21ca69d6cd5cdd9a309d5754ac9517c481

frontend/src/components/LoginNavbar.vue

+<template>
+    <nav class="row btn-bar">
+        <button class="btn-login"><v-icon scale="2" name="plus"/> S'inscrire</button>
+        <button class="btn-login"><v-icon scale="2" name="sign-in-alt"/> Se connecter</button>
+    </nav>
+</template>
+
+
+<script>
+export default {
+  name: 'LoginNavbar',
+  components: {
+    'v-icon': Icon
+  }
+}
+
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+</script>
+
+<style scoped>
+    .btn-bar{
+        justify-content: flex-end;
+    }
+
+    .btn-login{
+    background-color: transparent;
+	border-radius:10px;
+	border:4px solid #403d39;
+	cursor:pointer;
+	color:#403d39;
+	font-family:Arial;
+	font-size:28px;
+	padding:16px 31px;
+    font-weight: bold;
+    margin: 1%;
+    }
+</style>
\ No newline at end of file

frontend/src/router/index.js

@@ -17,6 +17,14 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+    path: '/accueil',
+    name: 'Accueil',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "accueil" */ '../views/Accueil.vue')
   }
 ]
 

frontend/src/views/About.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <v-icon name="beer"/>
   </div>
 </template>
+
+<script>
+
+export default {
+  name: 'About',
+  components: {
+    'v-icon': Icon
+  }
+}
+
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+</script>
+

frontend/src/views/Accueil.vue

+<template>
+    <div class="accueil">
+        <LoginNavbar></LoginNavbar>
+        <div class="row">
+            <div class="column">
+                <button class="btn-login play">Jouer</button>
+            </div>
+        </div>
+    </div>
+    
+</template>
+
+<style scoped>
+    .btn-login{
+    background-color: transparent;
+	border-radius:10px;
+	border:4px solid #403d39;
+	cursor:pointer;
+	color:#403d39;
+	font-family:Arial;
+	font-size:28px;
+	padding:16px 31px;
+    font-weight: bold;
+    margin: 1%;
+    }
+
+    .play{
+        margin: 20%;
+    }    
+
+    .accueil{
+        height: 100%;
+        margin: 0 auto;
+        max-width: 1200px;
+    }
+
+</style>
+
+<script>
+export default {
+  name: 'Accueil',
+  components: {
+    LoginNavbar
+  }
+}
+
+import LoginNavbar from '../components/LoginNavbar.vue'
+</script>

frontend/src/views/Home.vue

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <v-icon name="beer"/>
+    <HelloWorld msg="Yo brozo !"/>
   </div>
 </template>
 
@@ -9,10 +10,14 @@
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    HelloWorld,
+    'v-icon': Icon
   }
 }
 </script>