make home sections Promotion and Solution responsive

components/Home/Promotion.vue

@@ -36,7 +36,7 @@
       </v-col>
     </v-row>
 
-    <v-row v-if="mdAndUp" class="demo">
+    <v-row class="demo">
       <v-col>
         <v-img
           src="/images/home/écran.JPG"
@@ -48,7 +48,7 @@
       </v-col>
     </v-row>
 
-    <section class="outil">
+    <v-row class="outil">
       <v-row>
         <v-col>
           <h3>
@@ -91,7 +91,7 @@
           </v-row>
         </v-col>
       </v-row>
-    </section>
+    </v-row>
   </LayoutContainer>
 </template>
 
@@ -138,6 +138,10 @@ const { mdAndUp } = useDisplay()
   }
 
   @media (max-width: 960px) {
+    >.v-col {
+      margin-bottom: 0;
+    }
+
     .text-block {
       font-weight: 500;
       font-size: 2rem;
@@ -155,8 +159,6 @@ const { mdAndUp } = useDisplay()
 }
 
 .v-row.demo {
-  margin-bottom: -28rem;
-
   .screen {
     width: 900px;
     object-fit: cover;
@@ -167,9 +169,12 @@ const { mdAndUp } = useDisplay()
     bottom: 30rem;
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1280px) {
     .screen {
+      margin-top: -12px;
+      bottom: 0;
       width: 100%;
+      border-radius: 0;
     }
   }
 
@@ -191,7 +196,7 @@ const { mdAndUp } = useDisplay()
   }
 }
 
-section.outil {
+.outil {
   margin-bottom: 36px;
 
   h3 {
@@ -230,6 +235,10 @@ section.outil {
       color: var(--primary-color);
       margin-bottom: 1rem;
     }
+
+
+    @media (max-width: 1280px) {
+    }
   }
 }
 </style>

components/Home/Solution.vue

@@ -16,7 +16,8 @@ Section "Solutions" de la page d'accueil
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
-        cols="4"
+        cols="12"
+        lg="4"
       >
         <v-container>
           <div class="d-flex justify-center align-left flex-column">
@@ -38,7 +39,7 @@ Section "Solutions" de la page d'accueil
               <v-row>
                 <div :class="['image-container', solution.class]" >
                   <v-img :src="solution.image" />
-                  <v-btn>Découvrir</v-btn>
+                  <v-btn v-if="xlAndUp">Découvrir</v-btn>
                 </div>
               </v-row>
             </nuxt-link>
@@ -68,6 +69,10 @@ Section "Solutions" de la page d'accueil
                 </v-col>
               </div>
             </v-row>
+
+            <v-row v-if="lgAndDown">
+              <v-btn :to="solution.link">Découvrir</v-btn>
+            </v-row>
           </div>
         </v-container>
       </v-col>
@@ -86,6 +91,9 @@ Section "Solutions" de la page d'accueil
 <script setup lang="ts">
 
 import type { SolutionItem } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { xlAndUp, lgAndDown } = useDisplay()
 
 const solutions: Array<SolutionItem> = [
   {
@@ -148,6 +156,10 @@ const solutions: Array<SolutionItem> = [
   margin-bottom: 15rem;
   height: 36rem;
   position: relative;
+
+  @media (max-width: 1240px) {
+    height: 100%;
+  }
 }
 
 h4 {
@@ -157,6 +169,10 @@ h4 {
   text-align: center;
   color: var(--on-primary-color);
   width: 100%;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+  }
 }
 
 @media (min-width: 600px) {
@@ -166,7 +182,6 @@ h4 {
 }
 
 .v-row.solutions {
-
   small {
     font-weight: 600;
     font-size: 10px;
@@ -216,6 +231,12 @@ h4 {
       right: 0;
       width: 200px;
     }
+
+    @media (max-width: 1240px) {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
   }
 
   .image-container::before {
@@ -232,18 +253,27 @@ h4 {
   }
 
   .v-btn {
-    position: absolute;
-    z-index: 100;
-    bottom: 40%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: none;
     font-size: 0.8rem;
     border-radius: 6px;
     background: var(--secondary-color);
     color: var(--on-primary-color);
+
+    @media (min-width: 1240px) {
+      position: absolute;
+      z-index: 100;
+      bottom: 40%;
+      transform: translateX(-50%);
+      display: none;
+    }
+
+    @media (max-width: 1240px) {
+      width: 90%;
+      margin: 24px auto;
+    }
   }
 
+
+
   .image-container:hover .v-btn {
     display: block;
   }
@@ -291,7 +321,13 @@ h4 {
       margin-left: 1rem;
       line-height: 18px;
       color: var(--primary-color);
+
+      @media (max-width: 1240px) {
+        font-size: 1.1rem;
+        color: var(--on-primary-color);
+      }
     }
+
   }
 }
 
@@ -299,6 +335,11 @@ h4 {
   p {
     text-align: right;
     font-size: 12px;
+    
+    @media (max-width: 1240px) {
+      font-size: 1.1rem;
+      color: var(--on-primary-color);
+    }
   }
 }
 </style>