implement responsiveness in the home page caroussel

components/Home/Caroussel.vue

@@ -9,7 +9,7 @@ Carrousel de la page d'accueil
     :hide-delimiter-background="true"
     :show-delimiters="false"
     :touch="true"
-    :wrap-around="true"
+    :height="lgAndUp ? 500 : 800"
     :interval="5000"
   >
     <v-carousel-item
@@ -70,7 +70,7 @@ Carrousel de la page d'accueil
 
             <v-img
               :src="item.image"
-              :class="smAndDown ? 'image-sm' : 'image'"
+              class="image"
             />
           </v-row>
         </v-col>
@@ -93,7 +93,7 @@ Carrousel de la page d'accueil
 
 import { useDisplay } from "vuetify";
 import type { CarouselItem } from "~/types/interface";
-const { smAndDown, mdAndDown } = useDisplay();
+const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 
 // Index de la slide active
 let activeIndex: Ref<number> = ref(0);
@@ -226,6 +226,17 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
   .btn-manager {
     background: var(--manager-color-light);
   }
+
+  @media (max-width: 1280px) {
+    padding-bottom: 48px;
+    min-height: 50%;
+
+    .description {
+      width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }
 
 /* ============= Colonne droite - Illustration ===============  */
@@ -287,5 +298,17 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     height: 35rem;
     right: 5rem;
   }
+
+  @media (max-width: 1280px) {
+    .background-rectangle {
+      top: 60%;
+      height: 14rem;
+    }
+
+    .image {
+      height: 20rem;
+      right: 0;
+    }
+  }
 }
 </style>

components/Home/Promotion.vue

@@ -36,7 +36,7 @@
       </v-col>
     </v-row>
 
-    <v-row class="demo">
+    <v-row v-if="mdAndUp" class="demo">
       <v-col>
         <v-img
           src="/images/home/écran.JPG"
@@ -96,6 +96,10 @@
 </template>
 
 <script setup lang="ts">
+
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">

components/Layout/UI/TitlePage.vue

@@ -10,6 +10,8 @@
 </template>
 
 <style scoped lang="scss">
+
+
 h1, h2 {
   text-align: center;
   text-transform: uppercase;

pages/index.vue

@@ -11,7 +11,7 @@
     <template #subtitle>UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</template>
   </LayoutUITitlePage>
 
-  <HomeCaroussel v-if="mdAndUp"/>
+  <HomeCaroussel />
 
   <HomePromotion />