finalize responsiveness for home page

components/Common/Carousel/Clients.vue

@@ -23,8 +23,8 @@
         <Carousel
           ref="carousel"
           class="elevation-4 mb-12"
-          :items-to-show="4"
-          :items-to-scroll="2"
+          :items-to-show="lgAndUp ? 4 : 1"
+          :items-to-scroll="lgAndUp ? 2 : 1"
         >
           <Slide v-for="(item, index) in items" :key="index">
             <div>
@@ -46,6 +46,9 @@
 <script setup lang="ts">
 import { Carousel, Slide } from "vue3-carousel";
 import type { PropType } from "@vue/runtime-core";
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -86,7 +89,7 @@ h3 {
 }
 
 .alt-color {
-  color: var(--on-primary-color-alt);
+  color: var(--on-primary-color-alt) !important;
 }
 
 .v-btn {
@@ -112,6 +115,11 @@ h3 {
   margin-left: auto;
   margin-right: auto;
   box-shadow: var(--primary-color);
+
+  @media (max-width: 1240px) {
+    width: 50%;
+    min-width: 180px;
+  }
 }
 
 .v-img {

components/Home/Besoin.vue

@@ -1,15 +1,14 @@
 <template>
   <LayoutContainer>
     <v-row
-      v-if="!mdAndDown"
       class="mt-6"
       justify="center"
     >
-      <v-col cols="6">
+      <v-col cols="12" lg="6">
         <div class="screen-img ml-4" />
       </v-col>
 
-      <v-col cols="6" >
+      <v-col cols="12" lg="6" class="detail-col" >
         <h3 class="mt-12">
           Une solution évolutive pour vous donner entière satisfaction
         </h3>
@@ -67,4 +66,20 @@ p {
   width: 700px;
   height: 500px;
 }
+
+.detail-col {
+  @media (max-width: 1240px) {
+    * {
+      width: 80%;
+      margin: auto;
+      text-align: justify;
+    }
+
+    h3 {
+      margin-bottom: 16px;
+      text-align: center;
+      font-weight: 600;
+    }
+  }
+}
 </style>

components/Home/EventAgenda.vue

@@ -11,30 +11,29 @@ Section "Agenda" de la page d'accueil
         </h3>
       </div>
 
-      <v-row justify="center">
-        <div class="btn-container">
-          <v-col cols="12" md="6">
-            <AgendaLink href="/">
-              <v-btn
-                append-icon="fas fa-arrow-right"
-                class="btn-event"
-              >
-                Découvrir l'agenda
-              </v-btn>
-            </AgendaLink>
-          </v-col>
+      <v-row justify="center" class="btn-container">
+        <v-col cols="12" lg="6">
+          <AgendaLink href="/">
+            <v-btn
+              append-icon="fas fa-arrow-right"
+              class="btn-event"
+            >
+              Découvrir l'agenda
+            </v-btn>
+          </AgendaLink>
+        </v-col>
 
-          <v-col cols="12" md="6">
-            <AgendaLink href="/annuaire">
-              <v-btn
-                append-icon="fas fa-arrow-right"
-                class="btn-event"
-              >
-                Découvrir l’annuaire
-              </v-btn>
-            </AgendaLink>
-          </v-col>
-        </div>
+        <v-col cols="12" lg="6">
+          <AgendaLink href="/annuaire">
+            <v-btn
+              append-icon="fas fa-arrow-right"
+              :variant="lgAndUp ? 'default' : 'outlined'"
+              class="btn-event btn-annuaire"
+            >
+              Découvrir l’annuaire
+            </v-btn>
+          </AgendaLink>
+        </v-col>
       </v-row>
     </div>
   </LayoutContainer>
@@ -43,24 +42,22 @@ Section "Agenda" de la page d'accueil
 <script setup>
 import { useDisplay } from "vuetify";
 import AgendaLink from "~/components/Common/AgendaLink.vue";
-const { mdAndDown } = useDisplay();
+const { lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
 
-@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;
-  }
+.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;
 }
 
 h3 {
@@ -80,11 +77,16 @@ h3 {
   align-items: center;
   justify-content: center;
   padding: 0 20rem;
-}
 
-@media (max-width: 960px) {
-  .btn-container {
+  @media (max-width: 1240px) {
     padding: 0 5rem;
+    margin-top: 48px;
+
+    a {
+      display: block;
+      width: 80%;
+      margin: 5px auto;
+    }
   }
 }
 
@@ -99,5 +101,19 @@ h3 {
   min-width: 20rem;
   max-width: 20rem;
   height: 3.5rem;
+
+  @media (max-width: 1240px) {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+}
+
+.btn-annuaire {
+  @media (max-width: 1240px) {
+    color: var(--on-primary-color);
+    font-weight: 600;
+    border: solid 2px var(--on-primary-color);
+  }
 }
 </style>

components/Home/Help.vue

@@ -128,7 +128,12 @@ ul {
   margin-right: auto;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1240px) {
+  .v-row {
+    width: 100%;
+    margin: 0;
+  }
+
   .v-img {
     width: 40rem;
     margin-left: auto;
@@ -163,6 +168,7 @@ ul {
   .button-faq {
     margin-left: 3rem;
     margin-top: 2rem;
+    width: 80%;
   }
 }
 </style>

components/Home/Reviews.vue

@@ -11,7 +11,7 @@
     </div>
 
     <!-- Ecrans larges -->
-    <div v-if="mdAndUp" class="container-2">
+    <div v-if="lgAndUp" class="container-2">
 
       <!-- Partie 1 : Avis clients -->
       <v-row justify="center">
@@ -134,7 +134,7 @@
         </div>
       </v-row>
 
-      <!-- Partie 1 : Carrousel logos clients -->
+      <!-- Partie 2 : Carrousel logos clients -->
       <div class="carousel-clients-container">
         <CommonCarouselClients :items="items" />
       </div>
@@ -190,6 +190,8 @@
           />
         </v-col>
       </v-row>
+
+      <CommonCarouselClients :items="items" class="alt-theme"/>
     </div>
   </LayoutContainer>
 </template>
@@ -200,7 +202,7 @@ import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
 import type { Review } from "~/types/interface";
 
-const { mdAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
 
 const reviewCarousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -266,7 +268,10 @@ const items: Ref<Array<{ src: string }>> = ref([
 
 .container-1 {
   background-color: var(--neutral-color);
-  height: 22rem;
+
+  @media (min-width: 1240px) {
+    height: 22rem;
+  }
 
   h4 {
     font-size: 2rem;
@@ -362,11 +367,12 @@ const items: Ref<Array<{ src: string }>> = ref([
 
 .container-sm {
   .v-card {
-    width: 300px;
+    width: 70%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 16px;
   }
 
   .carousel-controls {

components/Home/Solution.vue

@@ -159,6 +159,7 @@ const solutions: Array<SolutionItem> = [
 
   @media (max-width: 1240px) {
     height: 100%;
+    margin-bottom: 0;
   }
 }
 
@@ -272,8 +273,6 @@ h4 {
     }
   }
 
-
-
   .image-container:hover .v-btn {
     display: block;
   }
@@ -335,7 +334,7 @@ h4 {
   p {
     text-align: right;
     font-size: 12px;
-    
+
     @media (max-width: 1240px) {
       font-size: 1.1rem;
       color: var(--on-primary-color);