Create the design for the home page

src/App.vue

@@ -3,15 +3,13 @@ import { RouterView } from 'vue-router'</script>
 
 <template>
   <QLayout view="hHh lpR fff">
-    <QHeader bordered class="bg-primary text-white" height-hint="98" reveal>
+    <QHeader bordered height-hint="98" reveal>
       <nav>
         <ul>
           <li>
-            <QBtn
-              :to="{name: 'Home'}"
-              flat
-              icon="mdi-home"
-            />
+            <RouterLink :to="{name: 'Home'}" exact>
+              <QIcon name="mdi-home"/>
+            </RouterLink>
           </li>
         </ul>
       </nav>
@@ -21,7 +19,7 @@ import { RouterView } from 'vue-router'</script>
       <RouterView/>
     </QPageContainer>
 
-    <QFooter bordered class="bg-grey-8 text-white">
+    <QFooter bordered>
       <div>
         <span>Direction du Numérique</span>
         &nbsp;-&nbsp;
@@ -36,16 +34,10 @@ import { RouterView } from 'vue-router'</script>
 <style lang="scss" scoped>
 @import "assets/style/container";
 
-* {
-  font-family: "Unistra C", "Unistra A", sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Unistra A", sans-serif;
-}
-
 .q-header {
   height: 50px;
+  background-color: var(--uni-bg-color);
+  color: var(--uni-text-dark);
 
   > nav {
     height: 100%;
@@ -55,13 +47,38 @@ h1, h2, h3, h4, h5, h6 {
       height: 100%;
       padding: 0;
       margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
 
       li {
         list-style: none;
         height: 100%;
 
+        &:first-of-type {
+          a {
+            width: 50px;
+          }
+        }
+
         a {
           height: 100%;
+          border-radius: 0;
+          font-size: 1rem;
+          text-decoration: none;
+          color: var(--uni-text-dark);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 0.8rem;
+
+          &:hover {
+            background-color: var(--uni-bg-color-hover);
+          }
+
+          &.router-link-exact-active {
+            background-color: var(--uni-bg-color-active);
+          }
         }
       }
     }
@@ -70,6 +87,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .q-footer {
   height: 50px;
+  background-color: var(--uni-bg-color);
+  color: var(--uni-text-dark);
 
   > div {
     font-size: 1rem;
@@ -89,5 +108,28 @@ h1, h2, h3, h4, h5, h6 {
 <style lang="scss">
 html {
   font-size: 20px;
+
+  * {
+    font-family: "Unistra C", "Unistra A", sans-serif;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: "Unistra A", sans-serif;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    line-height: 2.8rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+    line-height: 2.2rem;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1.7rem;
+  }
 }
 </style>

src/assets/style/_container.scss

@@ -20,8 +20,4 @@ $lg: 1920px;
   @media all and (min-width: $lg) {
     width: $lg;
   }
-
-  > section {
-    padding-bottom: 2rem;
-  }
 }

src/assets/style/style.scss

+:root {
+  --uni-bg-color: rgb(246, 246, 243);
+  --uni-bg-color-hover: rgb(220, 220, 211);
+  --uni-bg-color-active: rgb(199, 199, 189);
+  --uni-text-dark: rgba(0, 0, 0, 0.87);
+}

src/main.ts

@@ -14,6 +14,7 @@ import '@quasar/extras/mdi-v6/mdi-v6.css'
 
 // Import Quasar css
 import 'quasar/src/css/index.sass'
+import '@/assets/style/style.scss'
 
 const app = createApp(App)
 

src/views/HomeView.vue

 <template>
-  <section>
-    <h1>Home page</h1>
-  </section>
+  <main>
+    <header>
+      <img
+        alt="Illustration montrant des petits robots qui travaillent sur un ordinateur"
+        src="/img/home-header-img.png"
+      />
+    </header>
+    
+    <section>
+      <h1>Liste des tutos</h1>
+    </section>
+  </main>
 </template>
 
 <style lang="scss" scoped>
-section {
+@import "src/assets/style/_container.scss";
+
+main {
+  header {
+    height: 400px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  section {
+    @include container(true);
+
+    h1 {
+      margin-top: 0;
+    }
+  }
 }
 </style>