artist page responsive for md devices

components/Common/Card/Stat.vue

@@ -40,6 +40,10 @@ const props = defineProps({
     text-align: center;
     margin-bottom: 0.5rem;
   }
+
+  @media (max-width: 1240px) {
+    height: 12rem;
+  }
 }
 
 

components/Common/Carousel/Clients.vue

@@ -99,6 +99,10 @@ h3 {
   line-height: 42px;
   color: var(--on-primary-color);
   width: 50%;
+
+  @media (max-width: 1240px) {
+    width: 70%;
+  }
 }
 
 .alt-color {

components/Common/ContainerVideo.vue

@@ -8,7 +8,7 @@
               {{ title }}
             </LayoutUISubTitle>
 
-            <p class="quote">
+            <p v-if="lgAndUp" class="quote">
               {{ quote }}
             </p>
           </v-col>
@@ -27,6 +27,11 @@
 </template>
 
 <script setup lang="ts">
+
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
+
 const props = defineProps({
   title: {
     type: String,
@@ -66,6 +71,11 @@ const props = defineProps({
   background-position: center;
   width: 650px;
   height: 650px;
+
+  @media (max-width: 1240px) {
+    width: 400px;
+    height: 400px;
+  }
 }
 
 .quote {
@@ -87,5 +97,9 @@ const props = defineProps({
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
   height: 40rem;
+
+  @media (max-width: 1240px) {
+    height: 400px;
+  }
 }
 </style>

components/Common/Presentation.vue

@@ -7,7 +7,7 @@ Section "Présentation" d'une page Logiciel
       <v-row class="center-90">
 
         <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
-        <v-col cols="5">
+        <v-col cols="12" lg="5">
           <LayoutUISubTitle class="ml-8" >
             {{ title }}
           </LayoutUISubTitle>
@@ -48,7 +48,7 @@ Section "Présentation" d'une page Logiciel
         </v-col>
 
         <!-- Colonne 2 (présentation, pictogrammes des fonctionnalités) -->
-        <v-col cols="6">
+        <v-col cols="12" lg="6">
           <h3>
             {{ section1title }}
           </h3>

components/Common/ReviewSection.vue

@@ -1,13 +1,13 @@
 <template>
     <LayoutContainer>
       <v-row class="center-90">
-        <v-col cols="3">
+        <v-col cols="12" lg="3">
           <div class="controls-section">
             <h3>
               Ce sont eux qui en parlent le mieux
             </h3>
 
-            <div class="carousel-controls">
+            <div v-if="lgAndUp" class="carousel-controls">
               <v-btn
                 icon="fas fa-chevron-left"
                 @click="goPrevious"
@@ -20,14 +20,16 @@
           </div>
         </v-col>
 
-        <v-col cols="9">
-          <Carousel
+        <v-col cols="12" lg="9">
+          <v-carousel
             ref="carousel"
-            :items-to-show="3"
-            :items-to-scroll="1"
-            :wrap-around="true"
+            :items-to-show="lgAndUp ? 3 : 1"
+            :wrapAround="true"
+            :show-arrows="false"
+            height="350"
+            class="carousel"
           >
-            <Slide
+            <v-carousel-item
               v-for="(card, index) in cards"
               :key="index"
               class="card"
@@ -54,8 +56,8 @@
                   </v-card-actions>
                 </v-card>
               </v-container>
-            </Slide>
-          </Carousel>
+            </v-carousel-item>
+          </v-carousel>
         </v-col>
       </v-row>
   </LayoutContainer>
@@ -66,6 +68,7 @@ import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import type { PropType } from "@vue/runtime-core";
 import type { Review } from "~/types/interface";
+import { useDisplay } from "vuetify";
 
 const props = defineProps({
   cards: {
@@ -74,6 +77,8 @@ const props = defineProps({
   },
 });
 
+const { lgAndUp } = useDisplay()
+
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
 const goPrevious = () => {
@@ -138,6 +143,12 @@ const goNext = () => {
     max-height: 300px;
     margin-top: 2rem;
     margin-bottom: 0.6rem;
+
+    @media (max-width: 1240px) {
+      min-height: 120px;
+      max-width: 70%;
+      margin: 0 auto;
+    }
   }
 
   .v-card-item {
@@ -193,11 +204,19 @@ const goNext = () => {
       max-height: 150px !important;
     }
   }
+
+  @media (max-width: 1240px) {
+  }
 }
 
 .card {
   margin-left: 0.5rem;
   border-radius: 1rem;
+
+  @media (max-width:1240px) {
+    margin-left: 15%;
+    max-width: 70%;
+  }
 }
 
 @media (min-width:2100px) {

components/Common/Table/Comparatif.vue

@@ -114,6 +114,10 @@ table {
   margin-left: auto;
   border: none;
   border-collapse: collapse;
+
+  @media (max-width: 940px) {
+    width: 100%;
+  }
 }
 
 th {

components/Layout/FAQ.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="alt-theme main my-2">
-    <div class="d-flex flex-row">
-      <div class="d-flex flex-column">
+    <v-row>
+      <v-col cols="12" lg="6">
         <LayoutUISubTitle class="mt-12 ml-3">
           Vous voulez tirer le meilleur de notre logiciel ?
         </LayoutUISubTitle>
@@ -18,9 +18,9 @@
         >
           Consulter notre FAQ
         </v-btn>
-      </div>
+      </v-col>
 
-      <div class="d-flex flex-column justify-center links">
+      <v-col cols="12" lg="6" class="links">
         <v-btn
           href="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564"
           target="_blank"
@@ -51,13 +51,13 @@
             </p>
           </div>
         </v-btn>
-      </div>
-    </div>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <style scoped lang="scss">
-.flex-row {
+.v-row {
   position: relative;
   z-index: 2;
 }
@@ -103,14 +103,22 @@ h3 {
   border-radius: 6px;
   font-weight: 500;
   font-size: 0.8rem;
-  z-index: 1;
+  z-index: 2;
   text-transform: none !important;
   line-height: 1rem;
 }
 
 .links {
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: 1240px) {
+    flex-direction: row;
+  }
+
   .v-btn {
-    z-index: 1;
+    z-index: 2;
     width: 23rem;
     height: 5.5rem;
     margin-left: 3rem;
@@ -145,6 +153,31 @@ h3 {
       white-space: normal !important;
       text-align: left;
     }
+
+    @media (max-width: 1240px) {
+      max-width: 40%;
+      margin: 12px 5%;
+      height: 8rem;
+
+      .v-btn__content>div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .v-img {
+        margin-bottom: 6px;
+      }
+
+      p {
+        text-align: center;
+      }
+
+    }
   }
+
+
 }
 </style>
+<script setup lang="ts">
+</script>

components/Logiciels/Artist/Abonnement.vue

@@ -1,57 +1,16 @@
 <template>
   <AnchoredSection id="subscription">
     <LayoutContainer>
-      <v-row class="mt-12 center-90">
-        <v-col cols="4">
-          <LayoutUISubTitle>
-            S'abonner dès maintenant
-          </LayoutUISubTitle>
-
-          <div class="profile-circle">
-            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" />
-          </div>
-
-          <div class="subscription-info">
-            <p class="mt-3 mb-6">
-              Pour vous abonner au logiciel, téléchargez et remplissez le
-              formulaire avant de nous le transmettre
-            </p>
-            <a
-              href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
-              target="_blank"
-              class="download-button"
-              >
-              Télécharger le formulaire d'abonnement
-            </a>
-          </div>
+      <LayoutUISubTitle>
+        S'abonner dès maintenant
+      </LayoutUISubTitle>
 
-          <div class="subscription-steps">
-            <ol>
-              <li class="mt-6">
-                Téléchargez le formulaire
-              </li>
-              <li>
-                Complétez le formulaire
-              </li>
-              <li>
-                Joignez le règlement par chèque avec le formulaire à <br />
-                <p class="pa-3">
-                  2iOPENService <br />
-                  217 rue Raoul Follereau <br />
-                  74300 CLUSES
-                </p>
-              </li>
-              <li>
-                Après réception de votre formulaire d'adhésion et de votre
-                règlement, nous vous ouvrons le service choisi. Vous recevrez
-                alors un mail avec votre identifiant de connexion, votre mot de
-                passe, ainsi que l'URL de votre site internet.
-              </li>
-            </ol>
-          </div>
+      <v-row class="mt-12 center-90">
+        <v-col v-if="lgAndUp" cols="4" class="col-1">
+          <LogicielsArtistAbonnementToSubscribe />
         </v-col>
 
-        <v-col cols="8">
+        <v-col cols="12" lg="8" class="col-2">
           <h3>
             Opentalent Artist, <br> la solution que vous attendiez...
           </h3>
@@ -64,6 +23,8 @@
             vos besoins d'évolution !
           </p>
 
+          <LogicielsArtistAbonnementToSubscribe v-if="mdAndDown" />
+
           <p class="cmf">
             Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
           </p>
@@ -71,9 +32,17 @@
           <div class="border-row">
             <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
               <v-img
-                src="/images/logiciels/school/cmf_logo_orange.png"
+                v-if="lgAndUp"
+                src="/images/logo/logo-cmf-petit.png"
                 class="logo-cmf"
               />
+              <v-img
+                v-else
+                src="/images/logo/logo-cmf.png"
+                class="logo-cmf"
+              />
+
+
             </nuxt-link>
 
             <div class="cmf-container">
@@ -95,56 +64,20 @@
 
 <script setup>
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { useDisplay } from "vuetify";
+
+const { mdAndDown, lgAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">
-.subscription-steps ol {
-  list-style-type: decimal;
-  padding-left: 2rem;
-  color: var(--on-neutral-color);
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 20px;
-  margin-left: 3rem;
-  width: 20rem;
-}
-
-.profile-circle {
-  top: 0.5rem;
-  width: 100px;
-  height: 100px;
-  position: relative;
-  background-color: var(--on-neutral-color);
-  border-radius: 50%;
-  margin-left: 11rem;
-}
 
-.subscription-info {
-  margin-left: 4rem;
-  background: var(--secondary-color);
-  border-radius: 10px;
-  height: 15rem;
-  width: 20rem;
-  padding: 1rem;
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: var(--on-secondary-color);
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 300;
-  line-height: 18px;
-}
-
-.download-button {
-  font-weight: 700;
-  background-color: var(--on-neutral-color);
-  color: var(--neutral-color);
-  padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
-  display: inline-block;
+@media (max-width: 1240px) {
+  .col-1 {
+    order: 2
+  }
+  .col-2 {
+    order: 1
+  }
 }
 
 .solution {
@@ -153,7 +86,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 h3 {
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   margin-bottom: 4rem;
   font-size: 42px;
   font-weight: 600;
@@ -165,12 +98,22 @@ h3 {
   margin-bottom: 4rem;
 
   p {
-    color: var(--on-primary-color);
+    color: var(--on-neutral-color);
     width: 25rem;
     font-weight: 300;
     font-size: 16px;
     line-height: 20px;
     margin-left: 2rem;
+
+    @media (max-width: 1240px) {
+      margin-left: auto;
+      margin-right: auto;
+      width: 90%;
+    }
+  }
+
+  @media (max-width: 1240px) {
+    margin-top: 1rem;
   }
 }
 
@@ -181,12 +124,18 @@ h3 {
   background-size: contain;
   width: 15rem;
   height: 10rem;
+
+  @media (max-width: 1240px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+  }
 }
 
 .cmf {
   margin-top: 3rem;
   margin-bottom: 2rem;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   width: 40rem;
   font-size: 34px;
   font-weight: 400;

components/Logiciels/Artist/Abonnement/ToSubscribe.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="profile-circle">
+    <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" />
+  </div>
+
+  <div class="subscription-info">
+    <p class="mt-3 mb-6">
+      Pour vous abonner au logiciel, téléchargez et remplissez le
+      formulaire avant de nous le transmettre
+    </p>
+    <a
+      href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
+      target="_blank"
+      class="download-button"
+    >
+      Télécharger le formulaire d'abonnement
+    </a>
+  </div>
+
+  <div class="subscription-steps">
+    <ol>
+      <li class="mt-6">
+        Téléchargez le formulaire
+      </li>
+      <li>
+        Complétez le formulaire
+      </li>
+      <li>
+        Joignez le règlement par chèque avec le formulaire à <br />
+        <p class="pa-3">
+          2iOPENService <br />
+          217 rue Raoul Follereau <br />
+          74300 CLUSES
+        </p>
+      </li>
+      <li>
+        Après réception de votre formulaire d'adhésion et de votre
+        règlement, nous vous ouvrons le service choisi. Vous recevrez
+        alors un mail avec votre identifiant de connexion, votre mot de
+        passe, ainsi que l'URL de votre site internet.
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+.profile-circle {
+  top: 3rem;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background-color: var(--on-neutral-color);
+  border-radius: 50%;
+  margin-left: 11rem;
+
+  @media (max-width: 1240px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.subscription-info {
+  margin-left: 4rem;
+  background: var(--secondary-color);
+  border-radius: 10px;
+  height: 15rem;
+  width: 20rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--on-secondary-color);
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 18px;
+
+  @media (max-width: 1240px) {
+    width: 80%;
+  }
+}
+
+.download-button {
+  font-weight: 700;
+  background-color: var(--on-neutral-color);
+  color: var(--neutral-color);
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.subscription-steps ol {
+  list-style-type: decimal;
+  padding-left: 2rem;
+  color: var(--on-neutral-color);
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 20px;
+  margin-left: 3rem;
+  width: 20rem;
+
+  @media (max-width: 1240px) {
+    width: 80%;
+  }
+}
+</style>

components/Logiciels/Artist/Comparatif.vue

@@ -93,8 +93,9 @@ const comparisonItems: Array<ComparisonItem> = [
 
 <style scoped>
 
-.v-container{
+.v-container {
   width: 95%;
   margin-right: auto;
   margin-left: auto;
-}</style>
+}
+</style>

components/Logiciels/Artist/Formations.vue

@@ -10,16 +10,16 @@
           </v-row>
 
           <v-row class="formation py-12 align-center mb-12" no-gutters>
-            <v-col cols="12" lg="6">
+            <v-col cols="12" lg="4">
               <v-img src="/images/logiciels/artist/webinaire.jpg" class="meeting-img" />
             </v-col>
 
-            <v-col cols="12" lg="6" md="6" sm="6">
-              <h3 class="ml-6 mr-12">
+            <v-col cols="12" lg="6">
+              <h3>
                 Webinaire - Partez à la découverte du logiciel Opentalent Artist
               </h3>
 
-              <p class="details ml-6 mr-12" >
+              <p class="details" >
                 Rejoignez notre webinaire, spécialement conçu pour les
                 professionnels du secteur culturel, orchestres, chorales,
                 compagnies de danse, ainsi que les troupes de théâtre et de
@@ -32,7 +32,7 @@
               </p>
 
               <nuxt-link to="/webinaires">
-                <v-btn class="mt-12 ml-6">
+                <v-btn>
                   S'inscrire à nos webinaires
                 </v-btn>
               </nuxt-link>
@@ -64,6 +64,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     background-position: center;
     background-size: cover;
     border-radius: 10%;
+
+    @media (max-width: 1240px) {
+      margin: 0 auto;
+    }
   }
 
   :deep(.v-img img) {
@@ -83,7 +87,11 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     font-size: 1rem;
     line-height: 1.5rem;
     color: var(--on-primary-color);
-    text-align: justify
+    text-align: justify;
+
+    @media (max-width: 1240px) {
+      margin-right: 24px !important;
+    }
   }
 
   .v-btn {
@@ -96,6 +104,23 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     border-color: var(--on-primary-color);
     border-radius: 0.5rem;
     width: 90%;
+    margin: 24px auto;
+  }
+
+  .v-col-12:nth-child(2) {
+    @media (min-width: 1240px) {
+      padding: 24px 64px;
+    }
+    @media (max-width: 1240px) {
+      margin: 24px 5%;
+      max-width: 90%;
+    }
+
+    a {
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+    }
   }
 }
 </style>

components/Logiciels/Artist/SomeNumbers.vue

@@ -9,7 +9,7 @@
     <v-container>
       <v-row class="card-container mb-12">
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center small-padding"
         >
           <CommonCardStat
@@ -18,14 +18,14 @@
           />
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col lg="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="3 424"
             text="Structures"
           />
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col lg="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="13"
             text="Années d'expérience"