adapt home page for sm screens too

components/Common/Carousel/Clients.vue

@@ -15,6 +15,7 @@
       <v-row>
         <!-- Fléche de gauche -->
         <v-btn
+          v-if="mdAndUp"
           icon="fas fa-chevron-left"
           @click="goToPrevious"
         />
@@ -34,6 +35,18 @@
         </Carousel>
 
         <!-- Fléche de droite -->
+        <v-btn
+          v-if="mdAndUp"
+          icon="fas fa-chevron-right"
+          @click="goToNext"
+        />
+      </v-row>
+
+      <v-row v-if="mdAndDown">
+        <v-btn
+          icon="fas fa-chevron-left"
+          @click="goToPrevious"
+        />
         <v-btn
           icon="fas fa-chevron-right"
           @click="goToNext"
@@ -48,7 +61,7 @@ import { Carousel, Slide } from "vue3-carousel";
 import type { PropType } from "@vue/runtime-core";
 import { useDisplay } from "vuetify";
 
-const { lgAndUp } = useDisplay()
+const { mdAndUp, lgAndUp, mdAndDown } = useDisplay()
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -118,7 +131,12 @@ h3 {
 
   @media (max-width: 1240px) {
     width: 50%;
-    min-width: 180px;
+    min-width: 600px;
+  }
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    min-width: 90%;
   }
 }
 

components/Home/Besoin.vue

@@ -65,6 +65,15 @@ p {
   background-size: cover;
   width: 700px;
   height: 500px;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    height: 400px;
+  }
+
+  @media (max-width: 600px) {
+    height: 240px;
+  }
 }
 
 .detail-col {

components/Home/Caroussel.vue

@@ -24,7 +24,7 @@ Carrousel de la page d'accueil
             class="logo"
           />
 
-          <p class="description" v-html="item.description" />
+          <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />
 
           <v-row class="align-start pl-4">
             <v-btn
@@ -107,6 +107,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/School-noir.png",
     description:
       "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
+    descriptionSm:
+      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
     buttonClass: "btn-school",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
@@ -121,6 +123,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/Artist-noir.png",
     description:
       "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. <br> Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
+    descriptionSm:
+      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
     buttonClass: "btn-artist",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
@@ -135,6 +139,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/Manager-noir.png",
     description:
       "La solution de mise en réseau des organisations culturelles.<br> Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
+    descriptionSm:
+      "La solution de mise en réseau des organisations culturelles, telles que les fédérations, confédérations et collectivités.",
     buttonClass: "btn-manager",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
@@ -185,6 +191,11 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     width: 20rem;
     margin-top: 10px;
     margin-left: 6rem;
+
+    @media (max-width: 600px) {
+      width: 15rem;
+      margin-left: 1rem;
+    }
   }
 
   .description {
@@ -208,6 +219,11 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     width: 10rem;
     height: 2.5rem;
     margin-left: 7rem;
+
+    @media (max-width: 600px) {
+      width: 80%;
+      margin: 15px auto;
+    }
   }
 
   .learn-more-btn :deep(.v-btn__append) {

components/Home/EventAgenda.vue

@@ -70,6 +70,13 @@ h3 {
   margin-top: 4rem;
   color: var(--on-primary-color);
   width: 45rem;
+
+  @media (max-width: 600px) {
+    font-size: 2rem;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 80%;
+  }
 }
 
 .btn-container {
@@ -88,6 +95,10 @@ h3 {
       margin: 5px auto;
     }
   }
+
+  @media (max-width: 1600px) {
+    padding: 0 5%;
+  }
 }
 
 .btn-event {
@@ -106,6 +117,7 @@ h3 {
     width: 100%;
     max-width: 100%;
     margin: 0;
+    min-width: 0;
   }
 }
 

components/Home/Help.vue

@@ -76,6 +76,14 @@ Section "Besoin d'aide" de la page d'accueil
     padding: 60px;
     justify-content: center;
     align-items: self-start;
+
+    @media (max-width: 600px) {
+      padding: 12px;
+
+      * {
+        max-width: 100%;
+      }
+    }
   }
 }
 

components/Home/Promotion.vue

@@ -61,33 +61,49 @@
       <v-row class="pictos">
         <v-col cols="12" lg="6">
           <v-row>
-            <img src="/images/pictoHome/network.svg" alt="network" />
-            <p>
-              Logiciel de gestion et communication en ligne
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/network.svg" alt="network" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Logiciel de gestion et communication en ligne
+              </p>
+            </v-col>
           </v-row>
 
           <v-row>
-            <img src="/images/pictoHome/website.svg" alt="website" />
-            <p>
-              Site web intégré et simple d’usage
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/website.svg" alt="website" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Site web intégré et simple d’usage
+              </p>
+            </v-col>
           </v-row>
         </v-col>
 
         <v-col cols="12" lg="6">
           <v-row>
-            <img src="/images/pictoHome/visibility.svg" alt="visibility" />
-            <p>
-              Augmentez votre visibilité avec l'agenda culturel
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/visibility.svg" alt="visibility" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Augmentez votre visibilité avec l'agenda culturel
+              </p>
+            </v-col>
           </v-row>
 
           <v-row>
-            <img src="/images/pictoHome/communication.svg" alt="communication" />
-            <p>
-              Communiquez en réseau
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/communication.svg" alt="communication" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Communiquez en réseau
+              </p>
+            </v-col>
           </v-row>
         </v-col>
       </v-row>
@@ -199,6 +215,12 @@ const { mdAndUp } = useDisplay()
 .outil {
   margin-bottom: 36px;
 
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   h3 {
     color: var(--primary-color);
     font-size: 2rem;
@@ -209,16 +231,25 @@ const { mdAndUp } = useDisplay()
 
   .pictos {
     .v-row {
-      border-bottom: solid 1px var(--on-primary-color-alt);
+      border-bottom: solid 2px var(--on-neutral-color-extra-light);
       margin: 0;
       height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
+
+      @media (max-width: 600px) {
+        width: 90%;
+      }
     }
 
-    .v-row:first-child {
-      border-top: solid 1px var(--on-primary-color-alt);
+    .v-col:first-child .v-row:first-child, .v-col-12:first-child .v-row:first-child {
+      border-top: solid 2px var(--on-neutral-color-extra-light);
+    }
+
+    >.v-col-12 {
+      padding-top : 0;
+      padding-bottom : 0;
     }
 
     img {
@@ -232,12 +263,14 @@ const { mdAndUp } = useDisplay()
       font-size: 22px;
       line-height: 26px;
       width: 25rem;
+      max-width: 100%;
       color: var(--primary-color);
       margin-bottom: 1rem;
-    }
-
 
-    @media (max-width: 1280px) {
+      @media (max-width: 600px) {
+        width: 90%;
+        margin-bottom: 0;
+      }
     }
   }
 }

components/Home/Solution.vue

@@ -44,30 +44,28 @@ Section "Solutions" de la page d'accueil
               </v-row>
             </nuxt-link>
 
-            <v-row>
-              <div class="details">
-                <v-col cols="6">
-                  <ul>
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                      :key="i"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-
-                <v-col cols="6">
-                  <ul>
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(4)"
-                      :key="i"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-              </div>
+            <v-row class="details">
+              <v-col cols="12" md="6">
+                <ul>
+                  <li
+                    v-for="(sol, i) in solution.solutions.slice(0, 4)"
+                    :key="i"
+                  >
+                    {{ sol }}
+                  </li>
+                </ul>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <ul>
+                  <li
+                    v-for="(sol, i) in solution.solutions.slice(4)"
+                    :key="i"
+                  >
+                    {{ sol }}
+                  </li>
+                </ul>
+              </v-col>
             </v-row>
 
             <v-row v-if="lgAndDown">
@@ -173,6 +171,12 @@ h4 {
 
   @media (max-width: 1240px) {
     width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (max-width: 600px) {
+    font-size: 1.6rem;
   }
 }
 
@@ -327,6 +331,20 @@ h4 {
       }
     }
 
+
+    @media (max-width: 600px) {
+      padding: 18px;
+
+      ul {
+        margin-top: 0;
+      }
+
+      .v-col-12 {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
   }
 }
 

components/Layout/Footer/Footer.vue

@@ -395,6 +395,12 @@ a {
     text-decoration: none;
     color: var(--on-primary-color);
     font-size: 0.8rem;
+
+    @media (max-width: 600px) {
+      max-width: 90%;
+      text-align: center;
+
+    }
   }
 }
 

components/Layout/UI/TitlePage.vue

@@ -33,7 +33,7 @@ h2 {
   margin-right: 1rem;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1240px) {
   h1 {
     font-size: 2rem;
     line-height: 2.5rem;
@@ -45,4 +45,23 @@ h2 {
   }
 }
 
+@media (max-width: 600px) {
+
+  h1, h2 {
+    width: 80%;
+    margin: auto
+  }
+
+  h1 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+    margin-bottom: 18px;
+  }
+
+  h2 {
+    letter-spacing: 0.1rem;
+    font-size: 1.2rem;
+  }
+}
+
 </style>

pages/opentalent_artist.vue

@@ -20,7 +20,7 @@
       logo-src="/images/logo/logiciels/Artist-noir.png"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <LogicielsArtistPresentation />
 
@@ -49,7 +49,7 @@ import { ActionMenuItemType } from "~/types/enum/layout";
 import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },

types/interface.d.ts

@@ -17,6 +17,7 @@ interface MainMenuItem {
 interface CarouselItem {
   logo: string,
   description: string,
+  descriptionSm: string,
   buttonClass: string,
   image: string,
   color: string,