refact HomeEventAgenda and HomeBesoin components

components/Home/Besoin.vue

@@ -1,23 +1,23 @@
 <template>
   <LayoutContainer :overflow="false">
-    <v-row class="mt-6" justify="center" v-if="!mdAndDown" >
-      <v-col cols="6" class="relative-container" >
-        <div class="screen-img ml-4"></div>
-        <!-- <div class="circle">
-          <v-icon class="fa-brands fa-react icon" />
-          <div class="circle-text">Réponse aux besoins</div>
-        </div> -->
+    <v-row
+      v-if="!mdAndDown"
+      class="mt-6"
+      justify="center"
+    >
+      <v-col cols="6">
+        <div class="screen-img ml-4" />
       </v-col>
 
       <v-col cols="6" >
-        <h3 class="title-event mt-12">
+        <h3 class="mt-12">
           Une solution évolutive pour vous donner entière satisfaction
         </h3>
 
         <p class="details ">
           La satisfaction de nos clients est notre première motivation et nous
           nous tenons à votre écoute pour faire évoluer notre logiciel. <br />
-          <span class="bold">Un besoin ?</span> <br />
+          <b>Un besoin ?</b> <br />
           Notifiez le nous et après l'étude de votre demande en interne puis
           validation, nous intégrerons votre requête à notre processus de
           développement.
@@ -27,13 +27,12 @@
   </LayoutContainer>
 </template>
 
-<script setup>
-import { useDisplay } from "vuetify";
-const { smAndDown, mdAndDown } = useDisplay();
+<script setup lang="ts">
+  import { useDisplay } from "vuetify";
+  const { mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
-
 .v-row
 {
   margin-left:auto !important;
@@ -41,17 +40,7 @@ const { smAndDown, mdAndDown } = useDisplay();
   max-width: 1400px !important;
 }
 
-
-
-.relative-container {
-  position: relative;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.title-event {
+h3 {
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 38px;
@@ -61,7 +50,7 @@ const { smAndDown, mdAndDown } = useDisplay();
   width: 16rem;
 }
 
-.details {
+p {
   font-weight: 400;
   font-size: 1rem;
   margin-top: 3rem;

components/Home/EventAgenda.vue

@@ -1,25 +1,27 @@
+<!--
+Section "Agenda" de la page d'accueil
+-->
 <template>
   <LayoutContainer :overflow="false">
-    <div :class="mdAndDown ? '' :'container'">
-      <div class="title-container">
-        <h2 class="title">
+    <div class="container">
+      <div class="d-flex align-center justify-center">
+        <h2>
           Retrouvez tous vos évènements dans l'agenda et référencez vous dans
           l'annuaire
         </h2>
       </div>
+
       <v-row justify="center">
-        <div :class="mdAndDown ? 'btn-container-md' : 'btn-container'">
+        <div class="btn-container">
           <v-col cols="12" md="6">
-            <v-btn class="btn-event">
-              <span>Découvrir l'agenda</span>
-              <v-icon class="fa-solid fa-arrow-right icon-arrow" />
+            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
+              Découvrir l'agenda
             </v-btn>
           </v-col>
 
           <v-col cols="12" md="6">
-            <v-btn class="btn-event">
+            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
               Découvrir l’ANNUAIRE
-              <v-icon class="fa-solid fa-arrow-right icon-arrow" />
             </v-btn>
           </v-col>
         </div>
@@ -34,10 +36,34 @@ const { lgAndUp, mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
-.icon-arrow {
-  font-size: 1rem;
-  margin-left: 1rem;
+
+@media (min-width: 600px) {
+  .container {
+    height: 35rem;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    linear-gradient(
+      180deg,
+      rgba(14, 45, 50, 0.04) 0%,
+      rgba(14, 45, 50, 0.2) 100%
+    ),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
+    background-size: cover;
+  }
 }
+
+h2 {
+  height: 9rem;
+  font-weight: 400;
+  font-size: 3rem;
+  line-height: 3rem;
+  text-align: center;
+  margin-bottom: 3rem;
+  margin-top: 4rem;
+  color: #ffffff;
+  width: 45rem;
+}
+
 .btn-container {
   display: flex;
   align-items: center;
@@ -45,9 +71,12 @@ const { lgAndUp, mdAndDown } = useDisplay();
   padding: 0 20rem;
 }
 
-.btn-container-md {
-  padding: 0 5rem;
+@media (max-width: 960px) {
+  .btn-container {
+    padding: 0 5rem;
+  }
 }
+
 .btn-event {
   border-radius: 0.5rem;
   gap: 9px;
@@ -60,35 +89,4 @@ const { lgAndUp, mdAndDown } = useDisplay();
   max-width: 20rem;
   height: 3.5rem;
 }
-.title {
-  height: 9rem;
-  font-weight: 400;
-  font-size: 3rem;
-  line-height: 3rem;
-  text-align: center;
-  margin-bottom: 3rem;
-  margin-top: 4rem;
-  color: #ffffff;
-  width: 45rem;
-}
-
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container,
-.container-sm {
-  height: 35rem;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-    linear-gradient(
-      180deg,
-      rgba(14, 45, 50, 0.04) 0%,
-      rgba(14, 45, 50, 0.2) 100%
-    ),
-    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
-  background-size: cover;
-}
 </style>

components/Home/Solution.vue

@@ -151,6 +151,12 @@ const solutions: Array<SolutionItem> = [
 </script>
 
 <style scoped lang="scss">
+.container {
+  background: #0e2d32;
+  margin-bottom: 15rem;
+  height: 36rem;
+  position: relative;
+}
 
 h5 {
   font-size: 1rem;