responsif review gomepage

components/Common/Carousel/TrustCompanie.vue

@@ -44,6 +44,8 @@
         >
           <i class="fas fa-chevron-right" :style="{ color: iconColor }" />
         </div>
+
+        
       </v-row>
     </v-container>
   </LayoutContainer>
@@ -70,7 +72,7 @@ const props = defineProps({
   },
   structureCountColor: {
     type: String,
-    default: "#c3e5e7", 
+    default: "#c3e5e7",
   },
 });
 

components/Common/StickyMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="stickyClass">
+  <div :class="stickyClass" v-if="!mdAndDown">
     <v-row class="outil-row">
       <v-col cols="12">
         <div class="container-square">
@@ -20,12 +20,21 @@
       </v-col>
     </v-row>
   </div>
+
+  <div v-if="mdAndDown">
+    <div class="sticky-menu">
+      <v-btn color="primary">Bouton 1</v-btn>
+      <v-btn color="secondary">Bouton 2</v-btn>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, defineProps } from "vue";
 import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
 
+const { mdAndDown } = useDisplay();
 const router = useRouter();
 const props = defineProps({
   shouldShowStickyMenu: Boolean,
@@ -58,15 +67,25 @@ const isMobileDevice = () => {
 </script>
 
 <style scoped>
+
+
+.sticky-menu {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  z-index: 100;
+}
 .square {
-  transition: transform 0.3s ease-in-out; 
+  transition: transform 0.3s ease-in-out;
 }
 
 .square:hover {
-  transform: translateX(-10px); 
+  transform: translateX(-10px);
 }
 
-
 .link {
   text-decoration: none;
   color: white;

components/Contact/Banner.vue

@@ -20,7 +20,7 @@
 
           <h6 class="infos">Vos coordonnées</h6>
 
-          <!-- Gender selection in one row -->
+          <!-- Gender selection -->
           <v-row>
             <v-col cols="12">
               <v-radio-group v-model="gender" row mandatory inline>
@@ -30,7 +30,7 @@
             </v-col>
           </v-row>
 
-          <!-- Name and Surname on the same line -->
+          <!-- Name and Surname -->
           <v-row>
             <v-col cols="12" md="6">
               <v-text-field
@@ -50,7 +50,7 @@
             </v-col>
           </v-row>
 
-          <!-- Postal code and city on the same line -->
+          <!-- Postal code and city -->
           <v-row>
             <v-col cols="12" md="6">
               <v-text-field
@@ -84,7 +84,7 @@
             </v-col>
           </v-row>
 
-          <!-- Structure name on its own line -->
+          <!-- Structure name  -->
           <v-row>
             <v-col cols="12">
               <v-text-field
@@ -97,7 +97,7 @@
           </v-row>
           <h6 class="infos">Votre demande concerne</h6>
 
-          <!-- Request type and product concerned on the same line -->
+          <!-- Request type and product concerned  -->
           <v-row>
             <v-col cols="12" md="6">
               <v-select
@@ -119,7 +119,7 @@
           </v-row>
           <h6 class="infos">Votre message</h6>
 
-          <!-- Message on its own line -->
+          <!-- Message  -->
           <v-row>
             <v-col cols="12">
               <v-textarea

components/Home/Caroussel.vue

@@ -105,7 +105,7 @@ const carouselItems = ref([
     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…",
     buttonClass: "btn-school",
-    image: "/images/carousel/school/Fille_School.png",
+    image: "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
     color: "rgba(32, 147, 190, 0.4)",
     link: "/opentalent_school",
     name: "Cindy Blanchard",
@@ -118,7 +118,7 @@ const carouselItems = ref([
     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.",
     buttonClass: "btn-artist",
-    image: "/images/carousel/artist/musician.png",
+    image: "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
     color: "rgba(250, 194, 10, 0.4)",
     link: "opentalent_artist",
     name: "Thierry Dupont ",
@@ -131,7 +131,7 @@ const carouselItems = ref([
     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.",
     buttonClass: "btn-manager",
-    image: "/images/carousel/manager/fédération.png",
+    image: "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
     color: "rgba(216, 5, 11, 0.4)",
     link: "opentalent_manager",
     name: "Marie Voisin",

components/Home/EventAgenda.vue

@@ -1,35 +1,36 @@
 <template>
   <LayoutContainer :overflow="false">
-    <div class="title-container">
-      <h2 class="title">
-        Retrouvez tous vos évènements dans l'agenda et référencez vous dans
-        l'annuaire
-      </h2>
-    </div>
-
-    <v-row justify="center">
-      <div class="btn-container">
-        <v-col cols="12" md="6" >
-          <v-btn class="btn-event">
-            <span>Découvrir les évènements</span>
-            <v-icon class="fa-solid fa-arrow-right icon-arrow" />
-          </v-btn>
-        </v-col>
-
-        <v-col cols="12" md="6" >
-          <v-btn class="btn-event">
-            Découvrir l’ANNUAIRE
-            <v-icon class="fa-solid fa-arrow-right icon-arrow" />
-          </v-btn>
-        </v-col>
+    <div :class="mdAndDown ? '' :'container'">
+      <div class="title-container">
+        <h2 class="title">
+          Retrouvez tous vos évènements dans l'agenda et référencez vous dans
+          l'annuaire
+        </h2>
       </div>
-    </v-row>
+      <v-row justify="center">
+        <div :class="mdAndDown ? 'btn-container-md' : 'btn-container'">
+          <v-col cols="12" md="6">
+            <v-btn class="btn-event">
+              <span>Découvrir l'agenda</span>
+              <v-icon class="fa-solid fa-arrow-right icon-arrow" />
+            </v-btn>
+          </v-col>
+
+          <v-col cols="12" md="6">
+            <v-btn class="btn-event">
+              Découvrir l’ANNUAIRE
+              <v-icon class="fa-solid fa-arrow-right icon-arrow" />
+            </v-btn>
+          </v-col>
+        </div>
+      </v-row>
+    </div>
   </LayoutContainer>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { lgAndUp, smAndDown } = useDisplay();
+const { lgAndUp, mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
@@ -43,6 +44,10 @@ const { lgAndUp, smAndDown } = useDisplay();
   justify-content: center;
   padding: 0 20rem;
 }
+
+.btn-container-md {
+  padding: 0 5rem;
+}
 .btn-event {
   border-radius: 0.5rem;
   gap: 9px;
@@ -75,7 +80,7 @@ const { lgAndUp, smAndDown } = useDisplay();
 
 .container,
 .container-sm {
-  height: 30rem;
+  height: 35rem;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     linear-gradient(
       180deg,
@@ -86,5 +91,4 @@ const { lgAndUp, smAndDown } = useDisplay();
     url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
   background-size: cover;
 }
-
 </style>

components/Home/Help.vue

@@ -1,26 +1,26 @@
 <template>
   <LayoutContainer>
     <v-row class="mt-12">
-      <v-container class="container">
-        <div class="help-container">
-          <v-col cols="6">
-            <v-img class="help-img" src="/images/help/Help.png" />
+      <v-container>
+        <div :class="!mdAndDown ? 'help-container' : 'help-container-md'" >
+          <v-col cols="12" lg="6" md="12" sm="12">
+            <v-img  :class="!mdAndDown ? 'help-img' : 'help-img-md'" src="/images/Home_logiciel/Opentalent_a_votre_service.png" />
           </v-col>
 
-          <v-col cols="6">
-            <h4 class="subtitle-team ml-10">
-              Notre équipe est à vos côtés <br />
+            <v-col cols="12" lg="6" md="12" sm="12">
+            <h4  :class="!mdAndDown ? 'subtitle-team ml-10': 'subtitle-team-md'">
+              Notre équipe est à vos côtés 
               pour vous guider
             </h4>
 
-            <p class="need-help ml-10">
+            <p :class="!mdAndDown ? 'need-help ml-10' : 'need-help-md'">
               Besoin d’aide ? <br />
               Vous souhaitez en savoir plus sur nos solutions ou vous avez
               besoin d'assistance sur l'utilisation de l'un de nos logiciels ?
             </p>
 
             <v-row>
-              <ul class="details ml-10">
+              <ul :class="!mdAndDown ? 'details ml-10' : 'details-md'">
                 <li class="detail-item">
                   Ouvert du lundi au vendredi de 8h15 à 17h45
                 </li>
@@ -31,12 +31,13 @@
               </ul>
             </v-row>
 
-            <v-row class="row-faq ml-10">
+            <v-row class="ml-10">
               <a href="https://ressources.opentalent.fr/" target="_blank">
-                <v-btn class="button-faq">Consulter la FAQ</v-btn>
+                <v-btn :class="!mdAndDown ? 'button-faq' : 'button-faq-md '">Consulter la FAQ</v-btn>
               </a>
             </v-row>
           </v-col>
+
         </div>
       </v-container>
     </v-row>
@@ -45,21 +46,26 @@
 <script setup>
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
+const { smAndDown, mdAndDown} = useDisplay();
 </script>
 
 <style scoped>
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  width: auto;
-}
+
 .help-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
+
+.help-container-md {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
 .button-faq {
   width: 195px;
   height: 53px;
@@ -68,6 +74,20 @@ const { smAndDown } = useDisplay();
   color: white;
   padding: 19px 28px;
   gap: 9px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.button-faq-md {
+  width: 195px;
+  height: 53px;
+  background: #64afb7;
+  border-radius: 6px;
+  color: white;
+  padding: 19px 28px;
+  gap: 9px;
+  margin-left: 3rem;
+  margin-top: 2rem;
 }
 
 .details {
@@ -80,6 +100,19 @@ const { smAndDown } = useDisplay();
   line-height: 1.6rem;
 }
 
+.details-md {
+  margin-top: 20px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  color: #0e2d32;
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30rem;
+}
+
 .detail-item {
   margin-left: 28px;
   margin-bottom: 15px;
@@ -97,14 +130,30 @@ const { smAndDown } = useDisplay();
   color: #0e2d32;
 }
 
+.need-help-md {
+  width: 30rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.1rem;
+  line-height: 1.4rem;
+  color: #0e2d32;
+  width: 30rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .help-img {
   width: 50rem;
   border-radius: 3rem;
 }
 
-.help-img-sm {
-  width: 50rem;
+.help-img-md {
+  width: 40rem;
   border-radius: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 4rem;
 }
 
 .subtitle-team {
@@ -117,8 +166,15 @@ const { smAndDown } = useDisplay();
   width: 25rem;
 }
 
-.container {
-  margin-bottom: 1rem;
-  margin-top: 3rem;
+.subtitle-team-md {
+  margin-bottom: 0.7rem;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 34px;
+  text-align: left;
+  width: 30rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 </style>

components/Home/Promotion.vue

@@ -1,41 +1,40 @@
 <template>
   <LayoutContainer>
-    <v-col col="12" class="col-gestion">
-      <div class="d-flex justify-center align-center flex-column">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h5 class="subtitle">GESTION ET PROMOTION</h5>
-      </div>
-      <v-row>
-        <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
-          <span class="span-color">Simplifiez</span>-vous la vie avec un outil
-          <span class="d-inline-flex align-center">
-            
-            <v-img
-              src="/images/promotion/piano.jpg"
-              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-            <div class="play-icon-container">
-                <i class="fas fa-play"></i>
-              </div>
-          </span>
-          tout en un pour la gestion et la promotion
-          <span class="d-inline-flex align-center">
-            <v-img
-              src="/images/promotion/danse.jpg"
-              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-          </span>
-          , de votre structure culturelle.
-          <span class="d-inline-flex align-center">
-            <v-img
-              src="/images/promotion/cirque.jpg"
-              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-          </span>
-        </p>
-      </v-row>
-    </v-col>
     <v-row>
+      <v-col col="12" :class="mdAndDown ? 'col-gestion' : 'col-gestion-md'">
+        <div class="d-flex justify-center align-center flex-column">
+          <v-icon size="6" class="fa-solid fa-circle icon-title" />
+          <h5 class="subtitle">GESTION ET PROMOTION</h5>
+        </div>
+        <v-row>
+          <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
+            <span class="span-color">Simplifiez</span>-vous la vie avec un outil
+            <span class="d-inline-flex align-center">
+              <v-img
+                src="/images/Home_logiciel/ecole_de_musique-piano.jpg"
+                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+              />
+            </span>
+            tout en un pour la gestion et la promotion
+            <span class="d-inline-flex align-center">
+              <v-img
+                src="/images/Home_logiciel/ecole_de_danse-danseuse.jpg"
+                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+              />
+            </span>
+            , de votre structure culturelle.
+            <span class="d-inline-flex align-center">
+              <v-img
+                src="/images/Home_logiciel/ecole_de_cirque.jpg"
+                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+              />
+            </span>
+          </p>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <v-row class="outil">
       <v-col cols="12">
         <v-img
           src="/images/home/écran.JPG"
@@ -46,60 +45,61 @@
           @mouseover="zoomIn"
           @mouseleave="zoomOut"
         />
+        <div class="play-icon-container">
+          <i class="fas fa-play"></i>
+        </div>
       </v-col>
     </v-row>
 
-    <div class="outil">
-      <h3 class="text-center text-outil">
-        Un outil complet et intuitif <br />
-        pour chaque structure
-      </h3>
+    <v-row>
+      <v-col cols="12">
+        <h3 class="text-center text-outil">
+          Un outil complet et intuitif <br />
+          pour chaque structure
+        </h3>
+      </v-col>
+    </v-row>
 
-      <div v-if="!smAndDown">
-        <v-row class="mb-6">
-          <v-col cols="6">
-            <div class="horizontal-line" />
-            <v-row class="picto-container">
-              <img src="/images/pictoHome/picto4.svg" class="picto" />
-              <p class="text-outil-details">
-                Logiciel de Gestion et communication en ligne
-              </p>
-            </v-row>
-            <div class="horizontal-line" />
-            <v-row class="picto-container">
-              <img src="/images/pictoHome/picto3.svg" class="picto" />
-              <p class="text-outil-details">
-                Site Web intégré et simple d’usage
-              </p>
-            </v-row>
-            <div class="horizontal-line" />
-          </v-col>
+    <v-row class="mb-6">
+      <v-col cols="12" lg="6" md="12" sm="12">
+        <div class="horizontal-line" />
+        <v-row class="picto-container">
+          <img src="/images/pictoHome/picto4.svg" class="picto" />
+          <p class="text-outil-details">
+            Logiciel de Gestion et communication en ligne
+          </p>
+        </v-row>
+        <div class="horizontal-line" />
+        <v-row class="picto-container">
+          <img src="/images/pictoHome/picto3.svg" class="picto" />
+          <p class="text-outil-details">Site Web intégré et simple d’usage</p>
+        </v-row>
+        <div class="horizontal-line" />
+      </v-col>
 
-          <v-col cols="6">
-            <div class="horizontal-line" />
-            <v-row class="picto-container">
-              <img src="/images/pictoHome/picto1.svg" class="picto" />
-              <p class="text-outil-details">
-                Augmentez votre visibilité avec l'agenda culturel
-              </p>
-            </v-row>
-            <div class="horizontal-line" />
-            <v-row class="picto-container">
-              <img src="/images/pictoHome/picto2.svg" class="picto" />
-              <p class="text-outil-details">Communiquez en réseau</p>
-            </v-row>
-            <div class="horizontal-line" />
-          </v-col>
+      <v-col cols="12" lg="6" md="12" sm="12">
+        <div class="horizontal-line" />
+        <v-row class="picto-container">
+          <img src="/images/pictoHome/picto1.svg" class="picto" />
+          <p class="text-outil-details">
+            Augmentez votre visibilité avec l'agenda culturel
+          </p>
+        </v-row>
+        <div class="horizontal-line" />
+        <v-row class="picto-container">
+          <img src="/images/pictoHome/picto2.svg" class="picto" />
+          <p class="text-outil-details">Communiquez en réseau</p>
         </v-row>
-      </div>
-    </div>
+        <div class="horizontal-line" />
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
+const { smAndDown, mdAndDown } = useDisplay();
 const isZoomed = ref(false);
 
 const zoomIn = () => {
@@ -112,9 +112,12 @@ const zoomOut = () => {
 </script>
 
 <style scoped>
+.outil {
+  margin-bottom: -28rem;
+}
 .play-icon-container {
   position: absolute;
-  top: 50%;
+  top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 3rem;
@@ -132,6 +135,11 @@ const zoomOut = () => {
   height: auto;
 }
 
+.rectangle-img-sm {
+  width: 3.2rem;
+  border-radius: 5rem;
+}
+
 .align-center {
   align-items: center;
   display: inline-flex;
@@ -178,12 +186,10 @@ const zoomOut = () => {
   margin-right: 2rem;
 }
 .screen-sm {
-  width: 70%;
+  width: 100%;
   object-fit: cover;
-  margin: 2rem auto;
-  border-radius: 20px;
-  bottom: 15rem;
-  margin-bottom: 8rem;
+  text-align: center;
+  transition: transform 0.2s;
 }
 .screen {
   width: 900px;
@@ -192,7 +198,7 @@ const zoomOut = () => {
   text-align: center;
   border-radius: 20px;
   transition: transform 0.2s;
-  bottom: 32rem;
+  bottom: 30rem;
 }
 
 .screen:hover {
@@ -243,7 +249,6 @@ const zoomOut = () => {
   font-weight: 400;
   font-size: 2rem;
   color: #0e2d32;
-  margin-top: -30rem;
   margin-bottom: 3rem;
 }
 
@@ -252,16 +257,20 @@ const zoomOut = () => {
   background: #0e2d32;
 }
 
+.col-gestion-md {
+  background: #0e2d32;
+  margin-bottom: 4rem;
+}
+
 .text-gestion-sm {
   font-weight: 500;
-  font-size: 2.5rem;
+  font-size: 2rem;
   line-height: 3.5rem;
   text-align: center;
   color: white;
-  height: 20rem;
-  margin-top: 3rem;
+  height: 10rem;
   width: 40rem;
-  margin: 3rem 2rem 10rem;
+  margin: 3rem 2rem 5rem;
 }
 
 .v-container {

components/Home/Reviews.vue

@@ -1,12 +1,12 @@
 <template>
   <LayoutContainer>
-    <div :class="smAndDown ? '' : 'container-color'">
+    <div :class="!smAndDown ? 'container-color' : 'container-color-md' ">
       <div class="d-flex justify-center align-center flex-column">
         <v-icon size="6" class="fa-solid fa-circle icon-title" />
         <h6 class="small-title">Avis Clients</h6>
       </div>
 
-      <h1 class="title-review">C'est vous qui le dites</h1>
+      <h1 class="title-review" :class="smAndDown? 'mb-12 ' : ''">C'est vous qui le dites</h1>
     </div>
 
     <div v-if="!smAndDown" class="container-green">
@@ -125,11 +125,68 @@
       </v-row>
 
       <div class="content-review">
-        <CommonCarouselTrustCompanie :items="items" :title-color="'#fff'"
-        :carousel-border-color="'#fff'" :carousel-button-color="'#fff'" :icon-color="'#fff'"/>
-
+        <CommonCarouselTrustCompanie
+          :items="items"
+          :title-color="'#fff'"
+          :carousel-border-color="'#fff'"
+          :carousel-button-color="'#fff'"
+          :icon-color="'#fff'"
+        />
       </div>
     </div>
+
+    <div v-if="smAndDown">
+    <v-row>
+      <v-col cols="12">
+        <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCaroussel">
+          <Slide v-for="(card, index) in cards" :key="index">
+            <div class="card-sm">
+              <v-card >
+                <v-card-title>
+                  <span class="review-name">{{ card.name }}</span>
+                </v-card-title>
+
+                <v-card-text>
+                  <p class="description-review">
+                    {{ card.review }}
+                  </p>
+                </v-card-text>
+                <div class="card-footer">
+                  <small >{{ card.status }}</small>
+
+                  <small >{{ card.structure }}</small>
+                </div>
+              </v-card>
+            </div>
+          </Slide>
+        </Carousel>
+      </v-col>
+    </v-row>
+
+    <v-row class="justify-center align-center">
+      <v-col class="d-flex justify-space-around align-center">
+        <i
+          style="cursor: pointer"
+          class="fa-solid fa-arrow-left-long"
+          @click="goPrevious"
+        />
+        <div class="custom-controls">
+          <div
+            v-for="(item, index) in cards"
+            :key="index"
+            :class="{ 'active-control': index === state.activeIndex }"
+            class="ml-6"
+          />
+        </div>
+        <i
+          style="cursor: pointer"
+          class="fa-solid fa-arrow-right-long"
+          @click="goNext"
+        />
+      </v-col>
+    </v-row>
+  </div>
+
   </LayoutContainer>
 </template>
 
@@ -138,8 +195,61 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
+
 const { smAndDown } = useDisplay();
-const carousel = ref(null);
+const reviewCaroussel = ref(null);
+
+const state = ref({
+  activeIndex: 0,
+});
+
+
+const goNext = () => {
+  if (reviewCaroussel.value) {
+    reviewCaroussel.value.next();
+    state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
+  }
+};
+
+const goPrevious = () => {
+  if (reviewCaroussel.value) {
+    reviewCaroussel.value.prev();
+    state.value.activeIndex = state.value.activeIndex - 1 < 0 ? cards.length - 1 : state.value.activeIndex - 1;
+  }
+};
+
+
+
+const cards = [
+  {
+    name: "Patrice CATHELIN",
+    review:
+      "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+    status: "Directeur administratif & pédagogique",
+    structure: "Conservatoire de Musique & de Danse de Sens (78)",
+  },
+  {
+    name: "Karine GIRAUD",
+    review:
+      "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
+    status: "Secrétaire administrative",
+    structure: "Association Musicale Sainte Cécile de Lagord (17)",
+  },
+  {
+    name: "Laurent BEL",
+    review:
+      "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré.",
+    status: "Directeur administratif & pédagogique",
+    structure: "École de Musique EPIC Musique en 4 Rivières (74)",
+  },
+  {
+    name: "Philippe BORY",
+    review:
+      "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien.",
+    status: "Personnel administratif",
+    structure: "École d'Arts de Saint-Michel-sur-Orge (91)",
+  },
+];
 
 const items = ref([
   { src: "/images/reviews/school/review1.svg" },
@@ -148,13 +258,40 @@ const items = ref([
   { src: "/images/reviews/school/review4.jpeg" },
   { src: "/images/reviews/school/review5.jpeg" },
   { src: "/images/reviews/school/review6.jpeg" },
-
 ]);
 </script>
 
 <style scoped>
 
-.v-container{
+.custom-controls div {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background-color: grey;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+}
+
+.custom-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.custom-controls .active-control {
+  background-color: black;
+  margin-right: 10px;
+}
+
+.card-sm {
+  width: 300px;
+  height: 800px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.v-container {
   padding: 0 !important;
 }
 .content-review {
@@ -188,12 +325,12 @@ const items = ref([
 
 .container-green {
   background-color: #0e2d32;
-  height: 60rem
+  height: 60rem;
 }
 
 .status {
   position: absolute;
-  bottom:0;
+  bottom: 0;
   right: 0;
   margin-top: 1rem;
   font-weight: 600;
@@ -236,12 +373,15 @@ const items = ref([
   background: #f8f8f8;
   height: 22rem;
 }
+
+.container-color-md {
+}
 .review-card {
-  padding-top: 1rem ;
+  padding-top: 1rem;
   width: 21rem;
   min-height: 21rem;
   max-height: 21rem;
-  margin-bottom: .9rem;
+  margin-bottom: 0.9rem;
 }
 .review-name {
   margin-left: 1rem;

components/Layout/Footer/Footer.vue

@@ -1,145 +1,182 @@
 <template>
   <footer ref="footerElement">
     <LayoutContainer>
-      <div>
-        <div class="content-footer">
-          <v-row>
-            <v-col
-              :cols="smAndDown ? 12 : 3"
-              :class="smAndDown ? 'logo-opentalent-sm' : 'flex-container'"
-            >
-              <nuxt-link to="/">
-                <v-img class="logo" src="/images/logo/footer-logo.png" />
-              </nuxt-link>
-              <!-- <small class="ml-12 right-reserved"
-                >© 2022 Opentalent, Tous droits réservés</small
-              > -->
-            </v-col>
-
-            <v-col
-              :cols="smAndDown ? 6 : 2"
-              :class="smAndDown ? 'link-sm' : ''"
-            >
-              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-                <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
-              </v-row>
-              <v-row>
-                <router-link to="/annuaire" class="small-link ml-12"
-                  >Annuaire</router-link
-                >
-              </v-row>
-              <v-row>
-                <router-link to="/actualites" class="small-link ml-12"
-                  >Actualités</router-link
-                >
-              </v-row>
-              <v-row>
-                <router-link to="/annonces" class="small-link ml-12"
-                  >Annonces</router-link
-                >
-              </v-row>
-            </v-col>
-
-            <v-col
-              :cols="smAndDown ? 6 : 2"
-              :class="smAndDown ? 'link-sm' : 'details-footer'"
-            >
-              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-                <h5 class="ml-12 mt-10 h5-title">Logiciels culturels</h5>
-              </v-row>
-              <v-row>
-                <router-link to="/opentalent_artist" class="small-link ml-12"
-                  >Opentalent Artist</router-link
-                >
-              </v-row>
-              <v-row>
-                <router-link to="/opentalent_school" class="small-link ml-12"
-                  >Opentalent School</router-link
-                >
-              </v-row>
-              <v-row>
-                <router-link to="/opentalent_manager" class="small-link ml-12"
-                  >Opentalent Manager</router-link
-                >
-              </v-row>
-            </v-col>
-
-            <v-col
-              :cols="smAndDown ? 6 : 2"
-              :class="smAndDown ? 'link-sm' : 'details-footer'"
-            >
-              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-                <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
-              </v-row>
-              <v-row>
-                <NuxtLink
-                  to="https://ressources.opentalent.fr/display/FAQ/Accueil"
-                  class="small-link ml-12"
-                  >Foire Aux Questions</NuxtLink
-                >
-              </v-row>
-              <v-row>
-                <NuxtLink
-                  to="https://ressources.opentalent.fr/"
-                  class="small-link ml-12"
+      <div >
+        <v-row>
+          <v-col
+            :cols="mdAndDown ? 12 : 3"
+            :class="mdAndDown ? 'logo-container' : 'flex-container'"
+          >
+            <nuxt-link to="/">
+              <v-img
+                :class="mdAndDown ? 'logo-md' : 'logo'"
+                src="/images/logo/footer-logo.png"
+              />
+            </nuxt-link>
+          </v-col>
+
+          <v-col cols=" 2" v-if="!mdAndDown">
+            <v-row class="title-link">
+              <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
+            </v-row>
+            <v-row>
+              <router-link to="/annuaire" class="small-link ml-12"
+                >Annuaire</router-link
+              >
+            </v-row>
+            <v-row>
+              <router-link to="/actualites" class="small-link ml-12"
+                >Actualités</router-link
+              >
+            </v-row>
+            <v-row>
+              <router-link to="/annonces" class="small-link ml-12"
+                >Annonces</router-link
+              >
+            </v-row>
+          </v-col>
+
+          <v-col cols="2" v-if="!mdAndDown">
+            <v-row class="title-link">
+              <h5 class="ml-12 mt-10 h5-title">Logiciels culturels</h5>
+            </v-row>
+            <v-row>
+              <router-link to="/opentalent_artist" class="small-link ml-12"
+                >Opentalent Artist</router-link
+              >
+            </v-row>
+            <v-row>
+              <router-link to="/opentalent_school" class="small-link ml-12"
+                >Opentalent School</router-link
+              >
+            </v-row>
+            <v-row>
+              <router-link to="/opentalent_manager" class="small-link ml-12"
+                >Opentalent Manager</router-link
+              >
+            </v-row>
+          </v-col>
+
+          <v-col cols="2" v-if="!mdAndDown">
+            <v-row class="title-link">
+              <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
+            </v-row>
+            <v-row>
+              <NuxtLink
+                to="https://ressources.opentalent.fr/display/FAQ/Accueil"
+                class="small-link ml-12"
+                >Foire Aux Questions</NuxtLink
+              >
+            </v-row>
+            <v-row>
+              <NuxtLink
+                to="https://ressources.opentalent.fr/"
+                class="small-link ml-12"
+                target="_blank"
+                >Support en ligne</NuxtLink
+              >
+            </v-row>
+            <v-row>
+              <NuxtLink
+                to="/nous-contacter"
+                class="small-link ml-12"
+                target="_blank"
+                >Nous contacter</NuxtLink
+              >
+            </v-row>
+          </v-col>
+
+          <v-col cols="3" v-if="!mdAndDown">
+            <v-row class="title-link">
+              <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
+            </v-row>
+
+            <v-row class="ml-5" no-gutters>
+              <v-col cols="2">
+                <a
+                  href="https://www.facebook.com/opentalent"
                   target="_blank"
-                  >Support en ligne</NuxtLink
-                >
-              </v-row>
-              <v-row>
-                <NuxtLink
-                  to="/nous-contacter"
-                  class="small-link ml-12"
+                  class="fab fa-facebook brand"
+                />
+              </v-col>
+              <v-col cols="2">
+                <a
+                  href="https://twitter.com/Opentalent_FRA"
                   target="_blank"
-                  >Nous contacter</NuxtLink
-                >
-              </v-row>
-            </v-col>
-
-            <v-col
-              :cols="smAndDown ? 6 : 3"
-              :class="smAndDown ? 'link-sm' : ''"
-            >
-              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-                <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
-              </v-row>
-
-              <v-row class="ml-5" no-gutters>
-                <v-col :cols="smAndDown ? 4 : 2">
-                  <a
-                    href="https://www.facebook.com/opentalent"
-                    target="_blank"
-                    class="fab fa-facebook brand"
-                  />
-                </v-col>
-                <v-col :cols="smAndDown ? 4 : 2">
-                  <a
-                    href="https://twitter.com/Opentalent_FRA"
-                    target="_blank"
-                    class="fa-brands fa-square-twitter brand"
-                  />
-                </v-col>
-                <v-col :cols="smAndDown ? 4 : 2">
-                  <a
-                    href="https://www.linkedin.com/company/2iopenservice"
-                    target="_blank"
-                    class="fab fa-linkedin brand"
-                  />
-                </v-col>
-
-                <v-col :cols="smAndDown ? 4 : 2">
-                  <a
-                    href="https://www.youtube.com/@Opentalent74300"
-                    target="_blank"
-                    class="fab fa-youtube brand"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </div>
+                  class="fa-brands fa-square-twitter brand"
+                />
+              </v-col>
+              <v-col cols="2">
+                <a
+                  href="https://www.linkedin.com/company/2iopenservice"
+                  target="_blank"
+                  class="fab fa-linkedin brand"
+                />
+              </v-col>
+
+              <v-col cols="2">
+                <a
+                  href="https://www.youtube.com/@Opentalent74300"
+                  target="_blank"
+                  class="fab fa-youtube brand"
+                />
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+
+        <v-row class="justify-center" v-if="mdAndDown">
+          <v-col cols="12" class="text-center">
+            <a
+              href="https://www.facebook.com/opentalent"
+              target="_blank"
+              class="fab fa-facebook brand-md"
+            />
+            <a
+              href="https://twitter.com/Opentalent_FRA"
+              target="_blank"
+              class="fa-brands fa-square-twitter brand-md"
+            />
+            <a
+              href="https://www.linkedin.com/company/2iopenservice"
+              target="_blank"
+              class="fab fa-linkedin brand-md"
+            />
+            <a
+              href="https://www.youtube.com/@Opentalent74300"
+              target="_blank"
+              class="fab fa-youtube brand-md"
+            />
+          </v-col>
+        </v-row>
       </div>
-      <v-row class="footer" justify="center">
+      <v-row v-if="mdAndDown">
+        <v-col cols="12" >
+          <div v-for="(item, index) in footerLinks" :key="index">
+            <v-container>
+              <div  class="link-md d-flex justify-space-between align-left" @click="toggle(index)">
+              {{ item.label }}
+              <v-icon>
+                {{
+                  isActive(index) ? "fas fa-chevron-up" : "fas fa-chevron-down"
+                }}
+              </v-icon>
+            </div>
+              <div class="answer" v-if="isActive(index)">
+              <div
+                v-for="(sublink, sublinkIndex) in item.sublink"
+                :key="sublinkIndex"
+                class="mt-3"
+              >
+                <NuxtLink class="small-link-sm" :to="sublink.link">{{ sublink.label }}</NuxtLink>
+              </div>
+            </div>
+            </v-container>
+  
+          </div>
+        </v-col>
+      </v-row>
+      <v-row :class="mdAndDown ? '' : 'footer'" justify="center">
         <p class="mt-6">
           <a class="mention" href="/mentions-legales" target="_blank"
             >Mentions légales</a
@@ -167,12 +204,104 @@ import { useDisplay } from "vuetify";
 import { ref, provide } from "vue";
 
 const footerElement = ref(null);
+const footerLinks = ref([
+  {
+    label: "AGENDA CULTUREL",
+    sublink: [
+      {
+        label: "Annuaire",
+        link: "/annuaire",
+      },
+      {
+        label: "Actualités",
+        link: "/actualites",
+      },
+      {
+        label: "Annonces",
+        link: "/annonces",
+      },
+    ],
+  },
+  {
+    label: "LOGICIELS CULTURELS ",
+    sublink: [
+      {
+        label: "Opentalent Artist",
+        link: "/opentalent_artist)",
+      },
+      {
+        label: "Opentalent School",
+        link: "/opentalent_school",
+      },
+      {
+        label: "Opentalent Manager",
+        link: "/opentalent_manager",
+      },
+    ],
+  },
+  {
+    label: "À PROPOS ",
+    sublink: [
+      {
+        label: "Qui sommes-nous",
+        link: "/qui-sommes-nous)",
+      },
+      {
+        label: "Nous rejoindre",
+        link: "/nous-rejoindre",
+      },
+      {
+        label: "Nous contacter",
+        link: "/nous-contacter",
+      },
+    ],
+  },
+  {
+    label: "ESPACE CLIENT ",
+    sublink: [
+      {
+        label: "Foire Aux Questions ",
+        link: "/ https://ressources.opentalent.fr/)",
+      },
+      {
+        label: "Support en ligne ",
+        link: "/https://ressources.opentalent.fr/?contact",
+      },
+      {
+        label: "Nous contacter ",
+        link: "/nous-contacter",
+      },
+    ],
+  },
+]);
+const activeIndex = ref(-1);
 
+function toggle(index) {
+  activeIndex.value = activeIndex.value === index ? -1 : index;
+}
+
+function isActive(index) {
+  return activeIndex.value === index;
+}
 provide("footerElement", footerElement);
-const { smAndDown, lgAndUp } = useDisplay();
+const { mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
+
+
+.jusitfy-center {
+  justify-content: center;
+}
+.logo-md {
+  width: 18rem;
+}
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .mention {
   text-decoration: none;
   color: #ffffff;
@@ -184,11 +313,18 @@ const { smAndDown, lgAndUp } = useDisplay();
   font-size: 1.9rem;
   text-decoration: none !important;
 }
-.flex-container {
+
+.brand-md {
+  color: #ecfbfc;
+  font-size: 3rem;
+  text-decoration: none !important;
+  margin: 0 1rem;
+}
+/* .flex-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-}
+} */
 
 .vertical-bar {
   height: 4rem;
@@ -209,15 +345,21 @@ const { smAndDown, lgAndUp } = useDisplay();
   letter-spacing: 1.2px;
   text-transform: uppercase;
 }
-.link-sm {
+.link-md {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  flex-direction: row;
+  text-align: left;
+  text-transform: uppercase;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+
+  
 }
 
-.logo-opentalent-sm {
+.logo-opentalent-md {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -238,7 +380,16 @@ const { smAndDown, lgAndUp } = useDisplay();
 .title-link-sm {
   margin-bottom: 0.1rem;
 }
-
+.small-link-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.3rem;
+  line-height: 20px;
+  color: #ffffff;
+  text-decoration: none !important;
+  text-align: left;
+}
 .small-link {
   font-family: "Barlow";
   font-style: normal;

components/Layout/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-grey">
+  <div class="container-grey" v-if="!mdAndDown">
     <v-row>
       <v-col cols="12" class="buttons-col">
         <nuxt-link to="https://admin.opentalent.fr/#/login/" style="text-decoration: none">
@@ -18,7 +18,7 @@
       </v-col>
     </v-row>
   </div>
-  <v-row class="menu">
+  <v-row class="menu" v-if="!mdAndDown">
     <v-col cols="3">
       <nuxt-link to="/">
         <v-img class="logo" src="/images/logo/navigation-logo.png" />
@@ -89,6 +89,68 @@
       <nuxt-link class="link-style" to="/nous-contacter">Contact</nuxt-link>
     </v-col>
   </v-row>
+  <v-app v-if="mdAndDown">
+    <v-app-bar app>
+      <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
+
+      <nuxt-link to="/">
+        <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
+      </nuxt-link>
+
+      <nuxt-link
+        to="https://admin.opentalent.fr/#/login/"
+        style="text-decoration: none"
+      >
+        <v-btn text>
+          <v-icon left class="fas fa-user icon"></v-icon>
+        </v-btn>
+      </nuxt-link>
+
+      <v-btn text>
+        <v-icon left class="fas fa-phone icon"></v-icon>
+      </v-btn>
+
+      <nuxt-link to="/agenda-culturel" style="text-decoration: none">
+        <v-btn text>
+          <v-icon left class="fas fa-calendar icon"></v-icon>
+        </v-btn>
+      </nuxt-link>
+    </v-app-bar>
+
+    <!-- Tiroir de navigation principal -->
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list nav dense>
+        <v-list-item
+          v-for="(item, index) in menuItems"
+          :key="item.id"
+          @click="selectMenu(item.id)"
+        >
+          <v-list-item-title>
+            {{ item.label }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <!-- Tiroir de sous-menu -->
+    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
+      <v-list nav dense>
+        <v-list-item>
+          <v-list-item-title @click="closeSubMenu">Retour</v-list-item-title>
+        </v-list-item>
+        <nuxt-link
+          v-for="(subItem, subIndex) in subMenus[currentMenu]"
+          :key="subIndex"
+          :to="subItem.href"
+          style="text-decoration: none !important; color: black"
+        >
+          <v-list-item>
+            <v-list-item-title>{{ subItem.name }}</v-list-item-title>
+          </v-list-item>
+        </nuxt-link>
+      </v-list>
+    </v-navigation-drawer>
+  </v-app>
 </template>
 
 <script setup>
@@ -110,6 +172,59 @@ const aboutLinks = ref([
   { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
   { name: "Nous rejoindre", href: "/nous-rejoindre" },
 ]);
+
+const drawer = ref(false);
+const subMenuDrawer = ref(false);
+const currentMenu = ref("");
+const menuItems = ref([
+  { id: "logiciels", label: "Nos logiciels" },
+  { id: "services", label: "Nos services" },
+  { id: "about", label: "À propos" },
+  { id: "actualites", label: "Actualités" },
+  { id: "contact", label: "Contact" },
+]);
+
+const subMenus = ref({
+  logiciels: [
+    { name: "Opentalent Artist", href: "/opentalent_artist" },
+    { name: "Opentalent School", href: "/opentalent_school" },
+    { name: "Opentalent Manager", href: "/opentalent_manager" },
+  ],
+  services: [
+    { name: "Formations", href: "/formations" },
+    { name: "Webinaires", href: "/webinaires" },
+  ],
+  propos: [
+    { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
+    { name: "Nous rejoindre", href: "/nous-rejoindre" },
+  ],
+});
+
+const toggleDrawer = () => {
+  drawer.value = !drawer.value;
+};
+
+const selectMenu = (id) => {
+  if (subMenus.value[id]) {
+    currentMenu.value = id;
+    subMenuDrawer.value = true;
+    drawer.value = false;
+  } else {
+    switch (id) {
+      case "actualites":
+        window.location.href = "/actualites";
+        break;
+      case "contact":
+        window.location.href = "/nous-contacter";
+        break;
+    }
+  }
+};
+
+const closeSubMenu = () => {
+  subMenuDrawer.value = false;
+  drawer.value = true;
+};
 </script>
 
 <style scoped>
@@ -199,4 +314,13 @@ const aboutLinks = ref([
 .logo {
   height: 8rem;
 }
+
+.logo-md {
+  width: 150px;
+  height: 300px;
+}
+
+.icon {
+  color: #000000;
+}
 </style>

components/Layout/UI/TitlePage.vue

@@ -1,12 +1,21 @@
 <template>
   <div>
-    <h1 class="title text-center">{{ title }}</h1>
-    <h2 v-if="subtitle" class="subtitle text-center">{{ subtitle }}</h2>
+    <h1 style="text-align: center" :class="mdAndDown ? 'title-md ' : 'title '">
+      {{ title }}
+    </h1>
+    <h2
+      style="text-align: center"
+      :class="mdAndDown ? 'subtitle-md ' : 'subtitle '"
+    >
+      {{ subtitle }}
+    </h2>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { useDisplay } from "vuetify";
+const { mdAndDown } = useDisplay();
+import { defineProps } from "vue";
 
 const props = defineProps({
   title: String,
@@ -15,7 +24,6 @@ const props = defineProps({
 </script>
 
 <style scoped>
-
 .text-center {
   text-align: center;
 }
@@ -23,19 +31,37 @@ const props = defineProps({
 .title {
   font-size: 4rem;
   line-height: 3.5rem;
-  letter-spacing: .3rem;
+  letter-spacing: 0.3rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
   text-transform: uppercase;
 }
 
+.title-md {
+  font-size: 2rem;
+  line-height: 2.5rem;
+  letter-spacing: 0.2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  
+  text-transform: uppercase;
+}
 
 .subtitle {
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: .5rem;
+  letter-spacing: 0.5rem;
   margin-bottom: 8rem;
   text-transform: uppercase;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
 
+.subtitle-md {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  width: 100%;
 }
 </style>

pages/index.vue

@@ -1,11 +1,17 @@
 <template>
   <LayoutNavigation />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+  <div v-if="shouldShowStickyMenu && !mdAndDown" id="sticky-menu">
     <CommonStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
   </div>
+  <div v-if="mdAndDown">
+    <div class="sticky-menu">
+      <v-btn color="primary">Nous contacter</v-btn>
+      <v-btn color="secondary">Nous appeler</v-btn>
+    </div>
+  </div>
   <HomeCaroussel />
 
   <HomePromotion />
@@ -14,16 +20,17 @@
   <HomeEventAgenda />
   <HomeBesoin />
   <HomeReviews />
-  <!-- <HomeNews /> -->
   <HomeHelp />
-  <LayoutFooterPrefooter/>
+  <LayoutFooterPrefooter />
   <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
 
+const { mdAndDown } = useDisplay();
 const router = useRouter();
 
 const shouldShowStickyMenu = ref(true);
@@ -63,6 +70,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.sticky-menu {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  z-index: 100;
+}
 .spacer {
   height: 2rem;
 }

pages/mobile.vue

@@ -1,58 +1,146 @@
 <template>
-  <v-app>
-    <v-app-bar app>
-      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
-
-      <v-btn icon>
-        <v-icon>mdi-bell</v-icon>
-      </v-btn>
-
-    </v-app-bar>
-
-    <v-navigation-drawer v-model="drawer" app>
-      <v-list nav dense>
-        <v-list-item v-for="(item, index) in items" :key="item">
-          <v-list-item-title @click="selectMenu(item)">
-            {{ item }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
-      <v-list nav dense>
-        <v-list-item
-          v-for="(subItem, subIndex) in subMenus[currentMenu]"
-          :key="subIndex"
-        >
-          <v-list-item-title>{{ subItem }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-  </v-app>
+  <div v-if="smAndDown">
+    <v-row>
+      <v-col cols="12">
+        <Carousel :itemsToShow="1" :wrapAround="true" ref="carousel">
+          <Slide v-for="(card, index) in cards" :key="index">
+            <div class="card-sm">
+              <v-card class="review-card left mx-auto">
+                <v-card-title>
+                  <span class="review-name">{{ card.name }}</span>
+                </v-card-title>
+
+                <v-card-text>
+                  <p class="description-review">
+                    {{ card.review }}
+                  </p>
+                </v-card-text>
+                <div class="card-footer">
+                  <small class="status">{{ card.status }}</small>
+
+                  <small class="structure">{{ card.structure }}</small>
+                </div>
+              </v-card>
+            </div>
+          </Slide>
+        </Carousel>
+      </v-col>
+    </v-row>
+
+    <v-row class="justify-center align-center">
+      <v-col class="d-flex justify-space-around align-center">
+        <i
+          style="cursor: pointer"
+          class="fa-solid fa-arrow-left-long"
+          @click="goPrevious"
+        />
+        <div class="custom-controls">
+          <div
+            v-for="(item, index) in cards"
+            :key="index"
+            :class="{ 'active-control': index === state.activeIndex }"
+            class="ml-6"
+          />
+        </div>
+        <i
+          style="cursor: pointer"
+          class="fa-solid fa-arrow-right-long"
+          @click="goNext"
+        />
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      drawer: false,
-      subMenuDrawer: false,
-      currentMenu: "",
-      items: ["web", "shopping", "videos", "images", "news"],
-      subMenus: {
-        web: ["Sous-menu Web 1", "Sous-menu Web 2"],
-        shopping: ["Sous-menu Shopping 1", "Sous-menu Shopping 2"],
-      },
-    };
+<script setup>
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify";
+
+const { smAndDown } = useDisplay();
+const carousel = ref(null);
+
+const state = ref({
+  activeIndex: 0,
+});
+
+
+const goNext = () => {
+  if (carousel.value) {
+    carousel.value.next();
+    state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
+  }
+};
+
+const goPrevious = () => {
+  if (carousel.value) {
+    carousel.value.prev();
+    state.value.activeIndex = state.value.activeIndex - 1 < 0 ? cards.length - 1 : state.value.activeIndex - 1;
+  }
+};
+
+
+
+const cards = [
+  {
+    name: "Patrice CATHELIN",
+    review:
+      "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+    status: "Directeur administratif & pédagogique",
+    structure: "Conservatoire de Musique & de Danse de Sens (78)",
   },
-  methods: {
-    selectMenu(item) {
-      this.currentMenu = item;
-      this.subMenuDrawer = true; 
-      this.drawer = false;
-    },
+  {
+    name: "Karine GIRAUD",
+    review:
+      "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
+    status: "Secrétaire administrative",
+    structure: "Association Musicale Sainte Cécile de Lagord (17)",
   },
-};
-</script>
+  {
+    name: "Laurent BEL",
+    review:
+      "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré.",
+    status: "Directeur administratif & pédagogique",
+    structure: "École de Musique EPIC Musique en 4 Rivières (74)",
+  },
+  {
+    name: "Philippe BORY",
+    review:
+      "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien.",
+    status: "Personnel administratif",
+    structure: "École d'Arts de Saint-Michel-sur-Orge (91)",
+  },
+];
+</script>
+
+<style scoped>
+.custom-controls div {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background-color: grey;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+}
+
+.custom-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.custom-controls .active-control {
+  background-color: black;
+  margin-right: 10px;
+}
+
+.card-sm {
+  width: 300px;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

pages/poc.vue

@@ -1,424 +1,308 @@
 <template>
-  <div id="Catalogue">
-    <LayoutContainer>
-      <div class="grey-container">
-        <v-row class="custom-row">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Des webinaires pour tous'"
-          />
-        </v-row>
+  <LayoutContainer>
+    <LayoutNavigation />
 
-        <v-row class="custom-row">
-          <LayoutUITitlePage
-            title="SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE"
-            subtitle="Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité. Découvrez comment nos outils peuvent transformer votre quotidien : "
-          />
-        </v-row>
+    <LayoutUITitlePage
+      title="LOGICIELS CULTURELS"
+      subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
+    />
+    <div v-if="mdAndDown">
+    <div class="sticky-menu">
+      <v-btn color="primary">Nous contacter</v-btn>
+      <v-btn color="secondary">Nous appeler</v-btn>
+    </div>
+  </div>
+    <v-carousel
+      ref="carousel"
+      v-model="activeIndex"
+      :show-arrows="false"
+      class="carousel"
+      :hide-delimiter-background="true"
+      :show-delimiters="false"
+      :touch="true"
+      :wrap-around="true"
+      :interval="5000"
+    >
+      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
+        <v-row>
+          <v-col cols="12">
+            <v-img class="logo" :src="item.logo" />
+
+            <p
+              class="description"
+              v-html="item.description"
+              style="text-align: justify"
+            ></p>
 
-        <v-row
-          style="
-            padding: 2rem;
-            max-width: 90%;
-            margin-left: auto;
-            margin-right: auto;
-          "
-          class="custom-row"
-        >
-          <v-col v-for="(course, index) in courses" :key="index" cols="4">
-            <v-card class="mb-4">
-              <v-card-text>
-                <div class="title-card-container d-flex align-center">
-                  <v-img class="logo-img mr-2" :src="course.imageUrl"></v-img>
-                  <h4 class="card-title">{{ course.title }}</h4>
-                </div>
-                <p class="details-card">{{ course.description }}</p>
+            <!-- <nuxt-link :to="item.link">
+              <v-btn :class="item.buttonClass">
+                En savoir plus
+                <i
+                  class="fas fa-arrow-right"
+                  style="color: white; margin-left: 8px"
+                ></i>
+              </v-btn>
+            </nuxt-link> -->
+          </v-col>
+        </v-row>
 
-                <div class="container-blue mt-6">
-                  <h6 class="title-obj">Objectifs</h6>
-                  <ul class="list-obj">
-                    <li
-                      v-for="(objective, objIndex) in course.objectives"
-                      :key="objIndex"
-                    >
-                      {{ objective }}
-                    </li>
-                  </ul>
-                </div>
+        <v-row>
+          <v-col cols="12">
+            <div
+              class="background-rectangle"
+              :style="{ backgroundColor: item.color }"
+            />
+            <v-card  class="card" elevation="5">
+                <v-img
+                  class="profile-image"
+                  :src="item.avatar"
+                  alt="Profile Image"
+                  contain
+                  rounded
+                />
+                <v-card-text>
+                  <v-card-title class="name">
+                    {{ item.name }}
 
-                <div class="container-blue">
-                  <h6 class="title-obj">Programme</h6>
-                  <v-row>
-                    <v-col
-                      v-for="column in course.additionalObjectives"
-                      :key="column.id"
-                      cols="6"
-                    >
-                      <ul class="list-obj">
-                        <li
-                          v-for="(objective, objIndex) in column.objectives"
-                          :key="objIndex"
-                        >
-                          {{ objective }}
-                        </li>
-                      </ul>
-                    </v-col>
-                  </v-row>
-                </div>
-                <v-chip class="badge-time">
-                  <span>Durée : {{ course.duration }}</span></v-chip
-                >
-                <v-chip class="badge-time">
-                  <span>{{ course.price }}</span></v-chip
-                >
+                    <p class="school">
+                      {{ item.school }}
+                    </p>
+                  </v-card-title>
+                  <p class="status">
+                    {{ item.status }}
+                  </p>
+                </v-card-text>
+              </v-card>
 
-                <v-chip class="chip-download" @click="toggleDetails(course)">
-                  Inscrivez-vous
-                </v-chip>
-              </v-card-text>
-            </v-card>
+            <v-img :src="item.image" class="image" />
           </v-col>
         </v-row>
-      </div>
+      </v-carousel-item>
 
-      <div v-if="course.showDetails" class="container-inscription">
-        <div class="container-green">
-          <LayoutUISubTitle
-            :titleColor="'#fff'"
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Inscrivez vous'"
-          />
-          <h3 class="title-inscription text-center mt-4">
-            Vous y êtes presque !
-          </h3>
-          <iframe
-          :src="webinaireCalendars[course.title]"
-          width="700"
-          height="700"
-        ></iframe>
-          <v-row>
-            <v-col cols="12">
-              <v-btn @click="toggleDetails(course)">Fermer</v-btn>
-            </v-col>
-          </v-row>
-        </div>
+      <div class="custom-controls">
+        <div
+          v-for="(item, index) in carouselItems"
+          :key="index"
+          :class="{ 'active-control': index === activeIndex }"
+          @click="changeSlide(index)"
+        />
       </div>
-    </LayoutContainer>
-  </div>
+    </v-carousel>
+  </LayoutContainer>
 </template>
 
 <script setup>
 import { ref } from "vue";
+import { useDisplay } from "vuetify";
+const { mdAndDown } = useDisplay();
 
+let activeIndex = ref(0);
 
-const currentWebinaire = ref(null);
-const webinaireCalendars = {
-  "Webinaire Artist":
-    "https://widget.weezevent.com/ticket/E920851/?code=62708&locale=fr-FR&width_auto=1&color_primary=0e2d32",
-  "Webinaire School":
-    "https://widget.weezevent.com/ticket/E963899/?code=47365&locale=fr-FR&width_auto=1&color_primary=0e2d32",
-  "Webinaire Manager":
-    "https://widget.weezevent.com/ticket/E923624/?code=4857&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+const changeSlide = (index) => {
+  activeIndex.value = index;
 };
 
-const showModal = (webinaireTitle) => {
-  currentWebinaire.value = webinaireTitle.trim();
-};
-
-const closeModal = () => {
-  currentWebinaire.value = null;
-};
-const downloadPdf = (pdfUrl) => {
-  window.open(pdfUrl, "_blank");
-};
-const courses = [
+const carouselItems = ref([
   {
-    imageUrl: "/images/logo/logiciels/&_Jaune.png",
-    title: "Webinaire Artist ",
+    logo: "/images/logo/logiciels/School-noir.png",
     description:
-      "Ce webinaire est destiné aux acteurs culturels tels que les orchestres, les chorales, les compagnies et troupes de danse, théâtre et cirque. Il vous permettra de découvrir les fonctionnalités du logiciels, les avantages et les différentes versions.. ",
-    objectives: [
-      "Découvrir le logiciel Opentalent Artist",
-      "Présentation des principales fonctionnalités",
-      "Quelles sont les différences entre les versions Standard & Premium ?",
-      "Qu'est ce que l'Agenda culturel et l'annuaire ? ",
-    ],
-    duration: "1H30",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: [
-          "Accès et interface",
-          "Configuration",
-          "Répertoire",
-          "Agenda",
-        ],
-      },
-      {
-        id: 2,
-        objectives: [
-          "Parc matériel",
-          "Rapport d’activité",
-          "Site internet",
-          "Communication",
-        ],
-      },
-    ],
-    price: "Gratuit",
-    downloadLink:
-      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
+      "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…",
+    buttonClass: "btn-school",
+    image: "/images/carousel/school/Fille_School.png",
+    color: "rgba(32, 147, 190, 0.4)",
+    link: "/opentalent_school",
+    name: "Cindy Blanchard",
+    school: "Conservatoire de Musique",
+    status: "élève",
+    avatar: "/images/carousel/school/avatar.png",
   },
   {
-    // number: "02",
-    title: "Webinaire School",
-    imageUrl: "/images/logo/logiciels/&_Bleu.png",
+    logo: "/images/logo/logiciels/Artist-noir.png",
     description:
-      " Rejoignez notre webinaire dédié aux petits comme aux GRANDS établissements d'enseignement artistique et découvrez comment optimiser votre travail grâce à un outil professionnel.",
-    objectives: [
-      "Découvrir le logiciel Opentalent School",
-      "Comprendre l'écosystème de l'outil",
-      "Présentation des principales fonctionnalités",
-      "Identifier les avantages de cet outil pour votre structure",
-    ],
-    duration: "1h",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: [
-          "Accès et interface",
-          "Configuration",
-          "Répertoire",
-          "Agenda",
-        ],
-      },
-      {
-        id: 2,
-        objectives: [
-          "Parc matériel",
-          "Rapport d’activité",
-          "Site internet",
-          "Communication",
-        ],
-      },
-    ],
-    price: "Gratuit",
-    downloadLink:
-      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
+      "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.",
+    buttonClass: "btn-artist",
+    image: "/images/carousel/artist/musician.png",
+    color: "rgba(250, 194, 10, 0.4)",
+    link: "opentalent_artist",
+    name: "Thierry Dupont ",
+    school: "Orchestre d’harmonie",
+    status: "Admin",
+    avatar: "/images/carousel/artist/avatar.png",
   },
   {
-    title: "Webinaire Manager",
-    imageUrl: "/images/logo/logiciels/&_Rouge.png",
+    logo: "/images/logo/logiciels/Manager-noir.png",
     description:
-      "Ces webinaires  sont spécialement conçues pour les utilisateurs du logiciel fédéral de la CMF (Confédération Musicale de France). Gagner en temps administratif, booster vos performances et optimiser l'utilisation du logiciel.",
-    objectives: [
-      "Configurer l'appel de cotisation",
-      "Suivre l'appel de cotisation",
-      "Gérer votre site internet (débutants)",
-      "Gérer votre site internet (confirmés)",
-    ],
-    duration: "1H30",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: [
-          "Mieux connaitre votre logiciel",
-          "Optimiser votre temps administratif",
-        ],
-      },
-      {
-        id: 2,
-        objectives: [
-          "Communiquer avec votre réseau",
-          "Promouvoir votre organisation",
-        ],
-      },
-    ],
-    price: "Gratuit",
-    downloadLink:
-      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
+      "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.",
+    buttonClass: "btn-manager",
+    image: "/images/carousel/manager/fédération.png",
+    color: "rgba(216, 5, 11, 0.4)",
+    link: "opentalent_manager",
+    name: "Marie Voisin",
+    school: "Réseau d'organisations culturelles ",
+    status: "ADMIN",
+    avatar: "/images/carousel/manager/avatar.png",
   },
-];
-courses.forEach(course => course.showDetails = false);
-const toggleDetails = (course) => {
-  course.showDetails = !course.showDetails;
-};
-
+]);
 </script>
-<style scoped>
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
 
-.v-card {
-  border: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
+<style scoped>
+.carousel {
+  height: 100% !important;
 }
-.grey-container {
-  background-color: #f8f8f8;
+::v-deep .v-carousel__controls {
+  display: none;
 }
-.chip-download {
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.sticky-menu {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  background-color: white;
+  z-index: 100;
 }
-
-.badge-time {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* ============= TITLE ===============  */
+.title {
+  font-size: 4rem;
+  line-height: 3.5rem;
+  letter-spacing: 1.1rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
-.badge-time span {
-  color: var(--Vert-90, #0e2d32);
+.subtitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: 0.5rem;
+  margin-bottom: 8rem;
 }
 
-.list-obj {
-  margin-top: 0.5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
-
-  color: #000000;
+/* ============= CARD ===============  */
+.card {
+  position: absolute ;
+  width: 10rem;
+  height: 20%;
+  left: 6rem;
+  border-radius: 1rem;
 }
 
-.title-obj {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  color: #0e2d32;
+.profile-image {
+  width: 40%;
+  margin: auto;
 }
 
-.container-blue {
-  justify-content: space-between;
-  align-items: center;
-  background: #c3e5e7;
-  padding: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border-radius: 1rem;
-  padding-left: 1.5rem;
-  height: 11rem;
+.name {
+  text-align: center;
+  font-size: .9rem;
+  white-space: normal;
+}
+.school,
+.status {
+  text-align: center;
+  white-space: normal;
 }
 
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-  height: 5rem;
+.school {
+  color: #888888;
+  margin-top: -0.8rem;
+  font-weight: normal !important;
+  font-size: 0.8rem !important;
+  margin-top: 0.2px;
+  line-height: 1rem !important;
 }
 
-.title-card-container {
-  border-bottom: 1px solid #0e2d32;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
+.status {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: black !;
+  font-size: 100%;
+  margin-top: 0.8rem;
 }
+/* ============= RECTANGLE ===============  */
+.background-rectangle {
+  position: absolute;
+  width: 100%;
+  height: 20rem;
+  left: 72%;
+  top: 70%;
+  transform: translate(-70%, -50%);
+  border-radius: 200px 0px 0px 15rem;
+  z-index: -1;
 
-.card-title {
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 0.8rem;
+  /* ============= LOGO ===============  */
+}
+.logo {
+  width: 15rem;
+  height: 20vh;
+  margin-left: 1rem;
+}
+.description {
+  text-align: left;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
-.logo-img {
+/* ============= CAROUSEL ===============  */
+.custom-controls {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 50px;
-  height: 50px;
+  top: 50%;
+  right: 1vw;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
 }
 
-:deep().subtitle {
-  font-size: 1.5rem;
-  font-weight: normal !important;
-  line-height: 2rem;
-  letter-spacing: 0.1rem;
-  margin-bottom: 1rem;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
+.image {
+  height: 25rem;
+  right: -3rem;
+  bottom: 2rem;
 }
 
-:deep().title {
-  font-size: 2rem;
-  line-height: 3.5rem;
-  letter-spacing: 0.1rem;
-  margin-top: 2rem;
+.custom-controls div {
+  position: relative;
+  top: 10rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background-color: grey;
+  cursor: pointer;
   margin-bottom: 0.5rem;
-  text-transform: uppercase;
 }
 
-.title-inscription {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 18px;
-  color: #fff;
-  margin-bottom: 2rem;
+.custom-controls .active-control {
+  background-color: #000;
+  margin-right: 2rem;
 }
 
-.close-button {
-  background-color: #e34461;
-  color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* ============= BUTTON ===============  */
+
+.btn-school {
+  background: rgba(32, 147, 190, 0.4);
 }
-.calendar-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(14, 45, 50, 0.8);
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.btn-artist {
+  background: rgba(250, 194, 10, 0.4);
+}
+
+.btn-manager {
+  background: rgba(216, 5, 11, 0.4);
 }
 
-.container-green {
-  background-color: #0e2d32;
-  padding: 4rem;
+.btn-school,
+.btn-artist,
+.btn-manager {
+  text-align: left;
+  border-radius: 0.5rem;
+  margin-left: 2vw;
+  padding: 15px;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 0.7rem;
+  line-height: 15px;
+  width: 10rem;
+  height: 2.5rem;
+  color: white;
 }
 </style>

pages/stick.vue

@@ -1,40 +0,0 @@
-<template>
-  <CommonReviewCard
-    :cards="cards"
-  />
-</template>
-
-<script>
-
-const cards = [
-  {
-    description:
-      "C'est un logiciel simple d'utilisation après la formation. Pensé pour la musique, il s'adapte rès bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
-    name: "Patrice CATHELIN ",
-    status: "Directeur administratif & pédagogique ",
-    structure: "Conservatoire de Musique & de Danse de Sens (78)",
-  },
-  {
-    description:
-      "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
-    name: "Karine GIRAUD",
-    status: "Secrétaire administrative",
-    structure: "Association Musicale Sainte Cécile de Lagord (17)",
-  },
-  {
-    description:
-      "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré..",
-    name: "Laurent BEL",
-    status: "Directeur administratif & pédagogique",
-    structure: " École de Musique EPIC Musique en 4 Rivières (74)",
-  },
-  {
-    description:
-      "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien..",
-    name: "Philippe BORY",
-    status: "Personnel administratif",
-    structure: "École d'Arts de Saint-Michel-sur-Orge (91)",
-  },
-];
-
-</script>