formation and about pages are now responsive for sm screens

components/About/FAQ.vue

@@ -2,23 +2,23 @@
   <AnchoredSection id="help">
     <LayoutContainer>
       <v-row no-gutters class="alt-theme">
-        <v-col cols="6">
+        <v-col cols="12" md="6">
            <v-img
              src="/images/help/Help.png"
              cover
            />
         </v-col>
 
-        <v-col cols="6">
-          <div class="ml-6">
-            <h4 class="ml-12">
+        <v-col cols="12" md="6">
+          <div>
+            <h4>
               Chez Opentalent, nous avons à coeur de répondre à vos interrogations
               et de vous apporter la solution faite pour vous.
             </h4>
 
             <v-btn
               to="/nous-contacter"
-              class="ml-12 mt-12"
+              class="mt-12"
             >
               Nous contacter
             </v-btn>
@@ -46,14 +46,18 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 h4 {
-  margin-bottom: 2rem;
-  margin-top: 3rem;
   font-weight: 400;
   font-size: 2rem;
   line-height: 34px;
   width: 40rem;
-  margin-right: auto;
+  margin: 3rem auto 2rem 62px;
   color: var(--on-primary-color);
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin-left: 10%;
+    text-align: justify;
+  }
 }
 
 .v-btn {
@@ -64,6 +68,12 @@ h4 {
   color: var(--on-secondary-color);
   padding: 19px 28px;
   gap: 9px;
-  margin-left: 2rem;
+  margin-left: 84px;
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin-left: 10%;
+    margin-bottom: 48px;
+  }
 }
 </style>

components/About/Logiciels.vue

@@ -12,7 +12,7 @@
       </v-row>
 
       <v-row class="mb-12 center-90">
-        <v-col cols="3">
+        <v-col md="3">
           <p class="text-justify mr-4 ml-6 mb-6">
             Découvrez notre gamme de logiciels de gestion & de communication
             adapté au secteur culturel. <br />
@@ -34,7 +34,8 @@
         </v-col>
 
         <v-col
-          cols="3"
+          cols="12"
+          md="3"
           v-for="(item, index) in items"
           :key="index"
           :class="item.class"

components/About/Presentation.vue

@@ -2,13 +2,13 @@
   <AnchoredSection id="about">
     <LayoutContainer>
       <v-row class="mt-12 center-90">
-        <v-col cols="4">
+        <v-col md="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
           </LayoutUISubTitle>
         </v-col>
 
-        <v-col cols="8">
+        <v-col md="8">
           <div class="italic-title mr-8">
             “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
             la référence pour la gestion et la promotion du spectacle vivant sur
@@ -18,11 +18,11 @@
       </v-row>
 
       <v-row class="history mb-12">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img src="/images/about/passion.jpg" cover />
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <h3>
             Une histoire de passionnés
           </h3>
@@ -94,6 +94,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     width: 400px;
     height: 100%;
     border-radius: 20px;
+
+    @media (max-width: 600px) {
+      width: 90%;
+    }
   }
 
   h3 {
@@ -112,6 +116,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     margin-bottom: 3rem;
     width: 25rem;
     text-align: justify;
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
   }
 
   p {
@@ -121,6 +129,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     line-height: 20px;
     width: 30rem;
     margin-bottom: 2rem;
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
   }
 }
 

components/About/Valeurs.vue

@@ -8,7 +8,7 @@
       </v-row>
 
       <v-row class="mt-6 center-90 align-center mb-12">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/about/valeurs/valeur.png"
             cover
@@ -16,14 +16,15 @@
           />
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <div class="values">
             <v-row
               v-for="(row, rowIndex) in values"
               :key="rowIndex"
             >
               <v-col
-                cols="6"
+                cols="12"
+                md="6"
                 v-for="(value, valueIndex) in row"
                 :key="valueIndex"
               >
@@ -98,6 +99,11 @@ const values: Array<Array<SocietyValue>> = [
     width: 50px;
     height: 50px;
     margin-bottom: 1rem;
+
+    @media (max-width: 600px) {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 
   h6 {

components/Common/Banner.vue

@@ -99,6 +99,10 @@ const props = defineProps({
   object-position: center var(--banner-center-image);
   transition: transform 0.2s;
   margin: 0 auto;
+
+  @media (max-width: 600px) {
+    min-height: 0;
+  }
 }
 
 .reverse {

components/Common/ReviewSection.vue

@@ -186,7 +186,15 @@ const goNext = () => {
     align-items: center;
     letter-spacing: 0.18em;
     text-transform: uppercase;
-    text-align: justify !important;
+
+    @media (min-width: 600px) {
+      text-align: justify !important;
+    }
+
+    @media (max-width: 600px) {
+      margin: 12px auto;
+      text-align: center !important;
+    }
   }
 
   .reviewer-structure {
@@ -225,4 +233,11 @@ const goNext = () => {
     max-height: 360px !important;
   }
 }
+
+@media (max-width:600px) {
+  :deep(.v-carousel__controls) {
+    color: var(--on-neutral-color);
+    background-color: var(--neutral-color);
+  }
+}
 </style>

components/Formation/Certification.vue

@@ -2,7 +2,7 @@
   <AnchoredSection id="certification">
     <LayoutContainer>
       <v-row class="center-90">
-        <v-col cols="5">
+        <v-col cols="12" md="5">
           <LayoutUISubTitle>
             DES FORMATIONS CERTIFIÉES
           </LayoutUISubTitle>
@@ -34,7 +34,7 @@
           </div>
         </v-col>
 
-        <v-col cols="7">
+        <v-col cols="12" md="7">
           <v-img src="/images/formation/qualiopi.jpg" />
         </v-col>
       </v-row>

components/Formation/OPCA.vue

@@ -9,7 +9,7 @@
 
       <v-container>
         <v-row class="align-center center-90">
-          <v-col cols="6">
+          <v-col cols="12" md="6">
             <v-img
               src="/images/formation/programme.jpg"
               class="opca-img"
@@ -17,7 +17,7 @@
             />
           </v-col>
 
-          <v-col cols="12" md="6" lg="6">
+          <v-col cols="12" md="6">
             <v-row>
               <h3 class="mt-6 mb-6 mr-6">
                 Des formations éligibles par votre OPCA

components/Formation/Participation.vue

@@ -105,6 +105,7 @@ h3 {
   line-height: 20px;
   margin: 1rem auto auto auto;
   width: 800px;
+  max-width: 100%;
   color: var(--on-primary-color);
 }
 

components/Formation/Presentation.vue

@@ -8,13 +8,13 @@
       </v-row>
 
       <v-row class="mb-12 center-90">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/formation/programme2.jpg"
             class="programme-img1"/>
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <h3 class="title-programme mb-6">
             Un programme de formation complet sur nos logiciels
           </h3>
@@ -39,7 +39,7 @@
       </v-row>
 
       <v-row class="center-90">
-        <v-col cols="6">
+        <v-col md="6">
           <h3 class="title-programme mb-6 mt-4">
             Des formations à la demande et sur-mesure
           </h3>
@@ -52,7 +52,7 @@
           </p>
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/formation/programme.jpg"
             class="programme-img2"
@@ -72,10 +72,16 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   width: 80%;
   height: 100%;
   border-radius: 10%;
+
+  @media (max-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 h3, p {
-    width: 35rem;
+  width: 35rem;
+  max-width: 100%;
 }
 
 h3 {

components/Layout/UI/TitlePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4">
+  <div :class="'mb-4' + mdAndDown ? ' mt-12' : ''">
     <h1>
       <slot />
     </h1>
@@ -9,9 +9,13 @@
   </div>
 </template>
 
-<style scoped lang="scss">
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
 
+const { mdAndDown } = useDisplay()
+</script>
 
+<style scoped lang="scss">
 h1, h2 {
   text-align: center;
   text-transform: uppercase;

components/Webinaire/Catalogue.vue

@@ -24,7 +24,8 @@
         <v-col
           v-for="(course, index) in courses"
           :key="index"
-          cols="4"
+          cols="12"
+          md="4"
         >
           <v-card class="mb-4">
             <v-card-text>
@@ -343,7 +344,10 @@ const closeModal = () => {
     color: var(--primary-color);
     margin-top: 1rem;
     margin-bottom: 0.5rem;
-    height: 5rem;
+
+    @media (min-width: 600px) {
+      height: 5rem;
+    }
   }
 
   .objectives, .program {
@@ -354,7 +358,10 @@ const closeModal = () => {
     margin-bottom: 1rem;
     border-radius: 1rem;
     padding: 1rem 1rem 1rem 1.5rem;
-    height: 11rem;
+
+    @media (min-width: 600px) {
+      height: 11rem;
+    }
 
     h6 {
       font-weight: 500;

pages/formations.vue

@@ -20,7 +20,7 @@
     </template>
   </CommonBanner>
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+  <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
   <CommonActionMenu />
 

pages/index.vue

@@ -6,7 +6,7 @@
 
   <CommonActionMenu />
 
-  <LayoutUITitlePage :class="mdAndDown ? 'mt-12' : ''">
+  <LayoutUITitlePage>
     LOGICIELS CULTURELS
     <template #subtitle>UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</template>
   </LayoutUITitlePage>

pages/qui-sommes-nous.vue

@@ -17,7 +17,7 @@
     imageAlt="banner"
   />
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+  <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
   <CommonActionMenu />