fix mobile vue

components/Home/Caroussel.vue

@@ -1,24 +1,27 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer :overflow="false">
+
+    <div v-if="smAndDown">
+      <h1 class="title-page">Une <span class="color-solution">solution</span>  adapatée à chaque structure culturelle</h1>
+    </div>
     <v-carousel
-      v-if="lgAndUp"
       ref="carousel"
       v-model="activeIndex"
       :show-arrows="false"
-      class="carousel"
+      :class="smAndDown ? 'carousel-sm' : 'carousel' "
       :hide-delimiter-background="true"
       :show-delimiters="false"
       :touch="true"
     >
       <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
-          <v-col cols="6">
-            <v-row class="align-start">
-              <v-img class="logo-school" :src="item.logo"></v-img>
+          <v-col  :cols="smAndDown ? 12 : 6">
+            <v-row :class=" !smAndDown ? 'align-start': '' ">
+              <v-img v-if="!smAndDown" class="logo-school" :src="item.logo"></v-img>
             </v-row>
 
             <v-row class="align-start">
-              <p class="description">{{ item.description }}</p>
+              <p :class="smAndDown ? 'description-sm' : 'description'">{{ item.description }}</p>
             </v-row>
 
             <v-row class="align-start">
@@ -28,13 +31,13 @@
             </v-row>
           </v-col>
 
-          <v-col cols="6">
+          <v-col  :cols="smAndDown ? 12 : 6">
             <v-row class="justify-end">
               <div
-                class="background-rectangle"
+                :class="smAndDown ? 'background-rectangle-sm' : 'background-rectangle'"
                 :style="{ backgroundColor: item.color }"
               ></div>
-              <v-card class="card" elevation="5">
+              <v-card v-if="!smAndDown" class="card" elevation="5">
                 <v-img
                   class="profile-image"
                   :src="item.avatar"
@@ -49,7 +52,7 @@
                 </v-card-text>
               </v-card>
 
-              <v-img :src="item.image" class="image"></v-img>
+              <v-img :src="item.image" :class="smAndDown ? 'image-sm' : 'image'"></v-img>
             </v-row>
           </v-col>
         </v-row>
@@ -69,7 +72,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { lgAndUp } = useDisplay();
+const { lgAndUp, smAndDown } = useDisplay();
 
 let activeIndex = ref(0);
 
@@ -126,9 +129,19 @@ const carouselItems = ref([
   display: none;
 }
 
-.carousel,
-.v-carousel__item {
-  height: 900% !important;
+.color-solution {
+  color: rgba(32, 147, 190, 0.9);
+}
+.title-page{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2rem;
+  line-height: 2.5rem;
+  text-align: left;
+  color: #000000;
+  margin-bottom: 2rem;
+  width: 25rem;
 }
 
 .card {
@@ -162,7 +175,7 @@ const carouselItems = ref([
 
 .background-rectangle {
   position: absolute;
-  width: 60%;
+  width: 70%;
   height: 20rem;
   left: 72%;
   top: 50%;
@@ -170,20 +183,30 @@ const carouselItems = ref([
   border-radius: 200px 0px 0px 15rem;
   z-index: -1;
 }
-
+.background-rectangle-sm {
+  position: absolute;
+  width: 100%;
+  height: 15rem;
+  left: 72%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 200px 0px 0px 15rem;
+  z-index: -1;
+}
 .align-start {
   align-items: flex-start;
 }
 
-.carousel {
-  height: 100%;
-  margin-top: 10vh;
+.carousel-sm {
+  height:44rem !important;
+  margin-bottom: -14.3rem;
+  margin-top: 2rem;
+
 }
 
-.description {
-  text-align: left;
-  width: 30%;
-  margin-bottom: 1rem;
+.carousel{
+  height: 900% !important;
+  margin-bottom: -3.5rem;
 }
 .logo-school {
   max-width: 35vw;
@@ -198,11 +221,26 @@ const carouselItems = ref([
   right: 20%;
 }
 
+.image-sm {
+  height: 20rem;
+  margin-top: 9rem;
+  left: 10%;
+  bottom: 10rem;
+}
 .description {
   text-align: left;
   margin-right: 9vw;
   margin-left: 7vw;
   width: 25vw;
+  margin-bottom: 1rem;
+}
+
+.description-sm {
+  margin-top: 1rem;
+  width: 100%;
+  text-align: left;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
 }
 
 .custom-controls {

components/Home/Help.vue

@@ -2,11 +2,11 @@
   <LayoutContainer>
     <div class="container">
       <v-row>
-        <v-col cols="8">
-          <v-img class="help-img" src="/images/help/Help.png"></v-img>
+        <v-col  :cols="smAndDown ? 12 : 8">
+          <v-img :class="smAndDown ? 'help-img-sm' : 'help-img' " src="/images/help/Help.png"></v-img>
         </v-col>
 
-        <v-col cols="4">
+        <v-col  :cols="smAndDown ? 12 : 4">
           <h4 class="subtitle-team">
             Notre équipe est à vos côtés pour vous guider
           </h4>
@@ -37,6 +37,12 @@
     </div>
   </LayoutContainer>
 </template>
+<script setup>
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify";
+const { mdAndDown, smAndDown } = useDisplay();
+</script>
 
 <style scoped>
 .button-faq {
@@ -61,6 +67,9 @@
   font-style: normal;
   font-weight: 300;
   color: #0e2d32;
+
+  font-size: 1.5rem;
+  line-height: 1.6rem;
 }
 
 .detail-item {
@@ -71,18 +80,16 @@
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
   color: #0e2d32;
 }
 
 .need-help {
-  width: 15rem;
+  width: 25rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: 1.7rem;
+  line-height: 2rem;
   color: #0e2d32;
 }
 
@@ -92,15 +99,20 @@
   border-radius: 3rem;
 }
 
+.help-img-sm {
+  width: 50rem;
+  border-radius: 3rem;
+}
+
 .subtitle-team {
   margin-top: 2rem;
   margin-bottom: 2rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
-  font-size: 30px;
+  font-size: 2.5rem;
   line-height: 34px;
-  width: 20rem;
+  width: 25rem;
 }
 
 .container {

components/Home/Reviews.vue

@@ -15,7 +15,7 @@
         >
         <Slide v-for="(review, index) in reviews" :key="index">
           <v-col cols="12">
-          <v-card class="review-card-sm ">
+          <v-card class="review-card-sm  ">
             <v-avatar size="80" class="profile-img">
               <v-img :src="review.avatar"></v-img>
             </v-avatar>
@@ -313,8 +313,9 @@ const items = ref([
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 5rem;
+  height: 5rem;
+  margin-left: 1.5rem;
   background-color: transparent;
   border: 2px solid #ffffff;
   cursor: pointer;
@@ -436,6 +437,7 @@ const items = ref([
 .review-card-sm {
   width: 80%;
   height: 100%;
+  box-shadow: 0px 4px 4px rgba(21, 65, 79, 0.25);
 }
 .review-name {
   margin-left: 1rem;
@@ -447,12 +449,14 @@ const items = ref([
 }
 
 .small-title {
-  font-family: "Barlow";
-  font-style: normal;
+  font-size: 1.2rem;
+  line-height: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
   text-align: center;
-  letter-spacing: 0.18em;
+  font-family: "Barlow";
+  letter-spacing: 2.16px;
   text-transform: uppercase;
-  padding-top: 1rem;
 }
 
 .title-review {

components/Layout/Footer.vue

@@ -48,7 +48,7 @@
           </v-col>
 
           <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
-            <v-row class="title-link">Liens Rapides</v-row>
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">Liens Rapides</v-row>
             <v-row>
               <small class="small-link">A propos</small>
             </v-row>
@@ -61,7 +61,7 @@
           </v-col>
 
           <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
-            <v-row class="title-link">Informations</v-row>
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">Informations</v-row>
             <v-row>
               <small class="small-link">FAQ</small>
             </v-row>
@@ -77,7 +77,7 @@
           </v-col>
 
           <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
-            <v-row class="title-link">Espace client</v-row>
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">Espace client</v-row>
             <v-row>
               <small class="small-link">Mon compte</small>
             </v-row>
@@ -87,19 +87,19 @@
           </v-col>
 
           <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
-            <v-row class="title-link">Liens Rapides</v-row>
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'" >Liens Rapides</v-row>
 
             <v-row>
-              <v-col cols="2">
-                <v-icon left class="fab fa-facebook"></v-icon>
+              <v-col  :cols="smAndDown ? 4 : 2">
+                <v-icon  class="fab fa-facebook"></v-icon>
               </v-col>
 
-              <v-col cols="2">
-                <v-icon left class="fab fa-linkedin"></v-icon>
+              <v-col  :cols="smAndDown ? 4 : 2">
+                <v-icon class="fab fa-linkedin"></v-icon>
               </v-col>
 
-              <v-col cols="2">
-                <v-icon left class="fab fa-youtube"></v-icon>
+              <v-col  :cols="smAndDown ? 4 : 2">
+                <v-icon  class="fab fa-youtube"></v-icon>
               </v-col>
             </v-row>
           </v-col>
@@ -132,13 +132,19 @@ const { mdAndDown, smAndDown, lgAndUp } = useDisplay();
 .icon:nth-child(2) {
   margin-left: 10px;
 }
-.title-link {
+.title-link,
+.title-link-sm {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
   line-height: 20px;
   margin-bottom: 1rem;
+  
+}
+
+.title-link-sm {
+  margin-bottom: .1rem;
 }
 
 .small-link {