refactor LayoutFAQ component

components/Layout/FAQ.vue

@@ -1,183 +1,158 @@
 <template>
-  <div id="Aide">
-    <LayoutContainer>
-      <div class="container-img">
-        <div class="overlay" />
-        <v-row class="mt-12">
-          <v-col cols="6">
-            <div class="container-left">
-              <LayoutUISubTitle
-                class="mt-12 ml-3"
-                title-color="#fff"
-                :iconSize="6"
-                :iconClasses="iconClasses"
-                :titleText="' Vous voulez tirer le meilleur de notre logiciel ?  '"
-              />
-              <h3 class="title-faq mt-6">
-                Quelle que soit votre demande, notre équipe est à vos côtés pour
-                vous guider
-              </h3>
-              <nuxt-link to="https://ressources.opentalent.fr/" target="_blank">
-                <v-btn class="btn-faq"> Consulter notre FAQ </v-btn></nuxt-link
-              >
-            </div>
-          </v-col>
+  <div class="alt-theme main my-2">
+    <div class="d-flex flex-row">
+      <div class="d-flex flex-column">
+        <LayoutUISubTitle class="mt-12 ml-3">
+          Vous voulez tirer le meilleur de notre logiciel ?
+        </LayoutUISubTitle>
 
-          <v-col cols="6">
-            <div class="btn-container">
-              <nuxt-link to="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564" target="_blank">
-                <v-btn class="btn-faq-tuto">
-                  <div class="container-button">
-                    <v-img src="/images/icons/tuto.svg" class="icon-button" />
-                    <p class="text-btn">
-                      De nombreux articles tutoriels accessibles 24h/24
-                    </p>
-                  </div>
-                </v-btn>
-              </nuxt-link>
+        <h3 class="mt-6">
+          Quelle que soit votre demande, notre équipe est à vos côtés pour
+          vous guider
+        </h3>
 
-              <nuxt-link
-                to="https://ressources.opentalent.fr/?contact"
-                target="_blank"
-              >
-                <v-btn class="btn-faq-tuto">
-                  <div class="container-button">
-                    <v-img src="/images/icons/faq.svg" class="icon-button" />
-                    <p class="text-btn">
-                      Support accessible du lundi au vendredi via l’outil en
-                      ligne
-                    </p>
-                  </div>
-                </v-btn>
-              </nuxt-link>
-            </div>
-          </v-col>
-        </v-row>
+        <v-btn
+          to="https://ressources.opentalent.fr/"
+          target="_blank"
+          class="btn-faq inv-theme"
+        >
+          Consulter notre FAQ
+        </v-btn>
       </div>
-    </LayoutContainer>
+
+      <div class="d-flex flex-column justify-center links">
+        <v-btn
+          to="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564"
+          target="_blank"
+        >
+          <div>
+            <v-img
+              src="/images/icons/tuto.svg"
+            />
+
+            <p>
+              De nombreux articles tutoriels accessibles 24h/24
+            </p>
+          </div>
+        </v-btn>
+
+        <v-btn
+          to="https://ressources.opentalent.fr/?contact"
+          target="_blank"
+        >
+          <div>
+            <v-img
+              src="/images/icons/faq.svg"
+            />
+
+            <p class="text-btn">
+              Support accessible du lundi au vendredi via l’outil en
+              ligne
+            </p>
+          </div>
+        </v-btn>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
-
-<style scoped>
-.v-container {
-  padding: 0 !important;
-}
-:deep().subtitle {
-  width: 10rem !important;
-}
-.container-left {
-  margin-left: 6rem;
+<style scoped lang="scss">
+.flex-row {
+  position: relative;
+  z-index: 2;
 }
 
-.text-btn {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 26px;
-  color: #f0e8e4;
-  white-space: normal !important;
-  text-align: left;
-}
-.btn-container {
+.main {
+  min-height: 600px;
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center 15%;
+  background-repeat: no-repeat;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
-  margin-top: 5rem;
-}
-
-.container-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 20rem;
-  height: 3.5rem;
+  position: relative;
 }
 
-.icon-button {
-  color: #fff;
-  margin-right: 0.7rem;
-  margin-left: 1rem;
+.main::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
   z-index: 1;
-  width: 30px;
 }
-.btn-faq-tuto {
-  z-index: 1;
 
-  width: 23rem;
-  height: 5.5rem;
+h3 {
+  font-family: "Barlow", serif;
   margin-left: 3rem;
-  border-radius: 6px;
-  font-family: "Barlow";
-  background: transparent;
-  color: #fff;
+  margin-right: 15rem;
+  width: 28rem;
+  margin-bottom: 3rem;
+  font-size: 30px;
   font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  line-height: 1rem;
-  border: 1px white solid;
-  margin-bottom: 2rem;
-  text-transform: none !important;
+  font-weight: 400;
 }
 
 .btn-faq {
   width: 14rem;
   height: 3.5rem;
   margin-left: 3rem;
-  background: #ffffff;
   border-radius: 6px;
-  font-family: "Barlow";
+  font-family: "Barlow", serif;
   font-style: normal;
   font-weight: 500;
   font-size: 0.8rem;
   z-index: 1;
-
   text-transform: none !important;
   line-height: 1rem;
 }
-.title-faq {
-  color: #fff;
-  font-family: "Barlow";
-  margin-left: 3rem;
-  margin-right: 15rem;
-  width: 28rem;
-  margin-bottom: 3rem;
 
-  color: var(--NEUTRAL---BLANC, #fff);
+.links {
+  .v-btn {
+    z-index: 1;
+    width: 23rem;
+    height: 5.5rem;
+    margin-left: 3rem;
+    border-radius: 6px;
+    font-family: "Barlow", serif;
+    background: transparent;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 0.8rem;
+    line-height: 1rem;
+    border: 1px var(--on-alt-theme) solid;
+    margin-bottom: 2rem;
+    text-transform: none !important;
 
-  font-size: 30px;
-  font-style: normal;
-  font-weight: 400;
-}
+    .v-btn__content>div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
 
-.container-img {
-  background-image: url("/images/logiciels/school/faq.jpg");
-  background-size: cover;
-  background-position: center 15%;
-  background-repeat: no-repeat;
-  height: 37rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.container-img::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 1;
-}
+    .v-img {
+      color: var(--on-alt-theme);
+      margin-right: 0.7rem;
+      margin-left: 1rem;
+      z-index: 1;
+      width: 30px;
+    }
 
-.v-row {
-  position: relative;
-  z-index: 2;
+    p {
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 26px;
+      color: var(--on-alt-theme);
+      white-space: normal !important;
+      text-align: left;
+    }
+  }
 }
 </style>