finalize responsiveness for artist page

components/Common/Avantages.vue

@@ -10,7 +10,7 @@
       </LayoutUITitle>
     </v-row>
 
-    <v-row class="center-90">
+    <v-row  class="center-90">
       <v-col
         cols="12"
         md="4"
@@ -28,6 +28,7 @@
 
 <script setup lang="ts">
 import type { Benefit } from "~/types/interface";
+import { useDisplay } from "vuetify";
 
 const props = defineProps({
   benefits: {

components/Common/ContainerVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div class="container-green">
+    <div v-if="mdAndUp" class="container-green">
       <v-row class="mt-12">
         <v-row>
           <v-col cols="6">
@@ -23,6 +23,10 @@
         </v-row>
       </v-row>
     </div>
+
+    <div v-else>
+
+    </div>
   </LayoutContainer>
 </template>
 
@@ -30,7 +34,7 @@
 
 import { useDisplay } from "vuetify";
 
-const { lgAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const props = defineProps({
   title: {

components/Common/Table/Comparatif.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <v-row class="center-90">
-      <table>
+      <table v-if="mdAndUp">
         <thead>
           <tr>
             <th/>
@@ -75,13 +75,125 @@
           </tr>
         </tbody>
       </table>
+
+      <div v-else>
+        <div class="d-flex flex-row flex-grow-1 justify-center mt-2">
+          <v-btn
+            :disabled="carouselPos === 0"
+            icon="fas fa-chevron-left"
+            class="mr-6"
+            @click="goToPrevious"
+          />
+          <v-btn
+            :disabled="carouselPos === 1"
+            icon="fas fa-chevron-right"
+            @click="goToNext"
+          />
+        </div>
+
+        <v-carousel
+          v-model="carouselPos"
+          :hide-delimiters="true"
+          :show-arrows="false"
+          :height="800"
+        >
+          <v-carousel-item>
+            <h4>Standard</h4>
+            <div>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ standardPrice }} <span class="ttc">ttc</span>
+                <span class="month">/mois</span>
+              </p>
+            </div>
+
+            <table>
+              <tbody>
+                <tr
+                  v-for="(item, index) in items"
+                  :key="item.label"
+                >
+                  <td class="label-column">
+                    {{ item.label }}
+                  </td>
+
+                  <td>
+                    <v-icon
+                      v-if="item.includedInStandard === true"
+                      icon="far fa-check-circle"
+                      size="18"
+                    />
+
+                    <v-icon
+                      v-else-if="item.includedInStandard === false"
+                      icon="far fa-times-circle"
+                      size="18"
+                      color="red"
+                    />
+
+                    <span v-else>
+                      {{ item.includedInStandard }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </v-carousel-item>
+
+          <v-carousel-item>
+            <h4>Premium</h4>
+
+            <div>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ premiumPrice }} <span class="ttc">ttc</span>
+                <span class="month">/mois</span>
+              </p>
+            </div>
+
+            <table>
+              <tbody>
+              <tr
+                v-for="(item, index) in items"
+                :key="item.label"
+              >
+                <td class="label-column">
+                  {{ item.label }}
+                </td>
+
+                <td>
+                  <v-icon
+                    v-if="item.includedInPremium === true"
+                    icon="far fa-check-circle"
+                    size="18"
+                  />
+
+                  <v-icon
+                    v-else-if="item.includedInPremium === false"
+                    icon="far fa-times-circle"
+                    size="18"
+                    color="red"
+                  />
+
+                  <span v-else>
+                  {{ item.includedInPremium }}
+                </span>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </v-carousel-item>
+        </v-carousel>
+      </div>
     </v-row>
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
-
 import type { ComparisonItem } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 
 const props = defineProps({
   standardPrice: {
@@ -97,6 +209,17 @@ const props = defineProps({
     required: true
   }
 });
+
+
+const carouselPos = ref(0)
+
+const goToPrevious = () => {
+  carouselPos.value = 0
+};
+
+const goToNext = () => {
+  carouselPos.value = 1
+};
 </script>
 
 <style scoped lang="scss">
@@ -125,6 +248,10 @@ th {
   font-weight: 400;
   font-size: 30px;
   line-height: 34px;
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 }
 
 tr {
@@ -138,6 +265,10 @@ tbody tr:nth-child(even) {
 
 td {
   padding-right: 5rem;
+
+  @media (max-width: 600px) {
+    padding-right: 0;
+  }
 }
 
 td:first-child {
@@ -149,6 +280,10 @@ td:first-child {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--on-neutral-color-alt);
+
+  @media (max-width: 600px) {
+    padding-left: 5px;
+  }
 }
 
 .standard {
@@ -187,5 +322,32 @@ td:first-child {
 
 .month {
   padding-right: 5rem;
+
+  @media (max-width: 600px) {
+    padding-right: 0;
+  }
 }
+
+.v-carousel {
+  h4 {
+    text-align: center;
+    margin: 24px auto 12px auto;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+  }
+
+  p {
+    padding-right: 0;
+  }
+
+  .price {
+    margin-top: 12px;
+  }
+
+  .ttc {
+    padding-right: 10px;
+  }
+}
+
+
 </style>

components/Layout/FAQ.vue

@@ -60,6 +60,7 @@
 .v-row {
   position: relative;
   z-index: 2;
+  max-width: 100%;
 }
 
 .main {
@@ -94,6 +95,12 @@ h3 {
   margin-bottom: 3rem;
   font-size: 30px;
   font-weight: 400;
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
 
 .btn-faq {
@@ -106,6 +113,12 @@ h3 {
   z-index: 2;
   text-transform: none !important;
   line-height: 1rem;
+
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: 5%;
+  }
 }
 
 .links {
@@ -117,6 +130,10 @@ h3 {
     flex-direction: row;
   }
 
+  @media (max-width: 1240px) {
+    flex-direction: column;
+  }
+
   .v-btn {
     z-index: 2;
     width: 23rem;
@@ -172,7 +189,10 @@ h3 {
       p {
         text-align: center;
       }
+    }
 
+    @media (max-width: 600px) {
+      max-width: 90%;
     }
   }
 

components/Logiciels/Artist/Abonnement.vue

@@ -26,7 +26,7 @@
           <LogicielsArtistAbonnementToSubscribe v-if="mdAndDown" />
 
           <p class="cmf">
-            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
+            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà&nbsp;...
           </p>
 
           <div class="border-row">
@@ -82,7 +82,11 @@ const { mdAndDown, lgAndUp } = useDisplay()
 
 .solution {
   width: 45rem;
-  text-align: justify
+  text-align: justify;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 
 h3 {
@@ -91,6 +95,10 @@ h3 {
   font-size: 42px;
   font-weight: 600;
   line-height: 42px;
+
+  @media (max-width: 600px) {
+    font-size: 32px;
+  }
 }
 
 .cmf-container {
@@ -140,5 +148,9 @@ h3 {
   font-size: 34px;
   font-weight: 400;
   line-height: 38px;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 </style>

components/Logiciels/Artist/Abonnement/ToSubscribe.vue

@@ -84,6 +84,12 @@
   @media (max-width: 1240px) {
     width: 80%;
   }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .download-button {
@@ -109,5 +115,11 @@
   @media (max-width: 1240px) {
     width: 80%;
   }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 </style>

components/Logiciels/Artist/Formations.vue

@@ -92,6 +92,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     @media (max-width: 1240px) {
       margin-right: 24px !important;
     }
+
+    @media (max-width: 600px) {
+      margin-right: auto !important;
+    }
   }
 
   .v-btn {