correction v3

assets/css/main.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
 
-h1, h2, h3, h4, h5, h6, p, .btn-event, .btn-contact, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
+h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
 .presentation-title, .subtitle
 .status {
   font-family: "Barlow";
@@ -14,4 +14,9 @@ h1, h2, h3, h4, h5, h6, p, .btn-event, .btn-contact, td, .button-faq, li, .btn-s
 
 .table-data-left {
   text-align: left;
-}
+}
+.row-custom{
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}

components/About/Agenda.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="L'agenda opentalent">
-    <LayoutContainer :overflow="false">
-      <v-row>
+    <LayoutContainer>
+      <v-row class="custom-row">
         <v-col cols="4">
           <h2 class="title">L'agenda Opentalent</h2>
         </v-col>
@@ -22,11 +22,13 @@
         </v-col>
       </v-row>
 
-      <p class="agenda-details">
-        Retrouvez tous les évènements culturels autour de chez vous.
-      </p>
+      <v-row class="custom-row">
+        <p class="agenda-details">
+          Retrouvez tous les évènements culturels autour de chez vous.
+        </p>
+      </v-row>
 
-      <v-row>
+      <v-row class="custom-row">
         <v-col cols="12">
           <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
             <Slide
@@ -150,7 +152,11 @@ const goNext = () => carousel.next();
 .green--text {
   color: green;
 }
-
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
 .red--text {
   color: red;
 }

components/About/Banner.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <LayoutUITitlePage title="Qui sommes nous ?" />
+    <LayoutUITitlePage title="Qui sommes-nous ?" />
 
     <v-row>
       <v-col cols="12">

components/About/Equipe.vue

@@ -1,18 +1,21 @@
 <template>
   <LayoutContainer id="Notre équipe">
-    <v-row class="mt-12">
+    <v-row class="mt-12 custom-row">
       <LayoutUISubTitle
         :iconSize="6"
         :iconClasses="iconClasses"
         :titleText="'notre équipe'"
       />
     </v-row>
-    <LayoutUITitle title="Une équipe spécialisée et passionnée" />
-    <h4 class="details ml-12 mt-6 mb-12">
+    <v-row class=" custom-row">
+      <LayoutUITitle title="Une équipe spécialisée et passionnée" />
+    <h4 class="details ml-4 mt-6 mb-12">
       Chez Opentalent, on recherche des compétences mais surtout des hommes et des femmes qui souhaitent s'engager dans un projet porteur de sens.
     </h4>
+    </v-row>
+
 
-    <v-row class="ml-12 mr-12">
+    <v-row class=" custom-row">
       <v-col cols="12" sm="6" md="4" lg="3" v-for="chef in chefs" :key="chef.id">
         <v-card>
           <v-img :src="chef.photo" height="370px"></v-img>
@@ -23,7 +26,7 @@
       </v-col>
     </v-row>
 
-    <v-row class="ml-12 mr-12"> 
+    <v-row class=" custom-row"> 
       <v-col cols="12" sm="6" md="4" lg="3" v-for="employe in employes" :key="employe.id">
         <v-card>
           <v-img :src="employe.photo" height="370px"></v-img>
@@ -58,7 +61,11 @@ const employes = ref([
 </script>
 
 <style scoped>
-
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
 .v-card {
   max-width: 284px;
   border: none !important; 

components/About/FAQ.vue

@@ -2,24 +2,23 @@
   <LayoutContainer>
     <v-row no-gutters>
       <v-col cols="6">
-        <v-img class="help-img" src="/images/help/Help.png" />
+        <div class="help-img"></div>
+        <!-- <v-img class="help-img" src="/images/help/Help.png" /> -->
       </v-col>
 
-      <v-col cols="6" class="help-col ">
+      <v-col cols="6" class="help-col">
         <div class="ml-6">
           <h4 class="subtitle-team">
-          Chez Opentalent, nous avons à coeur de répondre à vos interrogations
-          et de vous apporter la solution faite pour vous.
-        </h4>
-        <v-row>
+            Chez Opentalent, nous avons à coeur de répondre à vos interrogations
+            et de vous apporter la solution faite pour vous.
+          </h4>
           <nuxt-link to="/nous-contacter">
             <v-btn class="button-faq ml-6 mt-12">
               Nous contacter
             </v-btn></nuxt-link
           >
-        </v-row>
+          <v-row> </v-row>
         </div>
-
       </v-col>
     </v-row>
   </LayoutContainer>
@@ -38,27 +37,28 @@
 }
 
 .help-img {
-  height: 100%;
+  background-image: url(/images/help/Help.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
   width: 100%;
+  height: 20rem;
 }
 .subtitle-team {
   margin-bottom: 2rem;
-  margin-top: 10rem;
+  margin-top: 3rem;
   font-style: normal;
   font-weight: 400;
   font-size: 2rem;
   line-height: 34px;
-  width: 35rem;
+  width: 40rem;
+  margin-right: auto;
   color: white;
 }
 
 .help-col {
   background: var(--Vert-90, #0e2d32);
-}
+  height: 20rem;
 
-.text-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
 }
 </style>

components/About/Histoire.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <div id="Qui sommes-nous">
-      <v-row class="mt-12">
+      <v-row class="mt-12 custom-row">
         <v-col cols="3">
           <LayoutUISubTitle
             :titleText="'Qui sommes-nous ?'"
@@ -17,7 +17,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <v-row class="custom-row">
         <v-col cols="6">
           <v-img class="passion-img" src="/images/about/passion.jpg" />
         </v-col>
@@ -66,32 +66,12 @@
 <script setup></script>
 
 <style scoped>
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 15rem;
-  margin-left: 2rem;
-}
 
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
 }
 .culture-details {
   font-weight: 300;
@@ -109,6 +89,7 @@
   color: #071b1f;
   margin-bottom: 3rem;
   width: 25rem;
+  text-align: justify;
 }
 .passion-title {
   font-weight: 600;
@@ -117,6 +98,7 @@
   color: #071b1f;
   flex: none;
   margin-bottom: 3rem;
+  
 }
 
 .passion-details {
@@ -136,23 +118,8 @@
   border-radius: 4rem;
 }
 
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #071b1f;
-}
-
 .italic-title {
   text-align: justify;
-
-  font-family: "Barlow";
   font-style: italic;
   font-weight: 300;
   font-size: 34px;

components/About/Logiciels.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="Nos logiciels">
     <LayoutContainer>
-      <v-row class="mb-6">
+      <v-row class="mb-6 custom-row">
         <LayoutUISubTitle titleText="Ce qui nous anime" />
         <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
       </v-row>
 
-      <v-row no-gutters class="mb-12">
+      <v-row no-gutters class="mb-12 custom-row">
         <v-col cols="3">
           <p style="text-align: justify;" class="mr-4 ml-6">
             Découvrez notre gamme de logiciels de gestion & de communication
@@ -80,10 +80,11 @@ const items = [
 :deep().title{
   width: 100% !important;
 }
-.container {
-  max-width: 1700px;
-}
-.container-image {
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}.container-image {
   position: relative;
   background-image: url("/images/solutions/school.jpg");
   background-repeat: no-repeat;

components/About/Valeurs.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <div id="Nos valeurs">
-      <v-row class="mr-6 mb-6 mt-12">
+      <v-row class="mt-6 custom-row">
         <v-col cols="5">
           <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
 
@@ -85,58 +85,20 @@ const values = [
 ];
 </script>
 <style scoped>
-
-.icon-valeur{
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.icon-valeur {
   width: 50px;
   height: 50px;
   margin-bottom: 1rem;
 }
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 20rem;
-  margin-left: 2rem;
-}
-
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
-
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
-}
 .row {
   border-top: 1px solid #e5e5e5;
 }
-.icon {
-  color: #f4aa2a;
-  font-size: 1.5rem;
-  font-weight: 900;
-  margin-bottom: 1rem;
-}
-
 .title-valeurs {
   font-family: "Barlow";
   font-style: normal;

components/Home/Besoin.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer :overflow="false">
-    <v-row class="mt-6" justify="center">
-      <v-col cols="6" class="relative-container" >
+    <v-row class="mt-6" justify="center" >
+      <v-col cols="7" class="relative-container" >
         <div class="screen-img"></div>
         <div class="circle">
           <v-icon class="fa-brands fa-react icon" />
@@ -9,12 +9,12 @@
         </div>
       </v-col>
 
-      <v-col cols="6">
-        <h3 class="title-event">
+      <v-col cols="5" >
+        <h3 class="title-event ">
           Une solution évolutive pour vous donner entière satisfaction
         </h3>
 
-        <p class="details">
+        <p class="details ">
           La satisfaction de nos clients est notre première motivation et nous
           nous tenons à votre écoute pour faire évoluer notre logiciel. <br />
           <span class="bold">Un besoin ?</span> <br />
@@ -33,6 +33,9 @@ const { smAndDown, mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
+
+
+
 .container {
   display: flex;
   flex-direction: row;
@@ -93,13 +96,14 @@ const { smAndDown, mdAndDown } = useDisplay();
   margin-left: 2rem;
   color: #091d20;
   width: 20rem;
+  text-align: justify;
 }
 
 .screen-img {
   position: absolute;
   right: 0;
   margin-left: 3rem;
-  width: 600px;
+  width: 500px;
   height: 500px;
   background-image: url("/images/eventAgenda/logiciel.png");
   background-position: center;

components/Home/Caroussel.vue

@@ -21,7 +21,7 @@
             </v-row>
 
             <v-row class="align-start">
-              <p v-html="item.description" class="description"></p>
+              <p v-html="item.description" class="description" style="text-align: justify;"></p>
             </v-row>
 
             <v-row class="align-start">
@@ -108,13 +108,13 @@ const carouselItems = ref([
     link: "/opentalent_school",
     name: "Cindy Blanchard",
     school: "Conservatoire de Musique",
-    status: "Eleve",
+    status: "élève",
     avatar: "/images/carousel/school/avatar.png",
   },
   {
     logo: "/images/logo/logiciels/Artist-noir.png",
     description:
-      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
+      "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)",
@@ -127,7 +127,7 @@ const carouselItems = ref([
   {
     logo: "/images/logo/logiciels/Manager-noir.png",
     description:
-      "La solution de mise en réseau des organisations culturelles. 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.",
+      "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)",
@@ -141,6 +141,8 @@ const carouselItems = ref([
 </script>
 
 <style scoped>
+
+
 ::v-deep .v-carousel__controls {
   display: none;
 }
@@ -178,10 +180,12 @@ const carouselItems = ref([
 .name {
   text-align: center;
   font-size: 1rem;
+  white-space: normal;
 }
 .school,
 .status {
   text-align: center;
+  white-space: normal;
 }
 
 .school {

components/Home/Help.vue

@@ -9,8 +9,8 @@
 
           <v-col cols="6">
             <h4 class="subtitle-team">
-              Notre équipe est à vos côtés <br />
-              pour vous guider
+              Notre équipe est <br />
+              à vos côtés pour vous guider
             </h4>
 
             <p class="need-help">
@@ -88,7 +88,7 @@ const { smAndDown } = useDisplay();
 }
 
 .need-help {
-  width: 40rem;
+  width: 25rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;

components/Home/Promotion.vue

@@ -2,7 +2,7 @@
   <LayoutContainer>
     <v-col col="12" class="col-gestion">
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon size="8" class="fa-solid fa-circle icon-title" />
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
         <h5 class="subtitle">GESTION ET PROMOTION</h5>
       </div>
       <v-row>
@@ -52,11 +52,11 @@
       </h3>
 
       <div v-if="!smAndDown">
-        <v-row>
+        <v-row class="mb-6">
           <v-col cols="6">
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto2.svg" class="picto" />
+              <img src="/images/pictoHome/picto4.svg" class="picto" />
               <p class="text-outil-details">
                 Logiciel de Gestion et communication en ligne
               </p>
@@ -81,7 +81,7 @@
             </v-row>
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto4.svg" class="picto" />
+              <img src="/images/pictoHome/picto2.svg" class="picto" />
               <p class="text-outil-details">Communiquez en réseau</p>
             </v-row>
             <div class="horizontal-line" />

components/Home/Reviews.vue

@@ -2,7 +2,7 @@
   <LayoutContainer :overflow="false">
     <div :class="smAndDown ? '' : 'container-color'">
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon size="8" class="fa-solid fa-circle icon-title" />
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
         <h6 class="small-title">Avis Clients</h6>
       </div>
 
@@ -170,6 +170,10 @@ const items = ref([
 </script>
 
 <style scoped>
+
+.v-container{
+  padding: 0 !important;
+}
 .content-review {
   margin-top: -7rem;
 }
@@ -225,12 +229,12 @@ const items = ref([
 
 .status {
   margin-top: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 0.7rem;
   line-height: 15px;
-  margin-left: 2rem;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
   display: flex;
   align-items: center;
   letter-spacing: 0.18em;
@@ -240,11 +244,11 @@ const items = ref([
 }
 
 .structure {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 0.8rem;
-  margin-left: 2rem;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
   display: flex;
   align-items: center;
 
@@ -252,7 +256,7 @@ const items = ref([
   margin-bottom: 1rem;
 }
 .description-review {
-  font-family: "Barlow";
+  height: 10rem;
   font-size: 1rem;
   line-height: 1.5rem;
   color: #071b1f;
@@ -292,8 +296,6 @@ const items = ref([
 }
 
 .title-review {
-  font-family: "Barlow";
-  font-style: normal;
   font-size: 2rem;
   line-height: 42px;
   text-align: center;

components/Home/Solution.vue

@@ -11,7 +11,7 @@
       Trouvez la solution faites pour vous
     </h3>
 
-    <v-row>
+    <v-row class="row-custom">
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
@@ -63,7 +63,9 @@
                       {{ sol }}
                     </li>
                   </ul>
+   
                 </v-col>
+                
               </div>
             </v-row>
           </div>
@@ -105,6 +107,7 @@ const solutions = [
       "Site internet intégré",
       "Partage de données en réseau",
     ],
+    option: "* en option",
   },
   {
     name: "School",
@@ -147,6 +150,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
+
+.row-custom {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
 .solution-content {
   margin-top: 2rem;
   margin-left: 1rem;
@@ -201,12 +210,12 @@ onMounted(() => {
 }
 
 .logo {
-  width: 10rem;
-  height: 4rem;
-  margin-top: 15rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 200px;
 }
 
-
 .artist-image::before {
   content: "";
   position: absolute;
@@ -276,7 +285,6 @@ onMounted(() => {
   cursor: pointer;
 }
 
-
 .description-logiciel {
   font-family: "Barlow";
   font-style: normal;
@@ -287,7 +295,6 @@ onMounted(() => {
   width: 20rem;
 }
 
-
 .opentalent-container {
   text-align: left;
   margin-left: 1rem;
@@ -297,9 +304,7 @@ onMounted(() => {
   color: #ffffff;
 }
 
-.list-solutions {
-  margin-top: 0.9rem;
-}
+
 
 .details-solution {
   font-size: 0.9rem;
@@ -409,9 +414,7 @@ onMounted(() => {
   cursor: pointer;
 }
 
-
 .description-logiciel {
-  
   font-size: 1.3rem;
   line-height: 1.5rem;
   margin-top: 1rem;
@@ -441,5 +444,4 @@ onMounted(() => {
   height: 35rem;
   position: relative;
 }
-
 </style>

components/JoinUs/Missions.vue

@@ -10,19 +10,12 @@
         <div class="title-job">
           {{ job.title }}
         </div>
-        <v-btn
-          class="btn-more"
-          text
-        >
-          En savoir plus
-        </v-btn>
+        <v-btn class="btn-more" text> En savoir plus </v-btn>
       </v-row>
 
       <!-- Deuxième ligne -->
       <v-row class="announcement-location ml-6 mr-6">
-        <v-icon
-          class="icon-location"
-        >
+        <v-icon class="icon-location">
           <i class="fas fa-map-marker"></i>
         </v-icon>
         <div class="location">
@@ -32,26 +25,18 @@
     </div>
 
     <v-row class="apply-row ml-6 mb-6">
-      <h3 class="apply">
-        Candidature spontanée
-      </h3>
+      <v-col cols="12">
       <p class="apply-now">
-        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
+        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à
+        déposer votre candidature ci-dessous :
       </p>
-      <v-btn class="btn-more">
-        Envoyer ma candidature
-      </v-btn>
+    </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-btn class="btn-send"> Envoyer ma candidature </v-btn>
+      </v-col>
     </v-row>
-
-    <!-- <v-row class="apply-row ml-6 mb-6">
-      <h3 class="apply">
-        Candidature spontanée
-      </h3>
-      <p class="apply-now">
-        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
-      </p>
-      <FormApplicationForm />
-    </v-row> -->
   </LayoutContainer>
 </template>
 
@@ -92,7 +77,6 @@ const jobs = ref([
 </script>
 
 <style scoped>
-
 .announcement-title {
   background: #0e2d32;
   color: white;
@@ -101,20 +85,30 @@ const jobs = ref([
   padding: 10px;
 }
 
-.title-job{
+.title-job {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: 2.5rem;
+  font-size: 1.5rem;
   line-height: 39px;
   color: #ffffff;
 }
 
-.btn-more {
+.btn-more, .btn-send {
   background: #9edbdd;
   color: white;
 }
 
+.btn-send {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: 700;
+}
+
 .announcement-location {
   background: #9edbdd;
   display: flex;
@@ -129,22 +123,11 @@ const jobs = ref([
 .location {
   margin-left: 10px;
   font-size: 2rem;
-
 }
 
-.apply {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2.5rem;
-  line-height: 39px;
-  color: #0e2d32;
-  margin-top: 5rem;
-  margin-bottom: 1rem;
-}
 
 .apply-now {
-  font-family: "Barlow";
+  text-align: center;
   font-style: italic;
   font-weight: 300;
   font-size: 34px;
@@ -152,14 +135,6 @@ const jobs = ref([
   color: #091d20;
   margin-bottom: 2rem;
 }
-.description-job {
-  font-family: "Barlow";
-  font-style: italic;
-  font-weight: 300;
-  font-size: 1.3rem;
-  line-height: 40px;
-  color: #091d20;
-}
 
 .mission-container {
   margin-top: 5rem;

components/Layout/Carousel/Fonctionnalite.vue

@@ -2,7 +2,7 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <v-row>
+        <v-row class="custom-row">
           <v-col cols="6">
             <LayoutUISubTitle
               title-color="#fff"
@@ -29,23 +29,23 @@
           </v-col>
         </v-row>
 
-        <v-row>
+        <v-row >
           <v-col cols="12"> </v-col>
-        </v-row>
-        <v-row>
+        </v-row >
+        <v-row class="custom-row">
           <v-col cols="12">
             <Carousel
               ref="functionCarousel"
               :items-to-show="5"
               :items-to-scroll="1"
               class="carousel"
+              :wrap-around="true"
             >
               <Slide
                 v-for="(card, index) in cards"
                 :key="index"
                 :class="{
-                  card: true,
-                  'active-card': index === activeCardIndex,
+                  card: true
                 }"
               >
                 <div class="card-container">
@@ -59,14 +59,14 @@
                       <h5 class="card-title">{{ card.title }}</h5>
                     </v-card-title>
                     <v-card-item>
-                      <v-card-text class="review-description">
+                      <v-card-text  class="review-description">
                         <ul>
                           <li
                             class="list-detail"
                             v-for="item in card.list"
                             :key="item"
                           >
-                            {{ item }}
+                          <p v-html="item"></p>
                           </li>
                         </ul>
                       </v-card-text>
@@ -132,6 +132,14 @@ const previousAction = () => {
 </script>
 
 <style scoped>
+
+.custom-row{
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 .card-img {
   width: 5rem;
   height: 3rem;

components/Layout/Container.vue

@@ -25,7 +25,9 @@ const overflow = ref(props.overflow);
 .container {
   position: relative;
   max-width: 100%;
-  min-width: 300px; 
+  min-width: 100; 
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
 
 </style>

components/Layout/FAQ.vue

@@ -3,43 +3,53 @@
     <LayoutContainer>
       <div class="container-img">
         <div class="overlay" />
-        <v-row>
+        <v-row class="mt-12">
           <v-col cols="6">
             <div class="container-left">
               <LayoutUISubTitle
+                class="mt-12 ml-3"
                 title-color="#fff"
                 :iconSize="6"
                 :iconClasses="iconClasses"
                 :titleText="' Vous voulez tirer le meilleur de notre logiciel ?  '"
               />
-              <h3 class="title-faq">
+              <h3 class="title-faq mt-6">
                 Quelle que soit votre demande, notre équipe est à vos côtés pour
                 vous guider
               </h3>
-
-              <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+              <nuxt-link to="https://ressources.opentalent.fr/" target="_blank">
+                <v-btn class="btn-faq"> Consulter notre FAQ </v-btn></nuxt-link
+              >
             </div>
           </v-col>
 
           <v-col cols="6">
             <div class="btn-container">
-              <v-btn class="btn-faq-tuto">
-                <div class="container-button">
-                  <v-img src="/images/icons/tuto.svg" class="icon-button" />
-                  <p class="text-btn">
-                    De nombreux articles tutoriels accessibles 24h/24
-                  </p>
-                </div>
-              </v-btn>
-
-              <v-btn class="btn-faq-tuto">
-                <div class="container-button">
-                  <v-img src="/images/icons/faq.svg" class="icon-button" />
-                  <p class="text-btn">
-                    Support accessible du lundi au vendredi via l’outil en ligne 
-                  </p>
-                </div>
-              </v-btn>
+              <nuxt-link to="https://ressources.opentalent.fr/" target="_blank">
+                <v-btn class="btn-faq-tuto">
+                  <div class="container-button">
+                    <v-img src="/images/icons/tuto.svg" class="icon-button" />
+                    <p class="text-btn">
+                      De nombreux articles tutoriels accessibles 24h/24
+                    </p>
+                  </div>
+                </v-btn>
+              </nuxt-link>
+
+              <nuxt-link
+                to="https://ressources.opentalent.fr/?contact"
+                target="_blank"
+              >
+                <v-btn class="btn-faq-tuto">
+                  <div class="container-button">
+                    <v-img src="/images/icons/faq.svg" class="icon-button" />
+                    <p class="text-btn">
+                      Support accessible du lundi au vendredi via l’outil en
+                      ligne
+                    </p>
+                  </div>
+                </v-btn>
+              </nuxt-link>
             </div>
           </v-col>
         </v-row>
@@ -51,9 +61,11 @@
 <script setup></script>
 
 <style scoped>
-
-:deep().subtitle{
-  width: 20rem;
+.v-container {
+  padding: 0 !important;
+}
+:deep().subtitle {
+  width: 10rem !important;
 }
 .container-left {
   margin-left: 6rem;
@@ -110,21 +122,6 @@
   text-transform: none !important;
 }
 
-.subtitle-faq {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: #fff;
-  margin-top: 5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  margin-right: 25rem;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  z-index: 1;
-}
 .btn-faq {
   width: 14rem;
   height: 3.5rem;
@@ -148,43 +145,19 @@
   width: 28rem;
   margin-bottom: 3rem;
 
-  color: var(--NEUTRAL---BLANC, #FFF);
+  color: var(--NEUTRAL---BLANC, #fff);
 
-font-size: 30px;
-font-style: normal;
-font-weight: 400;
-}
-.container-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  margin-left: 3rem;
-}
-
-.icon-title {
-  font-size: 1rem;
-  color: #64afb7;
-  margin-right: 0.5rem;
-  margin-top: 3rem;
-}
-.subtitle-faq {
-  color: #fff;
-  font-family: "Barlow";
-  width: 25rem;
-  margin-right: 15rem;
-  font-size: 1rem;
+  font-size: 30px;
   font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
+  font-weight: 400;
 }
+
 .container-img {
   background-image: url("/images/logiciels/school/faq.jpg");
   background-size: cover;
   background-position: center 15%;
   background-repeat: no-repeat;
-  height: 27rem;
+  height: 37rem;
   display: flex;
   flex-direction: column;
   justify-content: center;

components/Layout/Footer.vue

@@ -8,7 +8,9 @@
               :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
               > -->
@@ -98,7 +100,7 @@
                 <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
               </v-row>
 
-              <v-row class="ml-5">
+              <v-row class="ml-5" no-gutters>
                 <v-col :cols="smAndDown ? 4 : 2">
                   <a
                     href="https://www.facebook.com/opentalent"
@@ -135,31 +137,22 @@
       </div>
       <v-row class="footer" justify="center">
         <p class="mt-6">
-          <a
-            class="mention"
-            href="/mentions-legales"
-            target="_blank"
+          <a class="mention" href="/mentions-legales" target="_blank"
             >Mentions légales</a
           >
           -
-          <a
-            class="mention"
-            href="/politiques-de-cookies"
-            target="_blank"
+          <a class="mention" href="/politiques-de-cookies" target="_blank"
             >Politiques de cookies</a
           >
           -
-          <a
-            class="mention"
-            href="/CGV"
-            target="_blank"
+          <a class="mention" href="/CGV" target="_blank"
             >Conditions Générales de Ventes</a
           >
         </p>
       </v-row>
 
       <v-row justify="center" class="mb-6">
-        <p>2024 &copy; Tous droits réservés par Opentalent</p>
+        <p class="mention">2024 &copy; Tous droits réservés par Opentalent</p>
       </v-row>
     </LayoutContainer>
   </footer>
@@ -179,6 +172,7 @@ const { smAndDown, lgAndUp } = useDisplay();
 .mention {
   text-decoration: none;
   color: #ffffff;
+  font-size: 0.8rem;
 }
 
 .brand {

components/Layout/Prefooter.vue

@@ -2,12 +2,12 @@
   <footer ref="footerElement">
     <LayoutContainer>
       <div v-if="lgAndUp" class="activities">
-        <v-row>
+        <v-row class="custom-row">
           <v-col cols="4" class="text-center">
             <a href="/opentalent_artist"> 
               <v-img
                 class="logo logo-jaune"
-                src="/images/logo/logiciels/Artist-Blanc.png"
+                src="/images/logo/logiciels/Artist-noir.png"
               />
             </a>
             <small class="text-logo"
@@ -19,7 +19,7 @@
             <a href="/opentalent_manager"> 
               <v-img
                 class="logo logo-rouge"
-                src="/images/logo/logiciels/Manager-Blanc.png"
+                src="/images/logo/logiciels/Manager-noir.png"
               />
             </a>
             <small class="text-logo"
@@ -31,10 +31,10 @@
             <a href="/opentalent_school"> 
               <v-img
                 class="logo logo-bleu ml-12"
-                src="/images/logo/logiciels/School-Blanc.png"
+                src="/images/logo/logiciels/School-noir.png"
               />
             </a>
-            <small class="text-logo ml-12"
+            <small class="text-logo "
               >Tous les établissements d'enseignement artistique</small
             >
           </v-col>
@@ -56,6 +56,13 @@ const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
+
+.custom-row{
+  width: 2000px;
+  margin-left: auto;
+  margin-right: auto;
+
+}
 .flex-container {
   display: flex;
   flex-direction: column;
@@ -64,27 +71,20 @@ const { smAndDown, lgAndUp } = useDisplay();
 
 .vertical-bar {
   height: 4rem;
-  border: 0.1rem solid #ecfbfc;
+  border: 0.1rem solid black;
   margin-top: 3rem;
 }
 
-.container {
-  background: #091d20;
-  color: aliceblue;
-}
 
 .activities {
-  height: 12rem;
-  background: #091d20;
+  height: 10rem;
   border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
 }
 
 
 .logo {
   margin-top: 2rem;
-  width: 40.5rem;
-  height: 77px;
+  height: 70px;
 }
 
 

components/Layout/Table/Comparatif.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div>
+    <v-row class="row-custom">
       <table class="table-comparatif">
         <thead>
           <tr>
@@ -64,7 +64,7 @@
           </tr>
         </tbody>
       </table>
-    </div>
+    </v-row>
   </LayoutContainer>
 </template>
 
@@ -95,6 +95,7 @@ const props = defineProps({
 });
 </script>
 <style scoped>
+
 .table-data-second {
   padding-right: 5rem;
 }

components/Layout/UI/AvantageCard.vue

@@ -1,6 +1,5 @@
 <template>
   <LayoutContainer>
-    <v-container>
       <div class="advantage-card">
         <div class="title-card">
           <h4 class="description-card">{{ title }}</h4>
@@ -25,7 +24,6 @@
           </v-chip> -->
         </div>
       </div>
-    </v-container>
   </LayoutContainer>
 </template>
 
@@ -53,6 +51,12 @@ const backgroundImageStyle = computed(() => ({
 
 <style scoped>
 
+.v-row{
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .description-container {
   display: flex;
   flex-direction: column;

components/Layout/UI/BannerTitle.vue

@@ -40,11 +40,12 @@ const props = defineProps({
 .text-left {
   position: absolute;
   font-weight: 600;
-  font-size: 3rem;
+  font-size: 2.3rem;
   line-height: 85px;
   opacity: 0.08;
   margin-top: 2rem;
   left:-2rem;
+  margin-bottom: 2rem;
 }
 .text-right {
   position: absolute;
@@ -52,16 +53,18 @@ const props = defineProps({
   margin-top: 2rem;
   font-style: normal;
   font-weight: 600;
-  font-size: 3rem;
+  font-size: 2.3rem;
   line-height: 85px;
   text-align: center;
   opacity: 0.08;
+  margin-bottom: 2rem;
+
 }
 
 .logiciel {
   display: flex;
   justify-content: space-around;
-  font-size: 2.5rem;
+  font-size: 2.3rem;
   line-height: 77px;
   color: #000000;
   text-align: center;

components/Layout/UI/ContainerVideo.vue

@@ -1,26 +1,31 @@
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row class="container-green mt-12">
-        <v-row>
-          <v-col cols="6">
-            <LayoutUISubTitle
-              class="mt-6"
-              :iconSize="5"
-              :iconColor="iconColor"
-              :titleText="titleText"
-              :titleColor="'#ffffff'"
-            />
-            <p class="citation-school">
-              {{ currentCitation }}
-            </p>
-          </v-col>
-        </v-row>
+      <div class="container-green">
+        <v-row class="mt-12">
+          <v-row>
+            <v-col cols="6">
+              <LayoutUISubTitle
+                class="mt-6"
+                :iconSize="5"
+                :iconColor="iconColor"
+                :titleText="titleText"
+                :titleColor="'#ffffff'"
+              />
+              <p class="citation-school">
+                {{ currentCitation }}
+              </p>
+            </v-col>
 
-        <v-col cols="6">
-          <div class="screen-img-3"></div>
-        </v-col>
-      </v-row>
+            <v-col cols="6">
+              <div class="screen-img-3"></div>
+              <div class="play-icon-container">
+              <i class="fas fa-play"></i>
+            </div>
+            </v-col>
+          </v-row>
+        </v-row>
+      </div>
     </LayoutContainer>
   </div>
 </template>
@@ -41,14 +46,13 @@ const titleText = computed(() => {
   }
 });
 
-
 const currentCitation = computed(() => {
   if (/^\/opentalent_school(\/|$)/.test(route.path)) {
     return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
   } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
     return "Le logiciel de gestion et communication au service de votre passion";
   } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "“ Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.“.";
+    return "Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.";
   } else {
     return "Citation par défaut";
   }
@@ -62,26 +66,44 @@ const iconColor = computed(() => {
   } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
     return "rgb(216, 5, 11)";
   } else {
-    return "rgba(32, 147, 190, 0.6)"; 
+    return "rgba(32, 147, 190, 0.6)";
   }
 });
-
 </script>
 
 <style scoped>
+
+.play-icon-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 3rem; 
+  color: white; 
+  cursor: pointer;
+}
+.v-row {
+  width: 90% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.v-container {
+  padding: 0 !important;
+}
 .screen-img-3 {
   background-image: url("/images/logiciels/school/screen2.png");
   background-size: cover;
   background-position: center;
-  width: 100%;
-  height: 100%;
+  width: 650px;
+  height: 650px;
 }
 
 .citation-school {
   font-style: italic;
   font-weight: 300;
   font-size: 2rem;
-  width: 38rem;
+  width: 35rem;
   line-height: 40px;
   color: #ffffff;
   font-style: italic;

components/Layout/UI/Presentation.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class="mt-12 custom-row" >
         <v-col cols="4">
           <LayoutUISubTitle
             :iconSize="5"
@@ -75,9 +75,9 @@ const route = useRoute();
 
 const pricingAmount = computed(() => {
   if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "20€";
-  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
     return "14€";
+  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
+    return "20€";
   }else {
     return "Sur devis";
   }
@@ -139,6 +139,7 @@ const props = defineProps({
   },
   pricingFromText: {
     type: String,
+    default: "à partir de",
   },
   pricingAmount: {
     type: String,
@@ -164,6 +165,12 @@ const props = defineProps({
 </script>
 
 <style scoped>
+
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
 .picto-img {
   width: 200px;
   height: 200px;

components/Layout/UI/SolutionsFooter.vue

@@ -10,7 +10,7 @@
       </v-row>
 
       <v-row v-if="!hideArtistRow" class="row-artist">
-        <v-col cols="4">
+        <v-col cols="2">
           <NuxtLink to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
           </NuxtLink>
@@ -20,7 +20,7 @@
           <h5 class="solution-name">Opentalent Artist</h5>
         </v-col> -->
 
-        <v-col cols="8">
+        <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" label>
@@ -43,7 +43,7 @@
       </v-row>
 
       <v-row v-if="!hideManagerRow" class="row-manager">
-        <v-col cols="4">
+        <v-col cols="2">
           <NuxtLink to="/opentalent_manager">
           <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
         </NuxtLink>
@@ -53,7 +53,7 @@
           <h5 class="solution-name">Opentalent Manager</h5>
         </v-col> -->
 
-        <v-col cols="8">
+        <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" color="primary" label>
@@ -73,7 +73,7 @@
       </v-row>
 
       <v-row v-if="!hideSchoolRow" class="row-school">
-        <v-col cols="4">
+        <v-col cols="2">
           <NuxtLink to="/opentalent_school">
           <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
         </NuxtLink>
@@ -83,7 +83,7 @@
           <h5 class="solution-name">Opentalent Artist</h5>
         </v-col> -->
 
-        <v-col cols="8">
+        <v-col cols="10">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" label>
@@ -137,7 +137,7 @@ const hideSchoolRow = route.path.includes("opentalent_school") || route.path.inc
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 10px;
   line-height: 16px;
 
   display: flex;
@@ -183,9 +183,9 @@ const hideSchoolRow = route.path.includes("opentalent_school") || route.path.inc
 }
 
 .logo {
-  width: 20rem;
+  width: 15rem;
   height: 10rem;
-  margin-left: 2rem;
+  margin-left: .5rem;
   margin-right: 2rem;
 }
 </style>

components/Layout/UI/StickyMenu.vue

@@ -73,6 +73,7 @@ const isMobileDevice = () => {
 }
 
 .container-square {
+  text-align: center !important;
   display: flex;
   flex-direction: column;
   color: white;
@@ -97,7 +98,7 @@ const isMobileDevice = () => {
 }
 
 .yellow-square {
-  background: #f9d648;
+  background: rgb(250, 194, 10);
   color: #0e2d32;
 }
 

components/Logiciels/Artist/Abonnement.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Abonnement">
     <LayoutContainer>
-      <v-row class="mt-12">
+        <v-row class="mt-12">
         <v-col cols="4">
           <LayoutUISubTitle
           :iconSize="6"
@@ -10,13 +10,13 @@
           :iconColor="'#fac20a'"
         />
           <div class="profile-circle">
-            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png"></v-img>
+            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" style="top:.5rem"></v-img>
 
           </div>
 
           <div class="subscription-info">
             <p class="mt-3 mb-6">Pour vous abonner au logiciel, téléchargez et remplissez le formulaire avant de nous le transmettre</p>
-            <a href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf" class="download-button">Télécharger le formulaire d'abonnement</a>
+            <a href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf" target="_blank" class="download-button">Télécharger le formulaire d'abonnement</a>
           </div>
           <div class="subscription-steps">
             <ol>
@@ -35,11 +35,8 @@
           <h5 class="title">
             Opentalent Artist, la solution que vous attendiez...
           </h5>
-          <p class="solution">
-            Que vous soyez une petite ou une structure plus conséquente, notre
-            offre s'adapte à toutes les tailles : le prix de l’abonnement au
-            logiciel varie en fonction du nombre d'élèves, tout en conservant
-            l'intégralité des fonctionnalités.
+          <p class="solution" style="text-align: justify;">
+            Conçu pour les structures artistiques telles que chorales, orchestres (fanfares, orchestres d'harmonie, symphoniques, musiques actuelles, petites formations musicales...), compagnies de danse, troupes de théâtre, cirque, arts de la rue… Le logiciel s'adapte à vos besoins d'évolution ! 
           </p>
           <h3 class="cmf">
             Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
@@ -55,7 +52,7 @@
             </div>
             <div class="cmf-container">
 
-              <p class="cmf-text">
+              <p class="cmf-text" >
                 Attention si vous êtes adhérent à la Confédération Musicale de
                 France (CMF), vous bénéficiez gratuitement, dans le cadre de
                 votre adhésion, de la version Opentalent Artist Standard, et de
@@ -74,6 +71,12 @@
 <script setup></script>
 
 <style scoped>
+
+.v-container{
+  max-width: 90%;  
+  margin-left: auto;
+  margin-right: auto;
+}
 .subscription-steps ol {
   list-style-type: decimal;
   padding-left: 2rem;

components/Logiciels/Artist/Banner.vue

@@ -26,5 +26,4 @@
 <script setup></script>
 
 <style scoped>
-
 </style>

components/Logiciels/Artist/Comparatif.vue

@@ -35,12 +35,6 @@ const tableData = [
     column2: "check",
     column3: "check",
   },
-  {
-    id: 3,
-    column1: "SUIVI PÉDAGOGIQUE",
-    column2: "check",
-    column3: "check",
-  },
   {
     id: 4,
     column1: "GESTION DU PARC MATÉRIEL",
@@ -95,18 +89,6 @@ const tableData = [
     column2: "75 comptes",
     column3: "150 comptes",
   },
-  {
-    id: 12,
-    column1: "PRÉINSCRIPTION EN LIGNE",
-    column2: "cross",
-    column3: "Option",
-  },
-  {
-    id: 13,
-    column1: "GRILLES D'ÉVALUATION",
-    column2: "check",
-    column3: "Option",
-  },
   {
     id: 14,
     column1: "GESTION DES RÈGLEMENTS",
@@ -127,3 +109,11 @@ const tableData = [
   },
 ];
 </script>
+
+<style scoped>
+
+.v-container{
+  width: 95%;
+  margin-right: auto;
+  margin-left: auto;
+}</style>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,17 +2,16 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-
-        <v-row>
-          <v-col cols="12">
-            <LayoutCarouselFonctionnalite
-              :cards="cards"
-              :functionCarousel="functionCarousel"
-              :itemsToShow="itemsToShow"
-            />
-          </v-col>
-        </v-row>
- 
+          <v-row>
+            <v-col cols="12">
+              <LayoutCarouselFonctionnalite
+                :cards="cards"
+                :functionCarousel="functionCarousel"
+                :itemsToShow="itemsToShow"
+                pricingFromText="à partir de" 
+              />
+            </v-col>
+          </v-row>
       </div>
     </LayoutContainer>
   </div>
@@ -26,12 +25,17 @@ const functionCarousel = ref(null);
 
 const cards = [
   {
-    logo:"images/logiciels/artist/fonctionnalites/Espaces_dedies.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Membres", "Adhérents", "Sur tous supports (ordinateur, tablette et smartphone)"],
+    list: [
+      "Administration",
+      "Membres",
+      "Adhérents",
+      "Sur tous supports <br> (ordinateur, tablette et smartphone)",
+    ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Repertoire.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Repertoire.svg",
     title: "RÉPERTOIRE",
     list: [
       "Membres",
@@ -40,7 +44,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Agenda.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Agenda.svg",
     title: "AGENDA",
     list: [
       "Création et gestion des événements internes et externes",
@@ -49,7 +53,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Parc_materiel.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Parc_materiel.svg",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -58,7 +62,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Communication.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Communication.svg",
     title: "COMMUNICATION *",
     list: [
       "Édition et envoi de courriers, de mails ou de SMS**",
@@ -68,7 +72,7 @@ const cards = [
     options: ["* version Artist Premium ", "** en option"],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Site_internet.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Site_internet.svg",
     title: "SITE INTERNET ",
     list: [
       "Gestion intégrée au logiciel",
@@ -77,8 +81,8 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Statistique.svg",
-    title: "STATISTIQUE",
+    logo: "/images/logiciels/artist/fonctionnalites/Statistique.svg",
+    title: "STATISTIQUES",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
       "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
@@ -86,16 +90,17 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/CMF-réseau-J.png",
+    logo: "/images/logiciels/artist/fonctionnalites/CMF-réseau-J.png",
     title: "RÉSEAU CMF ",
     list: [
+      "Uniquement dédié aux adhérents CMF",
       "Accès au répertoire du réseau",
       "Renouvellement de votre adhésion fédérale",
       "Gestion de l'assurance CMF",
     ],
   },
   {
-    logo: "images/logiciels/artist/fonctionnalites/Promotion.svg",
+    logo: "/images/logiciels/artist/fonctionnalites/Promotion.svg",
     title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
     list: [
       "Sur votre site internet intégré",
@@ -105,127 +110,8 @@ const cards = [
   },
 ];
 </script>
-
 <style scoped>
-
-.card-img{
-  width: 5rem;
-  height: 3rem;
-  margin-top: 1rem;
-}
-.list-detail {
-  font-weight: 300;
-  font-size: .9rem;
-  line-height: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000000;
-  word-break: none ;
-  
-}
-.card-title {
-  white-space: pre-wrap;
-
-}
-.carousel {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.card.active-card {
-}
-
-.title-container {
-  display: flex;
-  align-items: center;
-}
-.subtitle-avantage {
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: white;
-}
-.subtitle {
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.icon-title {
-  color: #fac20a;
-  margin-right: 0.5rem;
-}
-.card {
-  font-weight: 300;
-  transition: transform 0.3s;
-}
-
-.card.active-card {
-  transform: scale(1.05);
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 4rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-}
-.card-footer {
-  position: absolute;
-  right: 0;
-  margin-right: 2rem;
-}
-
-.card {
-  width: 80rem;
-  min-height: 35rem;
-  max-height: 35rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 25rem;
-  max-height: 25rem;
-  min-width: 90%;
-  max-width: 90%;
-  
-}
-
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
-}
-
 .container-green {
   background-color: #0e2d32;
 }
-</style>
+</style>

components/Logiciels/Artist/Formations.vue

@@ -1,9 +1,10 @@
 <template>
   <div id="Formations">
     <LayoutContainer>
-      <div class="container-green mt-12">
+      <div class="container-green 2">
         <v-row>
           <LayoutUISubTitle
+            class="mt-12"
             title-color="#fff"
             :iconSize="6"
             :iconClasses="iconClasses"
@@ -12,73 +13,70 @@
           />
         </v-row>
 
-        <v-container>
-          <v-row class="mt-12" no-gutters>
-            <v-col cols="12" lg="6" md="6" sm="6">
-              <div class="reunion-img"></div>
-            </v-col>
+        <v-row class="mt-12" no-gutters>
+          <v-col cols="12" lg="6" md="6" sm="6">
+            <div class="reunion-img mb-12"></div>
+          </v-col>
 
-            <v-col cols="12" lg="6" md="6" sm="6">
-              <h3 class="formation-title">
-                Webinaire de découverte - Nouveaux utilisateurs
-              </h3>
-              <p class="formation-details mb-6">
-                Rejoignez notre webinaire, spécialement conçu pour les
-                professionnels du secteur culturel, orchestres, chorales,
-                compagnies de danse, ainsi que les troupes de théâtre et de
-                cirque. Cette session interactive vous offre une occasion unique
-                de vous immerger dans les fonctionnalités de notre logiciel, de
-                comprendre ses avantages distinctifs et d'explorer les diverses
-                versions disponibles. Ne manquez pas cette chance de simplifiez
-                votre gestion et de faire évoluer votre pratique artistique avec
-                nos solutions technologiques innovantes !
-              </p>
-              <nuxt-link to="/webinaires">
-                <v-btn class="formation-btn mt-12">
-                  S'inscrire à nos webinaires</v-btn
-                >
-              </nuxt-link>
-            </v-col>
-          </v-row>
-        </v-container>
+          <v-col cols="12" lg="6" md="6" sm="6">
+            <h3 class="formation-title">
+              Webinaire de découverte - Nouveaux utilisateurs
+            </h3>
+            <p class="formation-details mb-6" style="text-align: justify">
+              Rejoignez notre webinaire, spécialement conçu pour les
+              professionnels du secteur culturel, orchestres, chorales,
+              compagnies de danse, ainsi que les troupes de théâtre et de
+              cirque. Cette session interactive vous offre une occasion unique
+              de vous immerger dans les fonctionnalités de notre logiciel, de
+              comprendre ses avantages distinctifs et d'explorer les diverses
+              versions disponibles. Ne manquez pas cette chance de simplifiez
+              votre gestion et de faire évoluer votre pratique artistique avec
+              nos solutions technologiques innovantes !
+            </p>
+            <nuxt-link to="/webinaires">
+              <v-btn class="formation-btn mt-12">
+                S'inscrire à nos webinaires</v-btn
+              >
+            </nuxt-link>
+          </v-col>
+        </v-row>
       </div>
       <v-row>
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
           :titleText="' Quelques chiffres'"
+          class="mb-12"
         />
       </v-row>
       <v-container>
-
-     
-      <v-row class="card-container mb-12">
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center small-padding"
-        >
-          <LayoutCardStat
-            :chiffre="'18 4634'"
-            text="utilisateurs"
-            backgroundColor="#fac20a"
-          />
-        </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="'3 424'"
-            text="structures"
-            backgroundColor="#fac20a"
-          />
-        </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="13"
-            text="années d'expérience"
-            backgroundColor="#fac20a"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-row class="card-container mb-12">
+          <v-col
+            cols="3"
+            class="d-flex justify-center align-center small-padding"
+          >
+            <LayoutCardStat
+              :chiffre="'184 634'"
+              text="utilisateurs"
+              backgroundColor="#fac20a"
+            />
+          </v-col>
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <LayoutCardStat
+              :chiffre="'3 424'"
+              text="structures"
+              backgroundColor="#fac20a"
+            />
+          </v-col>
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <LayoutCardStat
+              :chiffre="13"
+              text="années d'expérience"
+              backgroundColor="#fac20a"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
       <v-row />
 
       <v-row />
@@ -103,9 +101,13 @@ const items = ref([
 </script>
 
 <style scoped>
+.v-container {
+  padding: 0 !important;
+}
 .v-row {
   max-width: 1600px;
   margin-right: auto;
+  margin-left: auto;
 }
 .carousel-button i {
   color: black;
@@ -156,7 +158,6 @@ const items = ref([
   color: #eff9fb;
   border: 1px solid #eff9fb;
   border-radius: 0.5rem;
-  margin-left: 7rem;
 }
 .formation-details {
   font-family: "Barlow";
@@ -165,7 +166,6 @@ const items = ref([
   font-size: 1rem;
   line-height: 1.5rem;
   color: #eff9fb;
-  margin-left: 7rem;
 }
 .formation-title {
   font-family: "Barlow";
@@ -174,7 +174,6 @@ const items = ref([
   font-size: 1.8rem;
   line-height: 26px;
   color: #ffffff;
-  margin-left: 7rem;
   margin-bottom: 3rem;
 }
 .reunion-img {

components/Logiciels/Artist/MenuScroll.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 
 const refs = reactive({
   Presentation: null,
@@ -35,7 +35,7 @@ const refs = reactive({
   Fonctionnalites: null,
   Comparatif: null,
   Abonnement: null,
-  Formations: null,
+  Webinaires: null,
   Temoignages: null
 });
 
@@ -81,7 +81,7 @@ const menus = [
   { label: "Fonctionnalites"},
   { label: "Comparatif" },
   { label: "Abonnement" },
-  { label: "Formations" },
+  { label: "Webinaires" },
   { label: "Temoignages" },
 ];
 

components/Logiciels/Artist/Reviews.vue

@@ -104,6 +104,10 @@ const cards = [
 </script>
 
 <style scoped>
+
+.v-container{
+  padding: 0 !important;
+}
 .carousel-button {
   display: flex;
   justify-content: center;

components/Logiciels/Manager/Avantages.vue

@@ -82,7 +82,7 @@ const cards = ref([
     title: "En réseau",
     number: "05",
     description:
-      "Mise à jour automatique des coordonnées publiques entre les membres du réseau..",
+      "Mise à jour automatique des coordonnées publiques entre les membres du réseau.",
     numberColor: "#f9d648",
     image: "/images/avantages/manager/En-reseau.jpg",
 
@@ -91,7 +91,7 @@ const cards = ref([
     title: "Confidentiel",
     number: "06",
     description:
-      "Chaque structure garde son indépendance et reste entièrement maître des informations et des données qu'elle saisit..",
+      "Chaque structure garde son indépendance et reste entièrement maître des informations et des données qu'elle saisit.",
     numberColor: "#f9d648",
     image: "/images/avantages/manager/Confidentiel.jpg",
 

components/Logiciels/Manager/Fonctionnalites.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="Fonctionnalites">
     <LayoutContainer>
+      
         <v-row>
           <v-col cols="12">
             <LayoutCarouselFonctionnalite
@@ -26,7 +27,7 @@ const cards = [
   {
     logo:"images/logiciels/manager/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration / Membres  / Adhérents"],
+    list: ["Administration","Membres / Adhérents", "Sur tous supports <br> (ordinateur, tablette et smartphone) "],
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/Repertoire.svg",
@@ -58,7 +59,7 @@ const cards = [
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/communication.svg",
-    title: "COMMUNICATION RESEAU",
+    title: "COMMUNICATION RÉSEAU",
     list: [
       "Édition et envoi de courriers, de mails ou de SMS*",
       "Édition et envoi de newsletter au adhérent du réseau",
@@ -78,7 +79,7 @@ const cards = [
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/Statistiques.svg",
-    title: "STATISTIQUE",
+    title: "STATISTIQUES",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
       "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
@@ -89,7 +90,7 @@ const cards = [
     logo: "images/logiciels/manager/fonctionnalites/Cotisation.svg",
     title: "COTISATION CMF ",
     list: [
-      "Paramètrage des cotisations",
+      "Paramétrage des cotisations",
       "Lancement de la campagne",
       "Gestion des règlement & envoi de justificatif (adhésion/assurance...)",
     ],
@@ -97,10 +98,17 @@ const cards = [
   {
     logo: "images/logiciels/manager/fonctionnalites/Fonctionnement_pyramidal.svg",
     title: "FONCTIONNEMENT PYRAMIDAL ",
+    list: [
+      "Mise en relation des logiciels (Artist, School et Manager)",
+      "Mise en place d'un système d'adhésion",
+      "Communication en réseau",
+    ],
+    logo: "images/logiciels/manager/fonctionnalites/Promotion.svg",
+    title: "PROMOTION DU RÉSEAU SUR L'AGENDA CULTUREL",
     list: [
       "Publication des événements des structures de votre réseau ",
       "Référencement des structures de votre réseau sur l'annuaire",
-      "Diffusion des annonces du réseau et des structures de votre réseau",
+      "Diffusion des annonces du réseau et des structures de votre réseau"
     ],
   },
 ];

components/Logiciels/Manager/Formation.vue

@@ -8,6 +8,7 @@
             :iconClasses="iconClasses"
             :titleText="'Nos accompagnements pour aller plus loin '"
             title-color="#fff"
+            class="mb-6 mt-6"
           />
         </v-row>
         <v-row class="mb-6">
@@ -28,7 +29,7 @@
               <br />
             </div>
             <nuxt-link :to="formation.link">
-              <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
+              <v-btn class="formation-btn mt-6">{{ formation.buttonText }}</v-btn>
             </nuxt-link>
           </v-col>
         </v-row>
@@ -38,50 +39,51 @@
           :iconSize="6"
           :iconClasses="iconClasses"
           :titleText="' Quelques chiffres'"
-          class="mt-6"
+          class="mt-6 mb-12"
         />
       </v-row>
 
       <v-container>
-        <v-row no-gutters class="mb-6">
-        <v-col
-          cols="4"
-          class="d-flex justify-center align-center small-padding"
-        >
-          <LayoutCardStat
-            :chiffre="140"
-            text="Structures en réseau"
-            backgroundColor="#d8050b"
-          />
-        </v-col>
-        <v-col cols="4" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="'300 000'"
-            text="Utilisateurs"
-            backgroundColor="#d8050b"
-          />
-        </v-col>
-        <v-col cols="4" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="12"
-            text="années de collaboration"
-            backgroundColor="#d8050b"
-          />
-        </v-col>
-      </v-row>
+        <v-row class="card-container mb-12">
+          <v-col
+            cols="3"
+            class="d-flex justify-center align-center small-padding"
+          >
+            <LayoutCardStat
+              :chiffre="140"
+              text="Structures en réseau"
+              backgroundColor="#d8050b"
+            />
+          </v-col>
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <LayoutCardStat
+              :chiffre="'300 000'"
+              text="Utilisateurs"
+              backgroundColor="#d8050b"
+            />
+          </v-col>
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <LayoutCardStat
+              :chiffre="12"
+              text="années de collaboration"
+              backgroundColor="#d8050b"
+            />
+          </v-col>
+        </v-row>
       </v-container>
 
-
       <v-row>
         <v-col cols="12">
-          <h2 class="text-center" style="font-size: 2rem;">La plus grande Confédération Musicale de France nous fait confiance</h2>
+          <h2 class="text-center" style="font-size: 2rem">
+            La plus grande Confédération Musicale de France nous fait confiance
+          </h2>
         </v-col>
       </v-row>
 
       <!-- <h4 class="text-center title-cmf">
         La plus grande Confédération Musicale de France nous fait confiance
       </h4> -->
-      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img" />
+      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img mb-6" />
     </LayoutContainer>
   </div>
 </template>
@@ -123,14 +125,26 @@ const items = ref([
 
 <style scoped>
 
-.v-row{
-  max-width: 1800px;
+:deep(.card) {
+  color: white;
+
+}
+
+:deep(.chiffre) {
+  color: white;
+
+}
+.v-container {
+  padding: 0 !important;
+}
+.v-row {
+  max-width: 1600px;
   margin-right: auto;
   margin-left: auto;
 }
-.cmf-img{
-  width: 50rem;
-  height: 20rem;
+.cmf-img {
+  width: 30rem;
+  height: 18rem;
   margin-top: 2rem;
   margin-right: auto;
   margin-left: auto;
@@ -197,8 +211,10 @@ const items = ref([
 }
 
 .card-container {
-  margin-bottom: 20px;
-  margin-left: 10rem;
-  margin-right: 0rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>

components/Logiciels/Manager/Presentation.vue

@@ -32,11 +32,11 @@ const pictoData = [
   },
   {
     src: "/images/logiciels/manager/picto5.png",
-    text: "Communiquez en réseau",
+    text: "Sur-mesure",
   },
   {
     src: "/images/logiciels/manager/picto6.png",
-    text: "Communiquez en réseau",
+    text: "Pout tout type de réseau pyramidal",
   },
 ];
 
@@ -44,7 +44,7 @@ const presentationData = {
   toolTitle: "La solution de mise en réseau des organisations culturelles ",
   toolList: [
     "Logiciel de gestion et communication en ligne ",
-    "Logiciel de gestion et communication en ligne ",
+    "Répond aux besoins globaux des réseaux culturels ",
     "Gestion collaborative ",
     "Mise en valeur des activités des membres du réseau ",
   ],

components/Logiciels/Manager/Pyramide.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="détails">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-container>
+        <v-row class="mt-12">
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
@@ -11,19 +12,22 @@
       </v-row>
 
       <v-row>
-        <v-col cols="3">
+        <v-col cols="12" lg="6" md="6">
           <LayoutUITitle
           title="Opentalent Manager, un logiciel adapté à chacun "
         />
+        <p class="pyramide-details ml-3 mt-6">Notre système s'adapte à toutes les structures de réseau pyramidal, quel que soit le nombre de niveau.</p>
         </v-col>
 
-        <v-col cols="8">
+        <v-col cols="12" lg="6" md="6">
           <v-img
             src="/images/logiciels/manager/reseau.png"
             class="schema-manager"
           />
         </v-col>
       </v-row>
+      </v-container>
+
 
     </LayoutContainer>
   </div>
@@ -32,9 +36,22 @@
 <script setup></script>
 
 <style scoped>
+
+.pyramide-details {
+  color: #071B1F;
+font-size: 2.125rem;
+font-style: normal;
+font-weight: 400;
+line-height: 2.375rem; 
+width: 40rem;
+}
+
+.v-row {
+  margin-top: 0px !important;
+  margin-left: auto;
+  margin-right: auto;
+}
 .schema-manager {
-  width: 89%;
-  height: 90%;
 }
 
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -105,6 +105,11 @@ const cards = [
 
 
 <style scoped>
+
+
+.v-container{
+  padding: 0 !important;
+}
 .carousel-button {
   display: flex;
   justify-content: center;

components/Logiciels/School/Banner.vue

@@ -13,7 +13,7 @@
         <LayoutUIBanner
           :imageSrc="'/images/solutions/school.jpg'"
           imageAlt="'line'"
-          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoireset MJC'"
+          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoires et MJC'"
           :logoSrc="'/images/logo/logiciels/School-Blanc.png'"
         />
       </v-col>
@@ -25,6 +25,11 @@
 
 <style scoped>
 
+.v-container{
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .container-title {
   display: flex;
   justify-content: space-around;

components/Logiciels/School/Comparatif.vue

@@ -127,3 +127,10 @@ const tableData = [
   },
 ];
 </script>
+<style scoped>
+
+.v-container{
+  width: 95%;
+  margin-right: auto;
+  margin-left: auto;
+}</style>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="Fonctionnalites">
-    <LayoutContainer >
+    <LayoutContainer>
       <div class="container-green" v-if="!mdAndDown">
-  
-        <v-row class="my-6">
+        <v-row>
           <v-col cols="12">
             <LayoutCarouselFonctionnalite
               :cards="cards"
               :functionCarousel="functionCarousel"
               :itemsToShow="itemsToShow"
+              pricingFromText="à partir de"
             />
           </v-col>
         </v-row>
@@ -22,27 +22,30 @@ import { ref } from "vue";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify/lib/framework.mjs";
 
-
-
 const { width, mdAndDown } = useDisplay();
 const functionCarousel = ref(null);
 const itemsToShow = computed(() => {
-  if (width.value >= 1280 && width.value <= 1920) { 
-    return 3; 
+  if (width.value >= 1280 && width.value <= 1920) {
+    return 3;
   } else if (width.value > 1920) {
-    return 6; 
+    return 6;
   }
-  return props.itemsToShow; 
+  return props.itemsToShow;
 });
 
 const cards = [
   {
-    logo: "images/logiciels/school/fonctionnalites/Espaces.svg",
+    logo: "/images/logiciels/school/fonctionnalites/Espaces.svg",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration" , "Professeurs", "Élèves / Familles", "Sur tous supports (ordinateur, tablette et smartphone)"],
+    list: [
+      "Administration",
+      "Professeurs",
+      "Élèves / Familles",
+      "Sur tous supports <br> (ordinateur, tablette et smartphone)",
+    ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
+    logo: "/images/logiciels/school/fonctionnalites/Répertoire.png",
 
     title: "RÉPERTOIRE",
     list: [
@@ -52,7 +55,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Pré-inscription.png",
+    logo: "/images/logiciels/school/fonctionnalites/Pré-inscription.png",
     title: "PRÉINSCRIPTION EN LIGNE",
     list: [
       "Parametrage personnalisé des formulaires & mails automatiques",
@@ -61,7 +64,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
+    logo: "/images/logiciels/school/fonctionnalites/Agenda.png",
     title: "AGENDA",
     list: [
       "Création et gestion des cours, examens, événements et prestations pédagogiques",
@@ -70,7 +73,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Parc-matériel.png",
+    logo: "/images/logiciels/school/fonctionnalites/Parc-matériel.png",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -79,7 +82,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Suivi-pédagogique.png",
+    logo: "/images/logiciels/school/fonctionnalites/Suivi-pédagogique.png",
 
     title: "SUIVI PÉDAGOGIQUE",
     list: [
@@ -89,7 +92,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Facture.png",
+    logo: "/images/logiciels/school/fonctionnalites/Facture.png",
 
     title: "FACTURATION",
     list: [
@@ -99,7 +102,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Communication.png",
+    logo: "/images/logiciels/school/fonctionnalites/Communication.png",
 
     title: "COMMUNICATION",
     list: [
@@ -110,7 +113,7 @@ const cards = [
     option: "* en option",
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/internet.png",
+    logo: "/images/logiciels/school/fonctionnalites/internet.png",
 
     title: "SITE INTERNET ",
     list: [
@@ -120,7 +123,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Statistiques.png",
+    logo: "/images/logiciels/school/fonctionnalites/Statistiques.png",
 
     title: "STATISTIQUE",
     list: [
@@ -130,7 +133,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
+    logo: "/images/logiciels/school/fonctionnalites/Agenda.png",
 
     title: "RÉSEAU CMF ",
     list: [
@@ -140,7 +143,7 @@ const cards = [
     ],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Promotion.png",
+    logo: "/images/logiciels/school/fonctionnalites/Promotion.png",
 
     title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
     list: [
@@ -153,92 +156,6 @@ const cards = [
 </script>
 
 <style scoped>
-.v-card-title-container {
-  display: flex;
-  flex-direction: row;
-}
-.logo-fonctionnalite {
-  width: 5rem;
-  height: 5rem;
-}
-
-.list-detail {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000000;
-  width: 100%;
-}
-.card-title {
-  white-space: pre-wrap;
-  font-size: 1.1rem;
-}
-.carousel {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.card.active-card {
-}
-
-.card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  transition: transform 0.3s;
-  min-width: 30%;
-  max-width: 30%;
-}
-
-.card.active-card {
-  transform: scale(1.05);
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 4rem;
-  height: 4rem;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 1rem;
-}
-
-.review-description {
-  text-align: left;
-}
-.card-footer {
-  position: absolute;
-  right: 0;
-  margin-right: 2rem;
-}
-
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  height: 12rem;
-}
-.card {
-  min-height: 35rem;
-  max-height: 35rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 25rem;
-  max-width: 20rem;
-  min-width: 20rem;
-}
-
 .container-green {
   background-color: #0e2d32;
 }

components/Logiciels/School/Presentation.vue

@@ -49,6 +49,8 @@ const presentationData = {
 </script>
 
 <style scoped>
-
+.v-container {
+  padding: 16px !important;
+}
 
 </style>

components/Logiciels/School/Reviews.vue

@@ -2,7 +2,7 @@
   <div id="Temoignages">
     <LayoutContainer>
       <div class="container-green">
-        <v-row>
+        <v-row class="custom-row">
           <v-col cols="3">
             <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
               <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
@@ -103,6 +103,15 @@ const cards = [
 </script>
 
 <style scoped>
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+
+}
+.v-container{
+  padding: 0 !important;
+}
 .carousel-button {
   display: flex;
   justify-content: center;

pages/index.vue

@@ -10,24 +10,24 @@
 
   <HomePromotion />
   <HomeSolution />
+  <div class="spacer"></div>
   <HomeEventAgenda />
   <HomeBesoin />
   <HomeReviews />
   <!-- <HomeNews /> -->
-  <HomeHelp  />
-  <LayoutPrefooter id="layout-footer" />
+  <HomeHelp />
+  <LayoutPrefooter />
   <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const shouldShowStickyMenu = ref(true);
 
-
 const squaresData = [
   {
     id: 1,
@@ -40,8 +40,7 @@ const squaresData = [
     id: 4,
     bgColor: "darkblue-square",
     iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler"
-
+    text: "Nous Appeler",
   },
 ];
 
@@ -64,9 +63,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.spacer {
+  height: 2rem;
+}
 #sticky-menu {
   position: sticky;
-  top: 20rem;
+  top: 30rem;
   z-index: 1;
   margin-bottom: -32rem;
   float: right;
@@ -74,7 +76,7 @@ onMounted(() => {
 
 @media (max-width: 1800px) {
   #sticky-menu {
-    top: 16rem;
+    top: 26rem;
     margin-bottom: -28rem;
   }
 }

pages/opentalent_artist.vue

@@ -40,13 +40,7 @@ const squaresData = [
     iconClass: "fa-solid fa-circle-info icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/Depliant_Opentalent_Artist_23.pdf ",
-  },
-  {
-    id: 4,
-    bgColor: "yellow-square",
-    iconClass: "fa-solid fa-circle-info icon",
-    text: "Nous appeler",
-  },
+  }
 ];
 
 onMounted(() => {

pages/opentalent_manager.vue

@@ -38,6 +38,7 @@ const squaresData = [
     bgColor: "red-square",
     iconClass: "fa-brands fa-readme icon",
     text: "Brochure",
+    url: "https://www.opentalent.fr/fileadmin/user_upload/Manager.pdf",
   },
   {
     id: 4,