refacto + correction + retour v2

assets/css/main.css

@@ -1,6 +1,7 @@
 @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,
+.presentation-title, .subtitle
 .status {
   font-family: "Barlow";
   font-style: normal;

components/About/Agenda.vue

@@ -18,7 +18,7 @@
         </v-col>
 
         <v-col cols="4">
-          <v-btn class="btn-news" text> VOIR TOUTES LES ACTUALITÉS </v-btn>
+          <v-btn class="btn-news" text> VOIR TOUS LES EVENEMENTS </v-btn>
         </v-col>
       </v-row>
 

components/About/Banner.vue

@@ -1,12 +1,11 @@
 <template>
   <LayoutContainer>
-      <LayoutUITitlePage title="Qui sommes nous ?" />
-
+    <LayoutUITitlePage title="Qui sommes nous ?" />
 
     <v-row>
       <v-col cols="12">
         <LayoutUIBanner
-          :imageSrc="'/images/solutions/school.jpg'"
+          :imageSrc="'/images/banner/about_opentalent.png'"
           imageAlt="'line'"
         />
       </v-col>
@@ -17,9 +16,7 @@
 <script setup></script>
 
 <style scoped>
-
-
-:deep().logiciel{
+:deep().logiciel {
   font-family: "Barlow";
   font-style: normal;
   font-size: 3rem;
@@ -29,279 +26,14 @@
   width: 100%;
 }
 
-
-:deep().text-left, :deep().text-right, :deep().description-square, :deep().black-square, :deep().blue-square  {
+:deep().text-left,
+:deep().text-right,
+:deep().description-square,
+:deep().black-square,
+:deep().blue-square {
   display: none;
 }
 :deep().text-right {
   display: none;
 }
-
-.container-title {
-  display: flex;
-  justify-content: space-around;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.text-left {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  color: #000000;
-  opacity: 0.1;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.text-right {
-  margin-top: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  text-align: right;
-  opacity: 0.1;
-  margin-right: 5rem;
-}
-
-
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
-
 </style>
-
-
-<!-- <template>
-  <LayoutContainer>
-    <v-row>
-      <v-col
-        cols="12"
-        class="title"
-      >
-        <h1 class="text-center">
-          Qui sommes nous ?
-        </h1>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <div class="banner-container">
-          <img
-            src="/images/solutions/school.jpg"
-            alt="line"
-            class="cover-image"
-          >
-        </div>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col
-        cols="12"
-        class="menu-container"
-      >
-        <div
-          v-for="menu in menus"
-          :key="menu.label"
-        >
-          <v-chip
-            v-if="state.activeMenu === menu.label"
-            class="active-menu"
-          >
-            {{
-              menu.label
-            }}
-          </v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const state = ref({
-  activeMenu: "Qui sommes-nous",
-});
-
-const menus = [
-  { label: "Qui sommes-nous" },
-  { label: "nos logiciels" },
-  { label: "l’agenda opentalent" },
-  { label: "notre histoire" },
-  { label: "notre équipe" },
-];
-</script>
-
-<style scoped>
-.title {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-}
-
-.container-title {
-  display: flex;
-  justify-content: space-around;
-  font-family: "Barlow";
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.text-left {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  color: #000000;
-  opacity: 0.1;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
-
-.text-right {
-  margin-top: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  text-align: right;
-  opacity: 0.1;
-  margin-right: 5rem;
-}
-
-.menu-container {
-  display: flex;
-  justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #bbb8b8;
-  font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
-
-.black-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 0;
-  width: 13rem;
-  height: 10rem;
-  background-color: black;
-  background: #9edbdd;
-}
-
-.blue-square {
-  position: absolute;
-  bottom: 0.5rem;
-  right: 12rem;
-  width: 13rem;
-  height: 10rem;
-  background: #0e2d32;
-}
-
-.description-square {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  text-align: center;
-  color: #091d20;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin-top: 0.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 1rem;
-}
-
-.content-row {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-}
-
-.icon {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.logo-image {
-  width: 90%;
-  height: auto;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
-}
-
-.cover-image {
-  width: 100%;
-  height: 25rem;
-  object-fit: cover;
-  transition: transform 0.2s;
-  margin: 0 auto;
-  transform: scaleX(-1);
-}
-</style> -->

components/About/Chronologie.vue

@@ -0,0 +1,318 @@
+<template>
+  <LayoutContainer id="Notre Histoire">
+    <v-container>
+      <v-row class="mb-6 mt-6">
+        <v-col cols="6">
+          <LayoutUISubTitle
+            :title-color="'#fff'"
+            :titleText="'découvrez toute notre histoire'"
+            class="mb-12"
+          />
+        </v-col>
+
+        <v-col cols="6">
+          <div class="d-flex align-center">
+            <div class="carousel-button" @click="previousAction">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <div class="carousel-button" @click="nextAction">
+              <i class="fas fa-chevron-right"></i>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row class="mb-12">
+      <v-col cols="12">
+        <Carousel ref="functionCarousel" :items-to-show="2" :items-to-scroll="1">
+          <v-row> </v-row>
+          <Slide
+            v-for="(slide, index) in slides"
+            :key="slide.id"
+            :class="{
+              'active-slide': index === activeSlide,
+              'inactive-slide': index !== activeSlide,
+            }"
+            @click="setActiveSlide(index)"
+          >
+            <v-row justify="center" class="carousel-row">
+              <v-col cols="4" class="carousel-col">
+                <div
+                  class="carousel__item"
+                  :style="{ backgroundImage: 'url(' + slide.imageUrl + ')' }"
+                ></div>
+              </v-col>
+
+              <v-col cols="4" class="carousel-col">
+                <div class="description-container">
+                  <h3 class="year">{{ slide.year }}</h3>
+                  <h4 class="title-slide">{{ slide.title }}</h4>
+                  <p class="description mb-6">{{ slide.description }}</p>
+                </div>
+              </v-col>
+              <div  class="timeline-container">
+                <div v-if="slide.year" class="timeline">
+                  <div
+                    class="timeline-point"
+                    :style="{
+                      left: calculateTimelinePosition(slide.year) + '%',
+                    }"
+                  >
+                    <p
+                      class="timeline-year"
+                      style="color: white; font-weight: bold"
+                    >
+                      {{ slide.year }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </v-row>
+          </Slide>
+        </Carousel>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { Carousel, Navigation, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+const functionCarousel = ref(null);
+const activeSlide = ref(0);
+
+const setActiveSlide = (index) => {
+  activeSlide.value = index;
+};
+const nextAction = () => {
+  functionCarousel.value.next();
+  activeSlide.value = activeSlide.value + 1;
+
+};
+
+const previousAction = () => {
+  functionCarousel.value.prev();
+  activeSlide.value = activeSlide.value - 1;
+};
+
+
+
+const calculateTimelinePosition = (year) => {
+  if(!year) {
+    return 0;
+  }
+  const startYear = 2005;
+  const endYear = 2024;
+  const position = ((year - startYear) / (endYear - startYear)) * 100;
+  return position;
+
+};
+
+const slides = [
+  {
+    id: 1,
+    year: "2005",
+    title: "L'origine d'Opentalent",
+    description:
+      "Sous une pleine lune inspirante, Guillaume alors imagine un outil collaboratif en ligne révolutionnaire pour le secteur culturel...",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 2,
+    year: "2006",
+    title: "Développement et partenariat stratégique",
+    description:
+      "Michel, passionné par l'innovation technologique, rejoint Guillaume. Ensemble, ils développent Opentalent avec le soutien de la Fédération de Haute-Savoie. Leur travail acharné bénévole durant 2 ans donne naissance à un logiciel SAS avant-gardiste, une première dans l'univers des structures culturelle",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 3,
+    year: "2008",
+    title: "Naissance de l'entreprise 2iOpenservice",
+    description:
+      "La Fédération de Haute-Savoie, séduite par le projet, invite à collaborer avec la CMF, élargissant l'impact d'Opentalent. 2IOpenservice est alors officiellement créée, marquant une nouvelle ère dans la gestion culturelle digitale.  ",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 4,
+    year: "2009",
+    title: "MusAssos - la réponse aux besoins pour les petites structures",
+    description:
+      "Pour répondre aux besoins spécifiques des écoles affiliées à la CMF, 2iopenservice lance MusAssos, une solution adapté aux petites et moyennes structures, facilitant la gestion et la promotion culturelle.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 5,
+    year: "2010",
+    title: "CMF Réseau, l'innovation communautaire",
+    description:
+      "La CMF adopte AdminFédé pour connecter ses adhérents, et AdminAsso devient accessible à tous, démocratisant l'accès aux outils de gestion artistique.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 6,
+    year: "2014",
+    title: "Vers une Culture Multidisciplinaire avec FFEC",
+    description:
+      "Le logiciel d'Opentalent s'étend au-delà de l'enseignement artistique, embrassant l'art, la musique, le théâtre, la danse et le cirque. En partenariat avec la FFEC, Reso Cirque voit le jour, intégrant notre solution au cœur de la pratique circassienne.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 7,
+    year: "2015",
+    title: "Refonte Technologique",
+    description:
+      "Nous modernisons notre gamme de logiciels pour la rendre plus sécurisée et compatible avec divers supports, marquant une étape clé dans notre évolution technologique.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 8,
+    year: "2019",
+    title: "Nouvelle Génération Opentalent",
+    description:
+      "Avec des fonctionnalités améliorées et une interface utilisateur intuitive, la nouvelle génération d'Opentalent se démarque, prouvant notre engagement envers l'excellence et l'accessibilité.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 9,
+    year: "2024",
+    title: "Relooking du site Opentalent",
+    description:
+      "Le site Opentalent se réinvente, reflétant notre évolution et notre capacité à nous adapter aux tendances actuelles, tout en conservant notre essence originelle.",
+    imageUrl: "/images/about/idee.png",
+  },
+  {
+    id: 10,
+    title: "Le Futur avec Vous...",
+    description:
+      "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la cultur",
+    imageUrl: "/images/about/idee.png",
+  },
+];
+</script>
+
+<style scoped>
+
+.active-slide {
+  opacity: 1;
+  transform: scale(1.1); /* Zoom effect */
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.inactive-slide {
+  opacity: 0.5;
+  transition: opacity 0.3s ease-in-out;
+}
+.timeline-year {
+  position: relative;
+  top: 1rem;
+  left: -1rem;
+  font-size: 1.2rem;
+  color: white;
+  font-weight: bold;
+}
+.timeline-container {
+  width: 90%;
+  padding: 10px 0;
+}
+
+.timeline {
+  top: 1rem;
+  height: 1px;
+  background-color: #ddd;
+  position: relative;
+}
+
+
+.timeline-point {
+  position: relative;
+  top: 15px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: white;
+}
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  background-color: transparent;
+  border: 2px solid #fff;
+  cursor: pointer;
+  margin-right: 1rem;
+}
+
+.carousel-button i {
+  color: #fff;
+}
+.container {
+  background-color: #0e2d32;
+}
+.carousel-row {
+  height: 32rem;
+}
+
+.carousel-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.carousel__item,
+.description-container {
+  height: 300px;
+  width: 300px;
+}
+
+.carousel__item {
+  width: 100%;
+  background-image: url("/images/about/idee.png");
+  background-size: cover;
+}
+
+.v-col {
+  padding: 0;
+}
+
+.description {
+  align-items: center;
+  padding: 1rem;
+  font-size: 0.8rem;
+  color: #95dee9;
+}
+
+.title-slide {
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 1rem;
+}
+
+.year {
+  font-size: 1.8rem;
+}
+
+.description-container {
+  padding: 1rem;
+  text-align: center;
+  margin-left: 1rem;
+  background-color: #091d20;
+  color: white;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+}
+.carousel__item {
+  height: 300px;
+  width: 300px;
+  background-image: url("/images/about/idee.png");
+  border-top-left-radius: 20%;
+  border-bottom-left-radius: 20%;
+}
+
+/* @media (max-width: 768px) {
+  .carousel-row {
+    flex-direction: column;
+  }
+} */
+</style>

components/About/Equipe.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer id="Notre équipe">
     <v-row class="mt-12">
       <LayoutUISubTitle
         :iconSize="6"

components/About/FAQ.vue

@@ -1,25 +1,30 @@
 <template>
-  <LayoutContainer> 
-      <v-row class="help-row">
-        <v-col cols="6" class="help-col">
-          <v-img class="help-img" src="/images/help/Help.png"/>
-        </v-col>
+  <LayoutContainer>
+    <v-row no-gutters>
+      <v-col cols="6">
+        <v-img class="help-img" src="/images/help/Help.png" />
+      </v-col>
 
-        <v-col cols="6" class="help-col text-content">
+      <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 class="row-faq">
+          Chez Opentalent, nous avons à coeur de répondre à vos interrogations
+          et de vous apporter la solution faite pour vous.
+        </h4>
+        <v-row>
+          <nuxt-link to="/nous-contacter">
             <v-btn class="button-faq ml-6 mt-12">
               Nous contacter
-            </v-btn>
-          </v-row>
-        </v-col>
-      </v-row>
+            </v-btn></nuxt-link
+          >
+        </v-row>
+        </div>
+
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
-<script setup>
-</script>
+<script setup></script>
 
 <style scoped>
 .button-faq {
@@ -30,13 +35,11 @@
   color: white;
   padding: 19px 28px;
   gap: 9px;
-  font-family: "Barlow";
 }
 
 .help-img {
-  margin-left: 5rem;
-  margin-right: 3rem;
   height: 100%;
+  width: 100%;
 }
 .subtitle-team {
   margin-bottom: 2rem;
@@ -49,27 +52,13 @@
   color: white;
 }
 
-.container {
-  margin-bottom: 1rem;
-  margin-top: 3rem;
-}
-
-.help-row {
-  align-items: stretch; /* Align items will cause the columns to match height */
-
-  background: var(--Vert-90, #0E2D32);
-}
-
 .help-col {
-  display: flex;
-  flex-direction: column; /* Stack children vertically */
-  justify-content: flex-start; /* Align children at the start */
+  background: var(--Vert-90, #0e2d32);
 }
 
 .text-content {
   display: flex;
   flex-direction: column;
-  justify-content: space-between; /* Spread text and button if there's extra space */
+  justify-content: space-between;
 }
-
 </style>

components/About/Histoire.vue

@@ -1,13 +1,11 @@
 <template>
   <LayoutContainer>
-    
     <div id="Qui sommes-nous">
-      <v-row class="mt-12"> 
+      <v-row class="mt-12">
         <v-col cols="3">
-          <div class="title-container">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle">Qui sommes-nous</h4>
-          </div>
+          <LayoutUISubTitle
+            :titleText="'Qui sommes-nous ?'"
+            />
         </v-col>
 
         <v-col cols="9">
@@ -91,32 +89,20 @@
   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;
 }
 .culture-details {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   color: #091d20;
   width: 30rem;
+  text-align: justify;
 }
 
 .culture-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 34px;
   line-height: 38px;
@@ -125,8 +111,6 @@
   width: 25rem;
 }
 .passion-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
@@ -136,9 +120,7 @@
 }
 
 .passion-details {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
+  text-align: justify;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
@@ -168,6 +150,8 @@
 }
 
 .italic-title {
+  text-align: justify;
+
   font-family: "Barlow";
   font-style: italic;
   font-weight: 300;

components/About/Logiciels.vue

@@ -1,378 +1,157 @@
 <template>
   <div id="Nos logiciels">
-    <LayoutContainer :overflow="false">
-      <div class="title-container mt-12">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h4 class="subtitle">Ce qui nous anime</h4>
-      </div>
-
-      <h3 class="title">Nos Logiciels</h3>
-
-      <v-row>
-        <v-col cols="3" class="col-info">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">Artist</h2>
-          <hr class="bar" />
-          <p class="description-logiciel">
-            Orchestre, chorales, compagnies de danse, théâtre et cirque
-          </p>
-
-          <v-row>
-            <div class="artist-image">
-              <v-img
-                src="/images/OpenTalent_LogoNoir_Jaune_white.png"
-                class="logo"
-              />
-            </div>
-          </v-row>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-solutions">
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-          </v-row>
-        </v-col>
+    <LayoutContainer>
+      <v-row class="mb-6">
+        <LayoutUISubTitle titleText="Ce qui nous anime" />
+        <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
+      </v-row>
 
-        <v-col cols="3" class="col-info">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">Manager</h2>
-          <hr class="bar" />
-          <p class="description-logiciel">
-            Fédérations, confédérations et collectivités
+      <v-row no-gutters class="mb-12">
+        <v-col cols="3">
+          <p style="text-align: justify;" class="mr-4 ml-6">
+            Découvrez notre gamme de logiciels de gestion & de communication
+          adapté au secteur culturel. Des fonctionnalités complètes:
           </p>
-
-          <v-row>
-            <v-row>
-              <div class="manager-image">
-                <v-img
-                  src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
-                  class="logo"
-                />
-                <div class="overlay">
-                  <button class="discover-button">Découvrir</button>
-                </div>
-              </div>
-            </v-row>
-          </v-row>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-solutions">
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-          </v-row>
+   
+          <ul class="custom-list-style ml-6" >
+            <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
+          </ul>
         </v-col>
-
-        <v-col cols="3" class="col-info">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">School</h2>
-          <hr class="bar" />
-          <p class="description-logiciel">
-            Petits et grands établissements d'enseignement artistique
-          </p>
-
-          <v-row>
-            <v-row>
-              <div class="school-image">
-                <v-img src="/images/logo_school_white.png" class="logo" />
-              </div>
-            </v-row>
-          </v-row>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-solutions">
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-                <li class="details-solution">Gestion des membres</li>
-              </ul>
-            </v-col>
-          </v-row>
+        <v-col cols="3" v-for="(item, index) in items" :key="index">
+          <div
+            class="container-image"
+            :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
+          >
+            <div class="overlay"></div>
+            <div class="footer-container">
+              <v-img class="logo" :src="item.logoUrl"></v-img>
+              <nuxt-link :to="item.link">
+                <v-btn
+                  :style="{ backgroundColor: item.buttonColor }"
+                  class="plus-button"
+                >
+                  <v-icon>fas fa-plus</v-icon>
+                </v-btn>
+              </nuxt-link>
+            </div>
+          </div>
         </v-col>
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<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;
-}
+<script setup>
+const features = [
+  "Une gestion de vos contacts",
+  "un agenda collaboratif et interactif",
+  "Une gestion du matériel et du stock",
+  "Une communication simplifiée",
+  "Un rapport d'activité complet",
+  "Un site internet intégré",
+  "Et bien plus encore..."
+];
+
+const items = [
+  {
+    imageUrl: "/images/solutions/artist.jpg",
+    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
+    buttonColor: "#FAC20A",
+    link: "/opentalent_artist",
+  },
+  {
+    imageUrl: "/images/solutions/school.jpg",
+    logoUrl: "/images/logo/logiciels/School-Blanc.png",
+    buttonColor: "rgba(32, 147, 190)",
+    link: "/opentalent_school",
+  },
+
+  {
+    imageUrl: "/images/solutions/manager.png",
+    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
+    buttonColor: "#D8050B",
+    link: "/opentalent_manager",
+  },
+];
+</script>
 
-.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;
-}
-.discover-button {
-  background-color: transparent;
-  border: none;
-  color: white;
-  font-family: "Barlow";
-  font-size: 1.2rem;
-  font-weight: 600;
-  padding: 1rem 2rem;
-  border-radius: 2rem;
-  cursor: pointer;
-}
-.logo {
-  width: 5rem;
-  height: 4rem;
-  margin-top: 13rem;
-  margin-left: 13rem;
-}
-
-.list-solutions {
-  margin-left: 0.5rem;
-  margin-top: 0.5rem;
-  font-size: 0.5rem;
-}
+<style scoped>
 
-.details-solution {
-  font-size: 0.5rem;
-  margin-top: 0.5rem;
-  width: 10rem;
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 0.7rem;
-  line-height: 18px;
-  color: #091d20;
+:deep().title{
+  width: 100% !important;
 }
-
-.bar {
-  color: #c3e5e7;
+.container {
+  max-width: 1700px;
 }
-.artist-image {
+.container-image {
   position: relative;
-  background: url(/images/solutions/artist.jpg);
+  background-image: url("/images/solutions/school.jpg");
+  background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 17rem;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
+  width: 300px;
+  height: 400px;
+  z-index: 0;
 }
 
-.artist-image::before {
-  content: "";
+.overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
 }
 
-.artist-image:hover::before {
-  opacity: 1;
-}
-.manager-image {
-  position: relative;
-  background: url(/images/solutions/manager.png);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 17rem;
-  margin-top: 4rem;
-  margin-left: 2rem;
-}
-
-.manager-image::before {
-  content: "";
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
   bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.manager-image:hover::before {
-  opacity: 1;
-}
-
-.school-image {
-  position: relative;
-  background: url(/images/solutions/school.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 17rem;
-  margin-top: 4rem;
-  margin-left: 1.5rem;
-}
-
-.school-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
 }
 
-.school-image:hover::before {
-  opacity: 1;
+.logo {
+  width: 100px;
+  z-index: 2;
+  margin-right: 10px;
 }
 
-.col-info:first-child {
-  margin-left: 9rem;
+.plus-button {
+  background-color: #fac20a;
+  height: 70px;
+  z-index: 3;
+  border-bottom-right-radius: none !important;
 }
 
-.col-info {
-  width: 4rem;
-  margin-left: 2rem;
-}
-.solution-img {
-  width: 15rem;
-  height: 15rem;
-  object-fit: cover;
-  margin-top: 2rem;
+.v-btn {
+  height: 80px !important;
+  border-bottom-right-radius: none !important;
 }
 
-.description-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 0.9rem;
-  line-height: 0.9rem;
-  margin-top: 1rem;
-  color: #0e2d32;
+.plus-button .v-icon {
+  color: #ffffff;
+  font-size: 2rem;
 }
 
-.logiciel-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 2rem;
-  color: #0e2d32;
-  margin-bottom: 1rem;
+.plus-button,
+.v-btn {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border-top-left-radius: 10% !important;
 }
 
-.opentalent-small {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #0e2d32;
+ul.custom-list-style {
+  list-style-type: none;
+  padding-left: 0; 
 }
 
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  flex: none;
-  margin-bottom: 3rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
+ul.custom-list-style li:before {
+  content: '- '; 
+  padding-right: 5px; 
 }
 
-.solution-subtitle {
-  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;
-}
-.container {
-  margin-bottom: 20rem;
-  height: 30rem;
-  position: relative;
-}
-
-.container-title {
-  margin-top: 5rem;
-  margin-left: 8rem;
-  margin-bottom: 5rem;
-}
 </style>

components/About/MenuScroll.vue

@@ -29,12 +29,21 @@ const refs = reactive({
   equipe: null,
 });
 
+const menus = [
+  { label: "Qui sommes-nous" },
+  { label: "Nos valeurs" },
+  { label: "Nos logiciels" },
+  { label: "L'agenda opentalent" },
+  { label: "Notre Histoire" },
+  { label: "Notre équipe" },
+];
+
 const isSticky = ref(false);
 
 const handleScroll = () => {
   const scrollPosition = window.scrollY;
 
-  if (scrollPosition > 800) {
+  if (scrollPosition > 800) { 
     isSticky.value = true;
   } else {
     isSticky.value = false;
@@ -54,25 +63,17 @@ const handleScroll = () => {
 };
 
 onMounted(() => {
-  Object.keys(refs).forEach((key) => {
+  Object.keys(refs).forEach(key => {
     refs[key] = document.getElementById(key);
   });
 
-  window.addEventListener("scroll", handleScroll);
+  window.addEventListener('scroll', handleScroll);
 });
 
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll);
+  window.addEventListener('scroll', handleScroll);
 });
 
-const menus = [
-  { label: "Qui sommes-nous" },
-  { label: "Nos valeurs" },
-  { label: "Nos logiciels" },
-  { label: "L'agenda opentalent" },
-  { label: "Notre Histoire" },
-  { label: "Notre équipe" },
-];
 
 const activeMenu = ref(menus[0].label);
 
@@ -86,6 +87,7 @@ const navigate = (menu) => {
 </script>
 
 <style scoped>
+
 .sticky-menu {
   position: fixed;
   top: 0;
@@ -95,7 +97,7 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   background: white;
@@ -110,14 +112,14 @@ const navigate = (menu) => {
   text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
-
 .v-chip.active-menu {
-  background: black;
+  background: var(--Vert-100, #091D20);;
   color: white;
 }
 
 .menu-container div:hover {
   cursor: pointer;
   text-decoration: underline;
+  z-index: 15;
 }
 </style>

components/About/Valeurs.vue

@@ -1,92 +1,96 @@
 <template>
   <LayoutContainer>
     <div id="Nos valeurs">
-    <v-row class="mr-6 mb-6 mt-12">
-      <v-col cols="5">
-        <div class="title-container">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle">Les valaurs qui nous portent</h4>
-          </div>
-
-        <div class="container-img">
-          <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />
+      <v-row class="mr-6 mb-6 mt-12">
+        <v-col cols="5">
+          <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
+
+          <div class="container-img">
+            <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />
+
+            <v-row>
+              <img
+                class="image-ronde left-img"
+                src="/images/about/valeur2.jpg"
+              />
+              <img
+                class="image-ronde right-img"
+                src="/images/about/valeur3.jpg"
+              />
+            </v-row>
 
-          <v-row>
-            <img class="image-ronde left-img" src="/images/about/valeur2.jpg" />
             <img
-              class="image-ronde right-img"
-              src="/images/about/valeur3.jpg"
+              class="image-ronde bottom-img"
+              src="/images/about/valeur4.jpg"
             />
-          </v-row>
-
-          <img class="image-ronde bottom-img" src="/images/about/valeur4.jpg" />
-        </div>
-      </v-col>
-
-      <v-col cols="7">
-        <div class="valeur-container">
-          <v-row class="row">
-            <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">Management social</h6>
-              <p>
-                Guillaume et Michel sont sur la même longueur d’onde et donnent
-                le « La » à un management social et solidaire où plus que de
-                mettre en avant l'entreprise, ils privilégient la mise en avant
-                des hommes et femmes qui la composent. Toux ceux qui participent
-                jour après jour à l’écriture de la partition sont valorisés. Le
-                partage, l’échange et le dialogue en lieu et place des liens de
-                subordination.
-              </p>
-            </v-col>
-
-            <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">Satisfaction client</h6>
-              <p>
-                Opentalent met un point d’honneur à satisfaire ses clients en
-                leur proposant des solutions de qualité, un projet global dans
-                lequel ils se retrouvent. L’intention de base est bel et bien de
-                proposer un équilibre entre les solutions informatiques et la
-                volonté personnelle en lien avec la production et les publics
-                concernés.
-              </p>
-            </v-col>
-          </v-row>
-          <v-row class="row">
-            <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">Écologie</h6>
-              <p>
-                Proche des entreprises de l’Économie Sociale et Solidaire,
-                Opentalent accorde une grande importance aux démarches liées à
-                l’écologie et au développement durable. Le code des outils est
-                par exemple optimisé pour limiter les ressources nécessaires des
-                serveurs, réduisant ainsi leur empreinte carbone et améliorant
-                le confort des utilisateurs au quotidien.
-              </p>
-            </v-col>
-
-            <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">Open source</h6>
-              <p>
-                Opentalent est une entreprise qui croit profondément aux vertus
-                des logiciels Open Source et qui par son action contribue à leur
-                développement.
-              </p>
-            </v-col>
-          </v-row>
-        </div>
-      </v-col>
-    </v-row>
+          </div>
+        </v-col>
+
+        <v-col cols="6">
+          <div class="valeur-container">
+            <v-row
+              class="row"
+              v-for="(row, rowIndex) in values"
+              :key="rowIndex"
+            >
+              <v-col
+                cols="6"
+                v-for="(value, valueIndex) in row"
+                :key="valueIndex"
+              >
+                <v-img :src="value.img" class="icon-valeur" />
+                <h6 class="title-valeurs">{{ value.title }}</h6>
+                <p>{{ value.description }}</p>
+              </v-col>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
     </div>
   </LayoutContainer>
 </template>
-
-<script setup></script>
+<script setup>
+const values = [
+  [
+    {
+      img: "/images/about/valeurs/Management.svg",
+      title: "Management social",
+      description:
+        "Guillaume et Michel sont sur la même longueur d’onde et donnent le « La » à un management social et solidaire où plus que de mettre en avant l'entreprise, ils privilégient la mise en avant des hommes et femmes qui la composent. Toux ceux qui participent jour après jour à l’écriture de la partition sont valorisés. Le partage, l’échange et le dialogue en lieu et place des liens de subordination.",
+    },
+    {
+      img: "/images/about/valeurs/Satisfaction-client.svg",
+      icon: "fa-brands fa-react",
+      title: "Satisfaction client",
+      description:
+        "Opentalent met un point d’honneur à satisfaire ses clients en leur proposant des solutions de qualité, un projet global dans lequel ils se retrouvent. L’intention de base est bel et bien de proposer un équilibre entre les solutions informatiques et la volonté personnelle en lien avec la production et les publics concernés.",
+    },
+  ],
+  [
+    {
+      img: "/images/about/valeurs/Ecologie.svg",
+      icon: "fa-brands fa-react",
+      title: "Écologie",
+      description:
+        "Proche des entreprises de l’Économie Sociale et Solidaire, Opentalent accorde une grande importance aux démarches liées à l’écologie et au développement durable. Le code des outils est par exemple optimisé pour limiter les ressources nécessaires des serveurs, réduisant ainsi leur empreinte carbone et améliorant le confort des utilisateurs au quotidien.",
+    },
+    {
+      img: "/images/about/valeurs/Open-source.svg",
+      icon: "fa-brands fa-react",
+      title: "Open source",
+      description:
+        "Opentalent est une entreprise qui croit profondément aux vertus des logiciels Open Source et qui par son action contribue à leur développement.",
+    },
+  ],
+];
+</script>
 <style scoped>
 
+.icon-valeur{
+  width: 50px;
+  height: 50px;
+  margin-bottom: 1rem;
+}
 .title-container {
   display: flex;
   justify-content: center;
@@ -182,8 +186,8 @@
   bottom: 4.5rem;
 }
 .image-ronde {
-  width: 160px;
-  height: 150px;
+  width: 170px;
+  height: 170px;
   border-radius: 90px;
 }
 </style>

components/Contact/Banner.vue

@@ -154,26 +154,54 @@
             </v-col>
           </v-row>
 
+          <v-row>
+            <v-col cols="12">
+              <v-checkbox
+                v-model="captchaChecked"
+                :rules="[(v) => !!v || 'You must pass the captcha']"
+                label="Captcha"
+              ></v-checkbox>
+            </v-col>
+          </v-row>
+
           <!-- Submit Button -->
           <v-row>
             <v-col cols="12">
-              <v-btn :disabled="!valid"  @click="submitForm"
-                >Envoyer</v-btn
-              >
+              <v-btn :disabled="!valid" @click="submitForm">Envoyer</v-btn>
             </v-col>
           </v-row>
         </v-container>
       </v-form>
+
+      <div v-if="submissionStatus">
+        {{ submissionStatus }}
+      </div>
     </div>
+
+    <div id="map" style="height: 500px"></div>
   </LayoutContainer>
 </template>
 
 <script setup>
 import { ref, reactive, computed, toRefs } from "vue";
-import { useRoute } from 'vue-router';
+import { useRoute } from "vue-router";
+import { onMounted } from "vue";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+onMounted(() => {
+  const map = L.map("map").setView([46.075245, 6.570162], 16);
 
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution: "© OpenStreetMap contributors",
+  }).addTo(map);
+
+  const marker = L.marker([46.075245, 6.570162]).addTo(map);
+});
 const route = useRoute();
 const defaultRequestType = route.query.request;
+const captchaChecked = ref(false);
 
 const name = ref("");
 const surname = ref("");
@@ -187,6 +215,7 @@ const city = ref("");
 const phone = ref(null);
 const concernedProduct = ref("");
 const newsletterSubscription = ref(false);
+const submissionStatus = ref("");
 
 const validateName = (name) => !!name || "Name is required";
 const validateSurname = (surname) => !!surname || "Surname is required";
@@ -205,7 +234,8 @@ const valid = computed(() => {
     validateEmail(email.value) === true &&
     validateStructureName(structureName.value) === true &&
     validateMessage(message.value) === true &&
-    privacyPolicy.value === true
+    privacyPolicy.value === true &&
+    captchaChecked.value === true
   );
 });
 
@@ -216,7 +246,9 @@ const requestTypes = [
   "Demande d'option supplémentaire",
   "Autre",
 ];
-const requestType = ref(defaultRequestType === 'demo' ? "Demande de démonstration" : null );
+const requestType = ref(
+  defaultRequestType === "demo" ? "Demande de démonstration" : null
+);
 
 const formData = reactive({
   gender: null,
@@ -225,32 +257,40 @@ const formData = reactive({
   phone: null,
   requestType: null,
   concernedProduct: "",
-  newsletterSubscription, 
+  newsletterSubscription,
 });
 
 // Methods
 const submitForm = () => {
   if (valid.value) {
-    console.log("Form submission goes here.");
+    // Logique d'envoi du formulaire
+    submissionStatus.value = "Mail envoyé à contact@opentalent.fr";
   } else {
     console.log("Validation failed!");
+    submissionStatus.value = "";
   }
 };
 
 const formDataRefs = toRefs(formData);
 const formRefs = {
   ...formDataRefs,
-  name, 
-  surname, 
-  email, 
+  name,
+  surname,
+  email,
   structureName,
   message,
   privacyPolicy,
-  valid, 
+  valid,
 };
 </script>
 
 <style scoped>
+#map {
+  height: 100%;
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+}
 .infos {
   font-size: 20px;
   color: #000000;
@@ -266,7 +306,6 @@ const formRefs = {
   line-height: 95px;
   color: #000000;
   margin-bottom: 1rem;
-  /** gris moins opaque */
   color: rgba(0, 0, 0, 0.3);
 }
 .image-text {

components/Formation/Banner.vue

@@ -1,6 +1,7 @@
 <template>
   <LayoutContainer>
     <LayoutUITitlePage title="Formation" subtitle="Prise en main ou piqûre de rappel,on est toujours à vos côtés. " />
+    
     <v-row>
       <v-col cols="12" style="position: relative">
         <img

components/Formation/Catalogue.vue

@@ -2,61 +2,73 @@
   <div id="Catalogue">
     <LayoutContainer>
       <div class="grey-container">
-        <div class="title-container mt-12 mb-6">
-          <v-icon size="6" class="fa-solid fa-circle icon-title" />
-          <h4 class="subtitle">Découvrez notre catalogue de formation</h4>
-        </div>
-
-        <v-row>
-          <v-col cols="12">
-            <h4 class="catalog ml-6">Catalogue</h4>
-          </v-col>
-        </v-row>
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Découvrez notre catalogue de formation'"
+        />
 
+        <LayoutUITitle title="Catalogue" />
 
-        <v-row no-gutters=""  class="centered-row ml-12">
+        <v-row  style="  padding: 2rem; max-width: 90%; margin-left: auto; margin-right: auto;">
           <v-col v-for="(course, index) in courses" :key="index" cols="4">
-    <v-card class="mb-4"> <!-- Added margin bottom for spacing -->
-      <v-card-text>
-        <div class="title-card-container">
-          <span class="number-card">{{ course.number }}</span>
-          <h4 class="card-title">{{ course.title }}</h4>
-          <v-img class="logo-img" :src="course.imageUrl" />
-        </div>
-        <p class="details-card">{{ course.description }}</p>
+            <v-card class="mb-4">
+              <v-card-text>
+                <div class="title-card-container">
+                  <span class="number-card">{{ course.number }}</span>
+                  <h4 class="card-title">{{ course.title }}</h4>
+                  <v-img class="logo-img" :src="course.imageUrl" />
+                </div>
+                <p class="details-card">{{ course.description }}</p>
 
-        <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</h6>
-          <ul class="list-obj">
-            <li v-for="(objective, objIndex) in course.objectives" :key="objIndex">
-              {{ objective }}
-            </li>
-          </ul>
-        </div>
+                <div class="container-blue">
+                  <h6 class="title-obj">Objectifs pédagogiques</h6>
+                  <ul class="list-obj">
+                    <li
+                      v-for="(objective, objIndex) in course.objectives"
+                      :key="objIndex"
+                    >
+                      {{ objective }}
+                    </li>
+                  </ul>
+                </div>
 
-        <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</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">Durée : {{ course.duration }}</v-chip>
-        <v-chip class="badge-time">{{ course.price }}</v-chip>
-        <v-chip class="chip-download" @click="downloadPdf(course.downloadLink)">
-          Télécharger le programme de formation
-        </v-chip>
-      </v-card-text>
-    </v-card>
-  </v-col>
-</v-row>
+                <div class="container-blue">
+                  <h6 class="title-obj">Programme</h6>
+                  <v-row>
+                    <v-col
+                      v-for="column in course.program"
+                      :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>
+                <v-chip
+                  class="chip-download"
+                  @click="downloadPdf(course.downloadLink)"
+                >
+                  Télécharger le programme de formation
+                </v-chip>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
       </div>
     </LayoutContainer>
   </div>
@@ -81,7 +93,7 @@ const courses = [
       "Communiquer avec les personnes du répertoire",
     ],
     duration: "14h",
-    additionalObjectives: [
+    program: [
       {
         id: 1,
         objectives: [
@@ -116,7 +128,7 @@ const courses = [
       "Gérer les élèves et leurs familles",
     ],
     duration: "7h",
-    additionalObjectives: [
+    program: [
       {
         id: 1,
         objectives: ["Accès et interface", "Configuration"],
@@ -142,7 +154,7 @@ const courses = [
       "Configurer les options du site internet côté logiciel",
     ],
     duration: "7h",
-    additionalObjectives: [
+    program: [
       {
         id: 1,
         objectives: ["Gestion des pages", "Gestion des blocs"],
@@ -160,70 +172,18 @@ const courses = [
 </script>
 
 <style scoped>
+
 .v-card {
-  border: none !important; 
-  box-shadow: none !important; 
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
 }
 .grey-container {
   background-color: #f8f8f8;
-  padding: 4rem;
-}
-.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;
-}
-
-.centered-row {
-  margin: auto;
-  justify-content: center;
-}
-.catalog {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  margin-bottom: 3rem;
 }
 .chip-download {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: azure;
+  border-radius: 3rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -237,10 +197,9 @@ const courses = [
 }
 
 .badge-time {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: #fff;
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -253,6 +212,10 @@ const courses = [
   align-items: center;
 }
 
+.badge-time span {
+  color: var(--Vert-90, #0E2D32); 
+}
+
 .list-obj {
   margin-top: 0.5rem;
   font-family: "Barlow";
@@ -282,7 +245,6 @@ const courses = [
   margin-bottom: 1rem;
   border-radius: 1rem;
   padding-left: 1.5rem;
-  width: 31rem;
   height: 11rem;
 }
 
@@ -294,8 +256,8 @@ const courses = [
   line-height: 1rem;
   color: #091d20;
   margin-top: 1rem;
-  width: 31rem;
-  height: 4rem;
+  margin-bottom: .5rem;
+  height: 5rem;
 }
 
 .number-card {
@@ -303,7 +265,7 @@ const courses = [
   font-style: normal;
   font-weight: 500;
   font-size: 1.3rem;
-  color: #e34461;
+  color: #b9e5e7;
   margin-right: 1rem;
 }
 

components/Formation/Certification.vue

@@ -1,37 +1,38 @@
 <template>
   <div id="Certification">
     <LayoutContainer>
-      <div class="title-container mt-12 mb-6">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h4 class="subtitle">DES FORMATIONS CERTIFIFIÉES</h4>
-      </div>
-      <h2 class="title-certification ml-8">Certification</h2>
-
-      <v-row class="ml-6 ">
-        <v-col cols="4">
-          <h2 class="title-certification">
-            Qualiopi : Marque de certification
-          </h2>
-          <p class="details-certifications">
-            Nos formations sont certifiées Qualiopi - Actions de formation.
-          </p>
-
-          <p class="details-certifications">La marque « Qualiopi » vise à :</p>
-          <ul class="list-qualiopi">
-            <li>
-              attester de la qualité du processus mis en œuvre par les
-              prestataires d’actions concourant au développement des compétences
-              ;
-            </li>
-            <li>
-              permettre une plus grande lisibilité de l’offre de formation
-              auprès des entreprises et des usagers.
-            </li>
-          </ul>
+      <v-row>
+        <v-col cols="5">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'DES FORMATIONS CERTIFIFIÉES'"
+          />
+          <LayoutUITitle title="Certification" />
+          <LayoutUITitle title="Qualiopi : Marque de certification " />
+          <div class="bloc-certif ml-12 mt-6 mr-12">
+            <p>
+              Nos formations sont certifiées Qualiopi - Actions de formation.
+            </p>
+            <p class="details-certifications">
+              La marque « Qualiopi » vise à :
+            </p>
+            <ul class="list-qualiopi">
+              <li>
+                attester de la qualité du processus mis en œuvre par les
+                prestataires d’actions concourant au développement des
+                compétences ;
+              </li>
+              <li>
+                permettre une plus grande lisibilité de l’offre de formation
+                auprès des entreprises et des usagers.
+              </li>
+            </ul>
+          </div>
         </v-col>
 
-        <v-col cols="5">
-          <v-img src="/images/formation/qualiopi.jpg" class="qualiopi-img" />
+        <v-col cols="7">
+          <v-img src="/images/formation/qualiopi.jpg" />
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -41,40 +42,16 @@
 <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: 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;
-}
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
-}
 .qualiopi-img {
-  margin-bottom: 5rem;
-  bottom: 4rem;
+  background-image: url("/images/formation/qualiopi.jpg");
+  width: 600px;
+  top: -15rem;
+}
+.bloc-certif {
+  text-align: justify;
 }
 
 .list-qualiopi {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
@@ -82,37 +59,10 @@
   margin-top: 1rem;
 }
 .details-certifications {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   color: #091d20;
   margin-top: 1rem;
 }
-
-.title-certification {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  margin-bottom: 2rem;
-}
-
-.icon-title {
-  color: #9edbdd;
-  font-size: 2rem;
-  margin-right: 1rem;
-}
-.title-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-  margin-top: 4rem;
-}
 </style>

components/Formation/MenuScroll.vue

@@ -104,7 +104,7 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   background: white;
@@ -119,14 +119,14 @@ const navigate = (menu) => {
   text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
-
 .v-chip.active-menu {
-  background: black;
+  background: var(--Vert-100, #091D20);;
   color: white;
 }
 
 .menu-container div:hover {
   cursor: pointer;
   text-decoration: underline;
+  z-index: 15;
 }
 </style>

components/Formation/OPCA.vue

@@ -1,12 +1,15 @@
 <template>
   <div id="Financement">
     <LayoutContainer>
-      <div class="title-container mt-12 mb-6">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h4 class="subtitle">Accessibilité</h4>
-      </div>
+      <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Découvrez notre catalogue de formation'"
+          :title-color="'#ffffff'"
+        />
 
-      <v-row class="row">
+        <v-container>
+          <v-row >
         <v-col cols="6">
           <v-img src="/images/formation/programme.jpg" class="opca-img" />
         </v-col>
@@ -37,6 +40,8 @@
           </v-row>
         </v-col>
       </v-row>
+        </v-container>
+
     </LayoutContainer>
   </div>
 </template>
@@ -44,42 +49,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: 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;
-  color: white;
-}
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
-}
 
-.row,
-.title {
-  margin-left: 5rem;
-  margin-right: 5rem;
+.details-opca{
+  text-align: justify;
 }
-
 .opca-img {
-  width: 70%;
+  width: 100%;
   border-radius: 2rem;
 }
 
@@ -89,42 +64,25 @@
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
-  margin-right: 15rem;
   margin-top: 2rem;
   color: #ffffff;
+  margin-left: 5rem;
+
 }
 
 .title-opca {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
   color: #ffffff;
-  margin-top: 2rem;
-  margin-right: 8rem;
-}
-.icon {
-  margin-right: 0.5rem;
-}
-.title {
-  display: flex;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  margin-bottom: 2rem;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-top: 4rem;
-  color: #ffffff;
+  margin-top: .6rem;
+  margin-left: 5rem;
+
 }
 
 .container {
   background: #0e2d32;
+  height: 100%;
+  margin-bottom: 1rem;
 }
 </style>

components/Formation/Participation.vue

@@ -1,32 +1,42 @@
 <template>
   <div id="Inscription">
     <LayoutContainer>
-      <div class="title-container mt-12 mb-6">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h4 class="subtitle">Inscriptions</h4>
-      </div>
-      <h2 class="title-participation text-center">
+      <v-row>
+        <v-col cols="12">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Accessibilité'"
+            :title-color="'#ffffff'"
+            class="subtitle"
+          />
+        </v-col>
+      </v-row>
+
+      <h2 class="title-participation text-center mb-8">
         Vous souhaitez participer à une formation ?
       </h2>
+
       <v-row class="mb-12">
         <v-col cols="12">
-          <v-img
+          <div class="participation-img"></div>
+          <!-- <v-img
             class="participation-img"
             src="/images/formation/participation.jpg"
-          />
+          /> -->
         </v-col>
       </v-row>
 
       <v-row class="mb-12">
         <v-col cols="12">
-          <p class="details-participations">
-            Utilisez le menu "Contact" situé en haut et en bas de la page pour
-            plus d'informations. Nous vous répondons sous 48h (hors week-ends).
-            Délais d'accès: Après accord, nous mettons tout en oeuvre pour vous
-            mettre à disposition un formateur sous 1 mois.
+          <div class="details-participations">
+            <p class="mb-6" >
+            Nous vous répondons sous 48h (hors week-ends). Délais d'accès: Après
+            accord, nous mettons tout en oeuvre pour vous mettre à disposition
+            un formateur sous 1 mois."
           </p>
-
-          <p class="details-participations">
+          
+          <p >
             Nos formations peuvent être accessibles aux personnes en situation
             de handicap. Chaque situation étant unique, nous vous demandons de
             préciser à l’inscription votre handicap. Nous pourrons ainsi
@@ -43,6 +53,8 @@
             haut-parleurs, préférablement des micro-casques pour un meilleur
             confort d’écoute.
           </p>
+          </div>
+
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -50,34 +62,18 @@
 </template>
 
 <style scoped>
-.title-container {
+.subtitle {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-left: 2rem;
-}
-
-.subtitle {
-  color: white;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
+  margin-left: auto;
+  margin-right: auto;
 }
 .details-participations {
-  font-family: "Barlow";
-  font-style: normal;
+  display: flex;
+  flex-direction: column;
+  text-align: justify;
+
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
@@ -88,11 +84,17 @@
 }
 
 .participation-img {
-  margin-top: 2rem;
-  width: 40%;
+  background-image: url("/images/formation/participation.jpg");
+  width: 900px;
+  height: 550px;
+  background-position: center;
+  background-size: cover;
+  border-radius: 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-left: auto;
   margin-right: auto;
-  border-radius: 20%;
 }
 .title-participation {
   font-family: "Barlow";
@@ -117,13 +119,4 @@
   background-color: #0e2d32;
   color: #ffffff;
 }
-.subtitile-inscription {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  color: #091d20;
-  margin-top: 1rem;
-}
 </style>

components/Formation/Presentation.vue

@@ -1,10 +1,11 @@
 <template>
   <div id="Présentation">
     <LayoutContainer>
-      <div class="title-container">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h4 class="subtitle">Présentation de nos formations</h4>
-      </div>
+      <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Présentation de nos formations'"
+        />
       <v-row class="container-programme">
         <v-col cols="6">
           <img class="programme-img1" src="/images/formation/programme2.jpg" />
@@ -42,7 +43,7 @@
             Afin de prendre en compte les évolutions de votre structure, nous
             pouvons enseuite organiser des sessions de formations spécifiques
             pour répondre à vos besoins : outils complets, mise en route,
-            fonctionnalités spécifiques, utilisation du site web...).
+            fonctionnalités spécifiques, utilisation du site web....
           </p>
         </v-col>
         <v-col cols="6">
@@ -107,8 +108,10 @@
   line-height: 20px;
   color: #091d20;
   width: 35rem;
+  text-align: justify; 
 }
 
+
 .title-programme {
   font-family: "Barlow";
   font-style: normal;
@@ -127,7 +130,7 @@
 }
 
 .programme-img1 {
-  width: 60%;
+  width: 80%;
   height: 100%;
   border-radius: 10%;
   margin-left: 5rem;

components/Home/Besoin.vue

@@ -1,135 +1,72 @@
 <template>
   <LayoutContainer :overflow="false">
-    <v-row class="white-container">
-      <v-row>
-        <v-col :cols="smAndDown ? 12 : 6">
-          <v-img
-            src="/images/eventAgenda/logiciel.png"
-            :class="smAndDown ? 'screen-img-sm' : 'screen-img'"
-          />
-        </v-col>
-        <div :class="smAndDown ? 'circle-sm' : 'circle'">
+    <v-row class="mt-6" justify="center">
+      <v-col cols="6" class="relative-container" >
+        <div class="screen-img"></div>
+        <div class="circle">
           <v-icon class="fa-brands fa-react icon" />
-          <div class="circle-text">
-            Réponse aux besoins
-          </div>
+          <div class="circle-text">Réponse aux besoins</div>
         </div>
-        <v-col cols="6">
-          <h3
-            :class="
-              smAndDown ? 'title-event-sm d-flex justify-center' : 'title-event'
-            "
-          >
-            Une solution évolutive pour vous donner entière satisfaction
-          </h3>
-
-          <p :class="smAndDown ? 'details-sm' : '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> Notifiez le nous et après l'étude de votre demande en
-            interne puis validation, nous intégrerons votre requête à notre
-            processus de développement.
-          </p>
-        </v-col>
-      </v-row>
+      </v-col>
+
+      <v-col cols="6">
+        <h3 class="title-event">
+          Une solution évolutive pour vous donner entière satisfaction
+        </h3>
+
+        <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 />
+          Notifiez le nous et après l'étude de votre demande en interne puis
+          validation, nous intégrerons votre requête à notre processus de
+          développement.
+        </p>
+      </v-col>
     </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
-const {  smAndDown } = useDisplay();
+const { smAndDown, mdAndDown } = useDisplay();
 </script>
 
 <style scoped>
-
-.bold{
-  
-}
-.btn-event-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  border-radius: 0.5rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  margin-top: 3rem;
-}
-.icon-arrow {
-  font-size: 1rem;
-  margin-left: 1rem;
-}
-.btn-container {
+.container {
   display: flex;
-  align-items: center;
+  flex-direction: row;
   justify-content: center;
-  padding: 0 20rem;
-}
-.btn-event {
-  font-family: "Barlow";
-  font-style: normal;
-  border-radius: 0.5rem;
-  margin-left: 7vw;
-  gap: 9px;
-  font-weight: 700;
-  font-size: 0.9rem;
-  line-height: 15px;
-  width: 18rem;
-  height: 3rem;
-  margin-top: 3rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  margin-bottom: 10rem;
 }
 
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  height: 9rem;
-  font-weight: 400;
-  font-size: 3rem;
-  line-height: 3rem;
-  text-align: center;
-  margin-bottom: 3rem;
-  margin-top: 4rem;
-  color: #ffffff;
-  width: 45rem;
+.relative-container {
+  position: relative;
 }
 
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.bold {
+  font-weight: bold;
 }
 
 .circle {
   position: absolute;
-  left: 35%;
+  top: 20%;
+  right: 0;
   margin-top: 0.5rem;
   width: 300px;
   height: 300px;
   background: #eff9fb;
   border-radius: 50%;
-}
-
-.circle-sm {
-  position: absolute;
-  left: 25%;
-  margin-top: 15rem;
-  width: 300px;
-  height: 300px;
-  background: #eff9fb;
-  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .icon {
   font-size: 3rem;
-  font-weight: bold;
-  color: #0e2d32;
-  margin-top: 6rem;
-  margin-left: 8rem;
 }
 .circle-text {
-  font-style: normal;
-  font-weight: 300;
   font-size: 22px;
   line-height: 26px;
   text-align: center;
@@ -140,8 +77,6 @@ const {  smAndDown } = useDisplay();
 }
 
 .title-event {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 38px;
@@ -149,20 +84,6 @@ const {  smAndDown } = useDisplay();
   margin-left: 2rem;
   color: #091d20;
   width: 16rem;
-  margin-left: 10rem;
-}
-
-.title-event-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1.5rem;
-  line-height: 38px;
-  margin-top: 13rem;
-  color: #091d20;
-  margin-left: 2rem;
-  width: 30rem;
-  text-align: center;
 }
 
 .details {
@@ -171,43 +92,19 @@ const {  smAndDown } = useDisplay();
   margin-top: 3rem;
   margin-left: 2rem;
   color: #091d20;
-  width: 16rem;
-  margin-left: 10rem;
-  font-family: "Barlow";
-  font-style: normal;
-}
-
-.details-sm {
-  font-weight: 400;
-  font-size: 1rem;
-  margin-top: 3rem;
-  margin-left: 2rem;
-  color: #091d20;
-  font-family: "Barlow";
-  font-style: normal;
-  width: 30rem;
-  text-align: center;
-}
-
-.container-sm {
-  margin-bottom: 60rem;
-}
-
-.white-container {
-  margin-top: 9rem;
-  background-color: #ffffff;
+  width: 20rem;
 }
 
 .screen-img {
-  margin-left: 8rem;
-  width: 60%;
-  border-radius: 20%;
-}
-
-.screen-img-sm {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
-  border-radius: 20%;
+  position: absolute;
+  right: 0;
+  margin-left: 3rem;
+  width: 600px;
+  height: 500px;
+  background-image: url("/images/eventAgenda/logiciel.png");
+  background-position: center;
+  background-size: cover;
+  border-radius: 10%;
+  margin-right: 10rem;
 }
 </style>

components/Home/Caroussel.vue

@@ -225,9 +225,9 @@ const carouselItems = ref([
 }
 .logo {
   max-width: 25vw;
-  height: 25vh;
+  height: 20vh;
   margin-top: 10px;
-  margin-left: 7rem;
+  margin-left: 4rem;
 }
 .description {
   text-align: left;

components/Home/EventAgenda.vue

@@ -7,35 +7,22 @@
       </h2>
     </div>
 
-    <v-row>
-      <v-col
-        cols="12"
-        :class="lgAndUp ? 'btn-container' : ''"
-      >
-        <v-col
-          md="12"
-          :cols="smAndDown ? 12 : 6"
-          class="d-flex justify-center"
-        >
-          <v-btn :class="smAndDown ? 'btn-event-sm' : 'btn-event'">
+    <v-row justify="center">
+      <div class="btn-container">
+        <v-col cols="12" md="6" >
+          <v-btn class="btn-event">
             Découvrir les évènements
             <v-icon class="fa-solid fa-arrow-right icon-arrow" />
           </v-btn>
         </v-col>
 
-        <v-col
-          md="12"
-          col="6"
-        >
-          <v-btn
-            v-if="lgAndUp"
-            class="btn-event"
-          >
+        <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>
-      </v-col>
+      </div>
     </v-row>
   </LayoutContainer>
 </template>
@@ -46,8 +33,6 @@ const { lgAndUp, smAndDown } = useDisplay();
 </script>
 
 <style scoped>
-
-
 .icon-arrow {
   font-size: 1rem;
   margin-left: 1rem;
@@ -60,7 +45,6 @@ const { lgAndUp, smAndDown } = useDisplay();
 }
 .btn-event {
   border-radius: 0.5rem;
-  margin-left: 9vw;
   gap: 9px;
   font-weight: 700;
   font-size: 0.9rem;
@@ -70,13 +54,6 @@ const { lgAndUp, smAndDown } = useDisplay();
   padding: 2.4rem 4rem;
   min-width: 20rem;
 }
-.btn-event-sm {
-  border-radius: 0.5rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  margin-top: 3rem;
-  
-}
 .title {
   height: 9rem;
   font-weight: 400;
@@ -95,9 +72,8 @@ const { lgAndUp, smAndDown } = useDisplay();
   align-items: center;
 }
 
-.container, 
-.container-sm
-{
+.container,
+.container-sm {
   height: 30rem;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     linear-gradient(
@@ -110,9 +86,4 @@ const { lgAndUp, smAndDown } = useDisplay();
   background-size: cover;
 }
 
-.container-sm {
-  margin-bottom: 60rem;
-}
-
-
 </style>

components/Home/Promotion.vue

@@ -229,7 +229,7 @@ const zoomOut = () => {
   font-weight: 400;
   font-size: 2rem;
   color: #0e2d32;
-  margin-top: -20rem;
+  margin-top: -30rem;
   margin-bottom: 3rem;
 }
 

components/Home/Reviews.vue

@@ -12,153 +12,140 @@
     <div v-if="!smAndDown" class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
-        <div class="content"></div>
-        <v-col cols="5" class="col-review">
-          <v-card class="review-card left mx-auto">
-            <v-avatar size="80" class="profile-img">
-              <v-img src="/images/reviews/photo1.jpg" />
-            </v-avatar>
-            <v-card-title>
-              <span class="review-name">Patrice CATHELIN</span>
-            </v-card-title>
-
-            <v-card-text>
-              <p class="description-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.
-              </p>
-            </v-card-text>
-
-            <!-- card footer-->
-            <small class="status">Directeur administratif & pédagogique</small>
-
-            <small class="structure"
-              >Conservatoire de Musique & de Danse de Sens (78)</small
-            >
-          </v-card>
-        </v-col>
-
-        <v-col cols="5" class="col-review">
-          <v-card class="review-card right mx-auto">
-            <v-avatar size="80" class="profile-img">
-              <v-img src="/images/reviews/photo1.jpg" />
-            </v-avatar>
-            <v-card-title>
-              <span class="review-name">Karine GIRAUD </span>
-            </v-card-title>
-
-            <v-card-text>
-              <p class="description-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
-              </p>
-            </v-card-text>
-
-            <!-- card footer-->
-            <small class="status">Secrétaire administrative</small>
-
-            <small class="structure">
-              Association Musicale Sainte Cécile de Lagord (17)</small
-            >
-          </v-card>
-        </v-col>
+        <div class="col-review">
+          <v-col cols="6">
+            <v-card class="review-card left mx-auto">
+              <!-- <v-avatar size="80" class="profile-img">
+                <v-img src="/images/reviews/photo1.jpg" />
+              </v-avatar> -->
+              <v-card-title>
+                <span class="review-name">Patrice CATHELIN</span>
+              </v-card-title>
+
+              <v-card-text>
+                <p class="description-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.
+                </p>
+              </v-card-text>
+              <div class="card-footer">
+                <!-- card footer-->
+                <small class="status"
+                  >Directeur administratif & pédagogique</small
+                >
+
+                <small class="structure"
+                  >Conservatoire de Musique & de Danse de Sens (78)</small
+                >
+              </div>
+            </v-card>
+          </v-col>
+
+          <v-col cols="6">
+            <v-card class="review-card right mx-auto">
+              <!-- <v-avatar size="80" class="profile-img">
+                <v-img src="/images/reviews/photo1.jpg" />
+              </v-avatar> -->
+              <v-card-title>
+                <span class="review-name">Karine GIRAUD </span>
+              </v-card-title>
+
+              <v-card-text>
+                <p class="description-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
+                </p>
+              </v-card-text>
+
+              <div class="card-footer">
+                <small class="status">Secrétaire administrative</small>
+
+                <small class="structure">
+                  Association Musicale Sainte Cécile de Lagord (17)</small
+                >
+              </div>
+            </v-card>
+          </v-col>
+        </div>
       </v-row>
 
       <v-row justify="center">
-        <!-- v-card with client review -->
-        <v-col cols="5" class="col-review">
-          <v-card class="review-card left mx-auto">
-            <v-avatar size="80" class="profile-img">
-              <v-img src="/images/reviews/photo1.jpg" />
-            </v-avatar>
-            <v-card-title>
-              <span class="review-name">Laurent BEL</span>
-            </v-card-title>
-
-            <v-card-text>
-              <p class="description-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é..
-              </p>
-            </v-card-text>
-
-            <!-- card footer-->
-            <small class="status">Directeur administratif & pédagogique </small>
-
-            <small class="structure">
-              École de Musique EPIC Musique en 4 Rivières (74)</small
-            >
-          </v-card>
-        </v-col>
-
-        <v-col cols="5" class="col-review">
-          <v-card class="review-card right mx-auto">
-            <v-avatar size="80" class="profile-img">
-              <v-img src="/images/reviews/photo1.jpg" />
-            </v-avatar>
-            <v-card-title>
-              <span class="review-name">Philippe BORY</span>
-            </v-card-title>
-
-            <v-card-text>
-              <p class="description-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.
-              </p>
-            </v-card-text>
-
-            <!-- card footer-->
-            <small class="status">Personnel administratif</small>
-
-            <small class="structure">
-              École d'Arts de Saint-Michel-sur-Orge (91)</small
-            >
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col cols="12">
-          <div class="d-flex justify-center align-center flex-column">
-            <h2 class="title text-center">
-              Plus de 5 000 structures nous font confiance
-            </h2>
-            <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left" />
+        <div class="col-review">
+          <!-- v-card with client review -->
+          <v-col cols="6">
+            <v-card class="review-card left mx-auto">
+              <!-- <v-avatar size="80" class="profile-img">
+                <v-img src="/images/reviews/photo1.jpg" />
+              </v-avatar> -->
+              <v-card-title>
+                <span class="review-name">Laurent BEL</span>
+              </v-card-title>
+
+              <v-card-text>
+                <p class="description-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é..
+                </p>
+              </v-card-text>
+              <div class="card-footer">
+                <!-- card footer-->
+                <small class="status"
+                  >Directeur administratif & pédagogique
+                </small>
+
+                <small class="structure">
+                  École de Musique EPIC Musique en 4 Rivières (74)</small
+                >
               </div>
-              <div class="carousel-button" @click="goNext">
-                <i class="fas fa-chevron-right" />
+            </v-card>
+          </v-col>
+
+          <v-col cols="6">
+            <v-card class="review-card right mx-auto">
+              <!-- <v-avatar size="80" class="profile-img">
+                <v-img src="/images/reviews/photo1.jpg" />
+              </v-avatar> -->
+              <v-card-title>
+                <span class="review-name">Philippe BORY</span>
+              </v-card-title>
+
+              <v-card-text>
+                <p class="description-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.
+                </p>
+              </v-card-text>
+              <div class="card-footer">
+                <!-- card footer-->
+                <small class="status">Personnel administratif</small>
+
+                <small class="structure">
+                  École d'Arts de Saint-Michel-sur-Orge (91)</small
+                >
               </div>
-            </div>
-          </div>
-        </v-col>
+            </v-card>
+          </v-col>
+        </div>
       </v-row>
 
-      <Carousel
-        ref="carousel"
-        class="carousel elevation-6"
-        :items-to-show="4"
-        :items-to-scroll="2"
-      >
-        <Slide v-for="(item, index) in items" :key="index">
-          <div class="card">
-            <v-img class="card-img" :src="item.src" alt="Card image cap" />
-          </div>
-        </Slide>
-      </Carousel>
+      <div class="content-review">
+        <LayoutCarouselTrustCompanie :items="items" :title-color="'#fff'"
+        :carousel-border-color="'#fff'" :carousel-button-color="'#fff'" :icon-color="'#fff'"/>
+
+      </div>
     </div>
   </LayoutContainer>
 </template>
@@ -171,79 +158,30 @@ import { useDisplay } from "vuetify";
 const { smAndDown } = useDisplay();
 const carousel = ref(null);
 
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
-const reviews = [
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    description:
-      "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.",
-    avatar: "/images/reviews/photo1.jpg",
-  },
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    avatar: "/images/reviews/photo1.jpg",
-    description:
-      "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.",
-  },
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    avatar: "/images/reviews/photo1.jpg",
-    description:
-      "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.",
-  },
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    avatar: "/images/reviews/photo1.jpg",
-    description:
-      "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.",
-  },
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    avatar: "/images/reviews/photo1.jpg",
-    description:
-      "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.",
-  },
-  {
-    name: "John Doe",
-    status: "DIRECTEUR PÉDAGOGIQUE",
-    structure: "Conservatoire Musique & Danse Sens (78)",
-    avatar: "/images/reviews/photo1.jpg",
-    description:
-      "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.",
-  },
-];
 const items = ref([
-  { src: "/images/reviews/review1.png" },
-  { src: "/images/reviews/review2.png" },
-  { src: "/images/reviews/review3.png" },
-  { src: "/images/reviews/review4.png" },
-  { src: "/images/reviews/review5.png" },
+  { src: "/images/reviews/school/review1.svg" },
+  { src: "/images/reviews/school/review2.png" },
+  { src: "/images/reviews/school/review3.png" },
+  { src: "/images/reviews/school/review4.jpeg" },
+  { src: "/images/reviews/school/review5.jpeg" },
+  { src: "/images/reviews/school/review6.jpeg" },
+
 ]);
 </script>
 
 <style scoped>
+.content-review {
+  margin-top: -7rem;
+}
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem;
+}
 .col-review {
   display: flex;
   justify-content: center;
   align-items: center;
-  justify-content: normal;
 }
 
 .left {
@@ -256,16 +194,6 @@ const items = ref([
   bottom: 7rem;
 }
 
-.title {
-  font-size: 2rem;
-  line-height: 42px;
-  text-align: center;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .icon-title {
   margin-top: 1rem;
   color: #64afb7;
@@ -289,35 +217,10 @@ const items = ref([
   margin-top: 1rem;
 }
 
-.card-img {
-  height: 10rem;
-  width: 10rem;
-  margin-left: auto;
-  margin-right: 5rem;
-  display: block;
-}
 
-.carousel {
-  background-color: white;
-  margin-top: 2rem;
-  border-radius: 20px;
-  width: 60rem;
-  margin-left: auto;
-  margin-right: auto;
-  box-shadow: #071b1f;
-}
-.carousel-sm {
-  background-color: white;
-  margin-top: 2rem;
-  border-radius: 20px;
-  box-shadow: #071b1f;
-}
 .container-green {
   background-color: #0e2d32;
-  height: 70rem;
-}
-.container-green-sm {
-  background-color: #0e2d32;
+  height: 60rem;
 }
 
 .status {
@@ -359,19 +262,14 @@ const items = ref([
   line-height: 20px;
 }
 
-.profile-img {
-  border-radius: 50%;
-  width: 3rem;
-  height: 4rem;
-  margin-left: 2rem;
-}
 .container-color {
   background: #f8f8f8;
   height: 25rem;
 }
 .review-card {
   width: 21rem;
-  height: 100%;
+  min-height: 22rem;
+  max-height: 22rem;
   margin-bottom: 2rem;
 }
 .review-name {
@@ -390,7 +288,7 @@ const items = ref([
   text-align: center;
   letter-spacing: 2.16px;
   text-transform: uppercase;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .title-review {

components/Home/Solution.vue

@@ -11,7 +11,7 @@
       Trouvez la solution faites pour vous
     </h3>
 
-    <v-row v-if="!smAndDown">
+    <v-row>
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
@@ -19,48 +19,54 @@
         class="col-info"
       >
         <v-container>
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">
-            {{ solution.name }}
-          </h2>
-          <hr class="bar" />
-          <p class="description-logiciel">
-            {{ solution.description }}
-          </p>
-
-          <nuxt-link :to="solution.link">
-            <v-row>
-              <div :class="solution.class" class="image-container">
-                <v-img :src="solution.image" class="logo" />
-                <v-btn  v-on:mouseover="mouseover" class="view-button">Découvrir</v-btn>
+          <div class="solution-content">
+            <small class="opentalent-small">Opentalent</small>
+            <h2 class="logiciel-name">
+              {{ solution.name }}
+            </h2>
+            <hr class="bar" />
+            <p class="description-logiciel">
+              {{ solution.description }}
+            </p>
+
+            <nuxt-link :to="solution.link">
+              <v-row>
+                <div :class="solution.class" class="image-container">
+                  <v-img :src="solution.image" class="logo" />
+                  <v-btn v-on:mouseover="mouseover" class="view-button"
+                    >Découvrir</v-btn
+                  >
+                </div>
+              </v-row>
+            </nuxt-link>
+
+            <v-row justify="center">
+              <div class="list-container">
+                <v-col cols="6">
+                  <ul class="list-solutions">
+                    <li
+                      v-for="(sol, i) in solution.solutions.slice(0, 4)"
+                      :key="'sol-' + i"
+                      class="details-solution"
+                    >
+                      {{ sol }}
+                    </li>
+                  </ul>
+                </v-col>
+                <v-col cols="6">
+                  <ul class="list-solutions">
+                    <li
+                      v-for="(sol, i) in solution.solutions.slice(4)"
+                      :key="'sol-' + i"
+                      class="details-solution"
+                    >
+                      {{ sol }}
+                    </li>
+                  </ul>
+                </v-col>
               </div>
             </v-row>
-          </nuxt-link>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-solutions">
-                <li
-                  v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                  :key="'sol-' + i"
-                  class="details-solution"
-                >
-                  {{ sol }}
-                </li>
-              </ul>
-            </v-col>
-            <v-col cols="6">
-              <ul class="list-solutions">
-                <li
-                  v-for="(sol, i) in solution.solutions.slice(4)"
-                  :key="'sol-' + i"
-                  class="details-solution"
-                >
-                  {{ sol }}
-                </li>
-              </ul>
-            </v-col>
-          </v-row>
+          </div>
         </v-container>
       </v-col>
     </v-row>
@@ -69,7 +75,6 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
 const { smAndDown } = useDisplay();
@@ -132,7 +137,7 @@ const solutions = [
       "Statistiques du réseau",
       "Cotisations",
       "Site internet intégré",
-      "Communication"
+      "Communication",
     ],
   },
 ];
@@ -142,7 +147,20 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.solution-content {
+  margin-top: 2rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  width: 20rem;
+  height: 40rem;
+  border-radius: 10px;
+}
 
+.list-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .image-container {
   position: relative;
 }
@@ -154,13 +172,12 @@ onMounted(() => {
   left: 50%;
   transform: translateX(-50%);
   display: none;
-  font-size: .8rem ;
+  font-size: 0.8rem;
   border-radius: 6px;
-  background: var(--Vert-60, #64AFB7);
+  background: var(--Vert-60, #64afb7);
   color: white;
 }
 
-
 .image-container:hover .view-button {
   display: block;
 }
@@ -183,48 +200,12 @@ onMounted(() => {
   width: 100%;
 }
 
-.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: #000000;
-}
-.solution-column {
-  margin-left: -0.5rem;
-}
-.logo-sm {
-  width: 8rem;
-  height: 4rem;
-  margin-top: 13rem;
-  margin-left: 0.5rem;
-}
 .logo {
   width: 10rem;
   height: 4rem;
   margin-top: 15rem;
 }
 
-.artist-image-sm {
-  position: relative;
-  background: url(/images/solutions/artist.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
 
 .artist-image::before {
   content: "";
@@ -243,17 +224,6 @@ onMounted(() => {
   opacity: 1;
   cursor: pointer;
 }
-.manager-image-sm {
-  position: relative;
-  background: url(/images/solutions/manager.png);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
 
 .manager-image::before {
   content: "";
@@ -288,18 +258,6 @@ onMounted(() => {
   cursor: pointer;
 }
 
-.school-image-sm {
-  position: relative;
-  background: url(/images/solutions/school.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
-
 .school-image::before {
   content: "";
   position: absolute;
@@ -318,12 +276,6 @@ onMounted(() => {
   cursor: pointer;
 }
 
-.solution-img {
-  width: 15rem;
-  height: 15rem;
-  object-fit: cover;
-  margin-top: 2rem;
-}
 
 .description-logiciel {
   font-family: "Barlow";
@@ -335,35 +287,6 @@ onMounted(() => {
   width: 20rem;
 }
 
-.description-logiciel-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 1.2rem;
-  color: #eff9fb;
-  line-height: 1.3rem;
-  margin-top: 1rem;
-  width: 20rem;
-  margin-right: auto;
-  text-align: left;
-}
-
-.logiciel-name-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 2rem;
-  color: #c3e5e7;
-  margin-bottom: 1rem;
-  margin-right: auto;
-  text-align: left;
-}
-
-.opentalent-small-sm {
-  margin-right: auto;
-  text-align: left;
-  color: #fff;
-}
 
 .opentalent-container {
   text-align: left;
@@ -387,34 +310,16 @@ onMounted(() => {
   line-height: 18px;
   color: #091d20;
 }
-.details-solution-sm {
-  margin-top: 0.9rem;
-  width: 9rem;
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  line-height: 18px;
-  color: #091d20;
-}
-
 .list-solutions {
   margin-top: 0.9rem;
   font-size: 0.5rem;
 }
 
-.list-solutions-sm {
-  margin-top: 1rem;
-  font-size: 1.3rem;
-}
 .bar {
   color: #c3e5e7;
   width: 20rem;
 }
 
-.bar-sm {
-  color: #c3e5e7;
-  width: 20rem;
-}
 .artist-image {
   position: relative;
   background: url(/images/solutions/artist.jpg);
@@ -504,21 +409,9 @@ onMounted(() => {
   cursor: pointer;
 }
 
-.col-info-sm {
-  width: 20rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-.solution-img {
-  width: 15rem;
-  height: 15rem;
-  object-fit: cover;
-  margin-top: 2rem;
-}
 
 .description-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
+  
   font-size: 1.3rem;
   line-height: 1.5rem;
   margin-top: 1rem;
@@ -526,8 +419,6 @@ onMounted(() => {
 }
 
 .logiciel-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 30px;
   line-height: 2rem;
@@ -536,8 +427,6 @@ onMounted(() => {
 }
 
 .opentalent-small {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 10px;
   line-height: 15px;
@@ -548,8 +437,9 @@ onMounted(() => {
 
 .container {
   background: #0e2d32;
-  margin-bottom: 29rem;
+  margin-bottom: 15rem;
   height: 35rem;
   position: relative;
 }
+
 </style>

components/Layout/Card/Stat.vue

@@ -12,7 +12,7 @@ import { defineProps } from 'vue'
 
 const props = defineProps({
   chiffre: {
-    type: [String, Number],
+    type:String,
     default: 'XXX',
   },
   text: {
@@ -21,7 +21,7 @@ const props = defineProps({
   },
   backgroundColor: {
     type: String,
-    default: '#fac20a', // Couleur de fond par défaut de la carte
+    default: '#fac20a', 
   },
 });
 </script>

components/Layout/Carousel/Fonctionnalite.vue

@@ -2,19 +2,23 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <LayoutUISubTitle
-          title-color="#fff"
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
-        />
-        <LayoutUITitle
-          title="Des fonctionnalités adaptées à vos besoins"
-          title-color="#fff"
-        />
         <v-row>
-          <v-col cols="12">
-            <div class="d-flex justify-center align-center">
+          <v-col cols="6">
+            <LayoutUISubTitle
+              title-color="#fff"
+              :iconSize="6"
+              :iconClasses="iconClasses"
+              :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
+              :iconColor="iconColor"
+            />
+            <LayoutUITitle
+              title="Des fonctionnalités adaptées à vos besoins"
+              title-color="#fff"
+            />
+          </v-col>
+
+          <v-col cols="6">
+            <div class="d-flex align-center">
               <div class="carousel-button" @click="previousAction">
                 <i class="fas fa-chevron-left"></i>
               </div>
@@ -24,27 +28,55 @@
             </div>
           </v-col>
         </v-row>
+
+        <v-row>
+          <v-col cols="12"> </v-col>
+        </v-row>
         <v-row>
           <v-col cols="12">
-            <Carousel ref="functionCarousel" :items-to-show="5" :items-to-scroll="1" class="carousel">
-              <Slide v-for="(card, index) in cards" :key="index" :class="{ card: true, 'active-card': index === activeCardIndex }">
+            <Carousel
+              ref="functionCarousel"
+              :items-to-show="5"
+              :items-to-scroll="1"
+              class="carousel"
+            >
+              <Slide
+                v-for="(card, index) in cards"
+                :key="index"
+                :class="{
+                  card: true,
+                  'active-card': index === activeCardIndex,
+                }"
+              >
                 <div class="card-container">
                   <v-card>
-                    <v-img :src="card.logo" :alt="card.title" class="mx-auto card-img" />
+                    <v-img
+                      :src="card.logo"
+                      :alt="card.title"
+                      class="mx-auto card-img"
+                    />
                     <v-card-title>
                       <h5 class="card-title">{{ card.title }}</h5>
                     </v-card-title>
                     <v-card-item>
                       <v-card-text class="review-description">
                         <ul>
-                          <li class="list-detail" v-for="item in card.list" :key="item">
+                          <li
+                            class="list-detail"
+                            v-for="item in card.list"
+                            :key="item"
+                          >
                             {{ item }}
                           </li>
                         </ul>
                       </v-card-text>
                       <div class="card-footer">
-                        <p class="reviewer-structure">
-                          {{ card.option }}
+                          <p
+                            class="reviewer-structure"
+                            v-for="option in card.options"
+                            :key="option"
+                          >
+                            {{ option }}
                         </p>
                       </div>
                     </v-card-item>
@@ -60,10 +92,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { Carousel, Slide } from 'vue3-carousel';
-import 'vue3-carousel/dist/carousel.css';
-import { useDisplay } from 'vuetify/lib/framework.mjs';
+import { ref, computed } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
 const props = defineProps({
   cards: Array,
@@ -82,12 +114,12 @@ const functionCarousel = ref(null);
 const activeCardIndex = ref(0);
 
 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 nextAction = () => {
@@ -97,28 +129,24 @@ const nextAction = () => {
 const previousAction = () => {
   functionCarousel.value.prev();
 };
-
 </script>
 
 <style scoped>
-
-.card-img{
+.card-img {
   width: 5rem;
   height: 3rem;
   margin-top: 1rem;
 }
 .list-detail {
   font-weight: 300;
-  font-size: .9rem;
+  font-size: 0.9rem;
   line-height: 1.2rem;
   margin-bottom: 1rem;
   color: #000000;
-  word-break: none ;
-  
+  word-break: none;
 }
 .card-title {
   white-space: pre-wrap;
-
 }
 .carousel {
   margin-left: 2rem;
@@ -163,13 +191,13 @@ const previousAction = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-top: 5rem;
 }
 
 .carousel-button i {
@@ -179,10 +207,8 @@ const previousAction = () => {
 .reviewer-structure {
   font-weight: 300;
   font-size: 0.8rem;
-  line-height: 14px;
   display: flex;
   align-items: center;
-  margin-bottom: 1rem;
   color: #071b1f;
 }
 
@@ -196,7 +222,7 @@ const previousAction = () => {
 }
 
 .card {
-  box-sizing: border-box; /* Assurez-vous que padding et border sont inclus dans la largeur de 80rem */
+  box-sizing: border-box;
 }
 
 .card {
@@ -208,11 +234,9 @@ const previousAction = () => {
 
 .v-card {
   border-radius: 1rem;
-  min-height: 25rem; /* Hauteur minimale pour la carte interne */
-  /* Assurez-vous que toutes les propriétés de padding et margin qui pourraient affecter la taille sont réglées ici */
+  min-height: 25rem;
 }
 
-
 .card-container {
   display: flex;
   justify-content: center;

components/Layout/Carousel/TrustCompanie.vue

@@ -1,25 +1,32 @@
 <template>
   <LayoutContainer :overflow="false">
     <v-row justify="center">
-      <h2 class="title">
-        Plus de 5 000 structures nous font confiance
+      <h2 class="title text-center" :style="{ color: titleColor }">
+        Plus de&nbsp;
+        <span style="color: #c3e5e7">{{ structureCount }}</span>&nbsp; {{ trustMessage }}
       </h2>
+    </v-row>
 
-      </v-row>
-      <v-row justify="center">
-      <div class="d-flex justify-center align-center">
-        <div
-          class="carousel-button"
-          @click="goPrevious"
-        >
-          <i class="fas fa-chevron-left" />
-        </div>
-        <div
-          class="carousel-button"
-          @click="goNext"
-        >
-          <i class="fas fa-chevron-right" />
-        </div>
+    <v-row justify="center">
+      <div
+        class="carousel-button"
+        @click="goPrevious"
+        :style="{
+          'border-color': carouselBorderColor,
+          color: carouselButtonColor,
+        }"
+      >
+      <i class="fas fa-chevron-left" :style="{ color: iconColor }" />
+      </div>
+      <div
+        class="carousel-button"
+        @click="goNext"
+        :style="{
+          'border-color': carouselBorderColor,
+          color: carouselButtonColor,
+        }"
+      >
+      <i class="fas fa-chevron-right" :style="{ color: iconColor }" />
       </div>
     </v-row>
 
@@ -29,16 +36,9 @@
       :items-to-show="4"
       :items-to-scroll="2"
     >
-      <Slide
-        v-for="(item, index) in items"
-        :key="index"
-      >
+      <Slide v-for="(item, index) in items" :key="index">
         <div class="card">
-          <v-img
-            class="card-img"
-            :src="item.src"
-            alt="Card image cap"
-          />
+          <v-img class="card-img" :src="item.src" alt="Card image cap" />
         </div>
       </Slide>
     </Carousel>
@@ -50,6 +50,22 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 const carousel = ref(null);
 
+const props = defineProps({
+  titleColor: String,
+  carouselButtonColor: String,
+  carouselBorderColor: String,
+  items: Array,
+  iconColor: String,
+  trustMessage: {
+    type: String,
+    default: 'nous font confiance' 
+  },
+  structureCount: {
+    type: String, 
+    default: '5000 structures'
+  }
+});
+
 const goPrevious = () => {
   carousel.value.prev();
 };
@@ -57,13 +73,7 @@ const goPrevious = () => {
 const goNext = () => {
   carousel.value.next();
 };
-const items = ref([
-  { src: "/images/reviews/review1.png" },
-  { src: "/images/reviews/review2.png" },
-  { src: "/images/reviews/review3.png" },
-  { src: "/images/reviews/review4.png" },
-  { src: "/images/reviews/review5.png" },
-]);
+
 </script>
 
 <style scoped>
@@ -75,8 +85,8 @@ const items = ref([
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid black;
   cursor: pointer;

components/Layout/FAQ.vue

@@ -25,7 +25,7 @@
             <div class="btn-container">
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-solid fa-circle icon-button" size="6" />
+                  <v-img src="/images/icons/tuto.svg" class="icon-button" />
                   <p class="text-btn">
                     De nombreux articles tutoriels accessibles 24h/24
                   </p>
@@ -34,9 +34,9 @@
 
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-solid fa-circle icon-button" size="6" />
+                  <v-img src="/images/icons/faq.svg" class="icon-button" />
                   <p class="text-btn">
-                    De nombreux articles tutoriels accessibles 24h/24
+                    Support accessible du lundi au vendredi via l’outil en ligne 
                   </p>
                 </div>
               </v-btn>
@@ -51,6 +51,10 @@
 <script setup></script>
 
 <style scoped>
+
+:deep().subtitle{
+  width: 20rem;
+}
 .container-left {
   margin-left: 6rem;
 }
@@ -69,9 +73,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  margin-top: 10rem;
-  margin-right: 15rem;
+  margin-top: 5rem;
 }
 
 .container-button {
@@ -85,14 +87,14 @@
 .icon-button {
   color: #fff;
   margin-right: 0.7rem;
-  margin-left: 2rem;
+  margin-left: 1rem;
   z-index: 1;
-  color: rgba(32, 147, 190);
+  width: 30px;
 }
 .btn-faq-tuto {
   z-index: 1;
 
-  width: 20rem;
+  width: 23rem;
   height: 5.5rem;
   margin-left: 3rem;
   border-radius: 6px;
@@ -139,14 +141,18 @@
   line-height: 1rem;
 }
 .title-faq {
-  font-size: 2rem;
-  font-weight: 500;
   color: #fff;
   font-family: "Barlow";
   margin-left: 3rem;
   margin-right: 15rem;
   width: 28rem;
   margin-bottom: 3rem;
+
+  color: var(--NEUTRAL---BLANC, #FFF);
+
+font-size: 30px;
+font-style: normal;
+font-weight: 400;
 }
 .container-title {
   display: flex;
@@ -163,12 +169,9 @@
 }
 .subtitle-faq {
   color: #fff;
-  margin-bottom: 2rem;
   font-family: "Barlow";
   width: 25rem;
   margin-right: 15rem;
-
-  font-family: Barlow;
   font-size: 1rem;
   font-style: normal;
   font-weight: 600;

components/Layout/Footer.vue

@@ -5,7 +5,7 @@
         <div class="content-footer">
           <v-row>
             <v-col
-              :cols="smAndDown ? 12 : 2"
+              :cols="smAndDown ? 12 : 3"
               :class="smAndDown ? 'logo-opentalent-sm' : 'flex-container'"
             >
               <v-img class="logo" src="/images/logo/footer-logo.png" />
@@ -271,6 +271,7 @@ const { smAndDown, lgAndUp } = useDisplay();
 
 .logo {
   margin-bottom: 3rem;
+  width: 25rem;
 }
 
 .logo-jaune {

components/Layout/UI/AvantageCard.vue

@@ -1,25 +1,31 @@
 <template>
   <LayoutContainer>
-    <div class="advantage-card">
-      <div class="title-card">
-        <h4 class="description-card">{{ title }}</h4>
-        <span class="number-card" :style="{ color: dynamicNumberColor }">{{ number }}</span>
-      </div>
+    <v-container>
+      <div class="advantage-card">
+        <div class="title-card">
+          <h4 class="description-card">{{ title }}</h4>
+          <span class="number-card" :style="{ color: dynamicNumberColor }">{{
+            number
+          }}</span>
+        </div>
+
+        <hr />
+        <div class="description-container">
+          <p class="details-card  mr-4">
+            {{ description }}
+          </p>
+          <ul class="dynamic-list ml-4 mr-4">
+            <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
+          </ul>
+        </div>
 
-      <hr />
-      <p class="details-card ml-2 mr-4">
-        {{ description }}
-      </p>
-      <ul class="dynamic-list ml-4 mr-4">
-        <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
-      </ul>
-      <div class="image-container">
-        <v-img :src="image" />
-        <v-chip class="chip-card" v-if="isMemberCMF">
-          <p class="cmf">Membre CMF</p>
-        </v-chip>
+        <div class="image-container" :style="backgroundImageStyle">
+          <!-- <v-chip class="chip-card" v-if="isMemberCMF">
+            <p class="cmf">Membre CMF</p>
+          </v-chip> -->
+        </div>
       </div>
-    </div>
+    </v-container>
   </LayoutContainer>
 </template>
 
@@ -33,11 +39,27 @@ const props = defineProps({
   image: String,
   isMemberCMF: Boolean,
   dynamicNumberColor: String,
-  listItems: Array
+  listItems: Array,
 });
+
+const backgroundImageStyle = computed(() => ({
+  backgroundImage: `url(${props.image})`,
+  backgroundSize: "cover ",
+  backgroundPosition: "center 10%",
+  width: "100£",
+  height: "400px",
+}));
 </script>
 
 <style scoped>
+
+.description-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 10rem;
+}
+
 .number-card {
   font-weight: 500;
   font-size: 1.3rem;
@@ -58,7 +80,7 @@ const props = defineProps({
 
 .dynamic-list {
   font-weight: normal;
-  font-size: .8rem;
+  font-size: 0.8rem;
   color: #091d20;
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -70,6 +92,7 @@ const props = defineProps({
   color: #091d20;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  height: 5rem;
 }
 .number-card {
   font-weight: 500;
@@ -87,43 +110,5 @@ const props = defineProps({
   margin-bottom: 1rem;
 }
 
-.row {
-  margin-top: 2rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
 
-.subtitle-avantage {
-  color: #071b1f;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-}
-
-
-.image-container {
-  position: relative;
-}
-
-.chip-card {
-  color: #000000;
-  position: absolute;
-  margin-left: 2rem;
-  top: 0;
-  left: 0;
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 16px;
-}
-
-.cmf {
-  color: #000000;
-}
 </style>

components/Layout/UI/Banner.vue

@@ -11,7 +11,11 @@
           <div class="black-square" :style="{ backgroundColor: squareColor }">
             <v-row>
               <div class="content-row">
-                <v-icon size="50"  class="fa-brands fa-react icon "  />
+                <img 
+                  src="/images/logiciels/icons/la-musique.svg" 
+                  alt="icon instrument de musique"
+                  class="custom-icon" 
+                />
                 <p class="description-square" :style="{ color: textColor }">
                   {{ squareText }}
                 </p>
@@ -73,6 +77,12 @@ const props = defineProps({
 
 <style scoped>
 
+.custom-icon {
+  width: 3rem;
+  height: 3rem;
+  margin-top: .5rem;
+}
+
 .black-square {
   position: absolute;
   bottom: 0.4rem;
@@ -93,8 +103,6 @@ const props = defineProps({
 }
 
 .description-square {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 0.8rem;
   text-align: center;

components/Layout/UI/ContainerVideo.vue

@@ -4,6 +4,13 @@
       <v-row class="container-green mt-12">
         <v-row>
           <v-col cols="6">
+            <LayoutUISubTitle
+              class="mt-6"
+              :iconSize="5"
+              :iconColor="iconColor"
+              :titleText="'Logiciel Opentalent School'"
+              :titleColor="'#ffffff'"
+            />
             <p class="citation-school">
               {{ currentCitation }}
             </p>
@@ -11,11 +18,7 @@
         </v-row>
 
         <v-col cols="6">
-          <div class="subtitle-logiciel">
-            <v-icon :size="10" class="fa-solid fa-circle icon-logiciel" :style="{color: iconColor}" />
-            <h6>{{ currentSubtitle }}</h6>
-          </div>
-          <v-img src="/images/logiciels/school/screen2.png" class="screen-img-3" />
+          <div class="screen-img-3"></div>
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -23,45 +26,39 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 const route = useRoute();
 
 const currentCitation = computed(() => {
   switch (route.path) {
-    case '/opentalent_school':
+    case "/opentalent_school":
       return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
-    case '/opentalent_artist':
+    case "/opentalent_artist":
       return "Le logiciel de gestion et communication au service de votre passion";
+    case "/opentalent_manager":
+      return "“ Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.“.";
     default:
       return "Citation par défaut";
   }
 });
 
-const currentSubtitle = computed(() => {
-  switch (route.path) {
-    case '/opentalent_school':
-      return "Logiciel Opentalent School";
-    case '/opentalent_artist':
-      return "LOGICIEL OPENTALENT ARTIST STANDARD";
-    default:
-      return "Sous-titre par défaut";
-  }
-});
-
 const iconColor = computed(() => {
-  if (route.path === '/opentalent_school') {
-    return 'rgba(32, 147, 190, 0.6)'; 
-  }
-  else if ( route.path === '/opentalent_artist')
-  return '#fac20a';
+  if (route.path === "/opentalent_school") {
+    return "rgba(32, 147, 190, 0.6)";
+  } else if (route.path === "/opentalent_artist") return "#fac20a";
 });
 </script>
 
-
 <style scoped>
-
+.screen-img-3 {
+  background-image: url("/images/logiciels/school/screen2.png");
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+}
 
 .citation-school {
   font-style: italic;
@@ -74,18 +71,6 @@ const iconColor = computed(() => {
   margin-top: 27rem;
   margin-left: 2rem;
 }
-.subtitle-logiciel {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 5rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
 
 .icon-logiciel {
   margin-right: 1rem;
@@ -95,7 +80,4 @@ const iconColor = computed(() => {
     rgba(7, 27, 31, 0.3);
   height: 40rem;
 }
-
-
-
 </style>

components/Layout/UI/Presentation.vue

@@ -4,130 +4,153 @@
       <v-row class="mt-12">
         <v-col cols="4">
           <LayoutUISubTitle
-            :iconSize="6"
+            :iconSize="5"
             :iconColor="iconColor"
             :titleText="titleText"
-
           />
           <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
 
-          <div :style="{ backgroundColor: backgroundColor }" class="rectangle-4">
-          <div :style="{ backgroundColor: circleColor }" class="black-circle">
-            <div class="content-flex">
-              <v-img
-                :src="logoSrc"
-                class="logo-manager"
-              />
-              <div class="pricing-details">
-                <p class="pricing-small-text">{{ pricingFromText }}</p>
-                <p class="pricing-big-text">
-                  {{ pricingAmount }} <span class="smaller-text">{{ pricingPeriodText }}</span>
-                </p>
-                <p class="pricing-small-text">{{ pricingAnnouncementText }}</p>
+          <div
+            :style="{ backgroundColor: backgroundColor }"
+            class="rectangle-4"
+          >
+            <div :style="{ backgroundColor: circleColor }" class="black-circle">
+              <div class="content-flex">
+                <v-img :src="logoSrc" class="logo-manager" />
+                <div class="pricing-details">
+                  <p class="pricing-small-text">{{ pricingFromText }}</p>
+                  <p class="pricing-big-text">
+                    {{ pricingAmount }}
+                    <span class="smaller-text">{{ pricingPeriodText }}</span>
+                  </p>
+                  <p class="pricing-small-text">
+                    {{ pricingAnnouncementText }}
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
         </v-col>
 
-        <v-col cols="6"  v-if="!mdAndDown">
+        <v-col cols="6">
           <LayoutUITitle :title="presentationText.toolTitle" />
           <ul class="outil-ul ml-12 mt-6">
-            <li class="outil-list" v-for="item in presentationText.toolList" :key="item">
+            <li
+              class="outil-list"
+              v-for="item in presentationText.toolList"
+              :key="item"
+            >
               {{ item }}
             </li>
           </ul>
-
-        </v-col>
-      </v-row>
-
-      <v-row class="row-custom">
-        <v-col cols="4" />
-        <v-col  cols="6">
-          <h2 class="mt-12 ml-12">{{ presentationText.characteristicsTitle }}</h2>
+          <h2 class="mt-12 ml-12 presentation-caracteristique">
+            {{ presentationText.characteristicsTitle }}
+          </h2>
+          <div class="row-custom">
             <div class="picto-container">
-              <div class="picto-group" v-for="picto in pictoImages" :key="picto.text">
-                <v-img :src="picto.src" class="picto-img" />
-                <p class="picto-text" :style="{ color: pictoColor }">{{ picto.text }}</p>
+              <div
+                class="picto-group"
+                v-for="picto in pictoImages"
+                :key="picto.text"
+              >
+                <div
+                  :style="{ backgroundImage: 'url(' + picto.src + ')' }"
+                  class="picto-img"
+                ></div>
+                <p class="picto-text" :style="{ color: pictoColor }">
+                  {{ picto.text }}
+                </p>
               </div>
             </div>
+          </div>
         </v-col>
-
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 const props = defineProps({
   pictoImages: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   pictoColor: {
     type: String,
-    default: '#000000'
+    default: "#000000",
   },
   presentationText: {
     type: Object,
     default: () => ({
-      toolTitle: 'Default Title',
+      toolTitle: "Default Title",
       toolList: [],
-      characteristicsTitle: 'Default Characteristics Title'
-    })
+      characteristicsTitle: "Default Characteristics Title",
+    }),
   },
-  // Ajouter de nouvelles props ici
   logoSrc: {
     type: String,
-    default: '/images/logo_school_white.png' 
+    default: "/images/logo_school_white.png",
   },
   pricingFromText: {
     type: String,
-    default: 'à partir de' 
   },
   pricingAmount: {
     type: String,
-    default: '32,90€' 
+    default: "sur devis",
   },
   pricingPeriodText: {
     type: String,
-    default: '/mois'
   },
   pricingAnnouncementText: {
     type: String,
-    default: 'payable annuellement' 
   },
   backgroundColor: {
     type: String,
-    default: 'rgba(32, 147, 190, 0.2)'
+    default: "rgba(32, 147, 190, 0.2)",
   },
   circleColor: {
     type: String,
-    default: '#091d20'
-  }
+    default: "#091d20",
+  },
 });
-const titleText = ref(''); 
-const iconColor = ref(''); 
+const titleText = ref("");
+const iconColor = ref("");
 
 const route = useRoute();
 
 onMounted(() => {
-  if (route.path.includes('opentalent_artist')) {
+  if (route.path.includes("opentalent_artist")) {
     titleText.value = "Présentation d'Opentalent Artist";
-    iconColor.value = '#fac20a'; 
-  } else if (route.path.includes('opentalent_school')) {
+    iconColor.value = "#fac20a";
+  } else if (route.path.includes("opentalent_school")) {
     titleText.value = "Présentation d'Opentalent School";
-    iconColor.value = 'rgba(32, 147, 190, 0.6)'; 
+    iconColor.value = "rgba(32, 147, 190, 0.6)";
+  } else if (route.path.includes("opentalent_manager")) {
+    titleText.value = "Présentation d'Opentalent Manager";
+    iconColor.value = "#d8050b";
   }
 });
 </script>
 
 <style scoped>
+.picto-img {
+  width: 200px;
+  height: 200px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
 
+.presentation-caracteristique {
+  color: #071b1f;
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 38px;
+}
 .row-custom {
-  margin-top: -18rem;
 }
 .pricing-details {
   display: flex;
@@ -139,7 +162,7 @@ onMounted(() => {
   font-weight: 500;
   font-size: 1rem;
   margin-left: 7rem;
-  margin-top: -1.5rem;
+  margin-top: -4rem;
   width: 10rem;
 }
 
@@ -148,8 +171,10 @@ onMounted(() => {
 }
 
 .pricing-big-text {
-  font-size: 1.6em;
+  font-size: 2.5rem;
   font-weight: bold;
+  line-height: 2rem;
+  margin-left: 1rem;
 }
 
 .smaller-text {
@@ -157,10 +182,7 @@ onMounted(() => {
 }
 .presentation-title {
   color: #071b1f;
-  font-family: Barlow;
   font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
   line-height: 15px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
@@ -182,11 +204,11 @@ onMounted(() => {
 }
 
 .logo-manager {
-  top: 1.2rem;
+  top: 0.2rem;
   z-index: 1;
 }
 .rectangle-4 {
-  width: 18rem;
+  width: 20rem;
   height: 6rem;
   background: rgba(32, 147, 190, 0.2);
   border-radius: 3rem;
@@ -211,8 +233,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: -4rem;
 }
 
 .icon-title {
@@ -239,7 +260,9 @@ onMounted(() => {
 }
 
 .outil-ul {
-  font-family: "Barlow";
+}
+
+.outil-list {
   margin-left: 1rem;
   font-weight: 300;
   font-size: 1rem;
@@ -260,10 +283,6 @@ onMounted(() => {
   display: flex;
   flex-direction: row;
 }
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
 
 .title {
   display: flex;
@@ -282,4 +301,3 @@ onMounted(() => {
   margin-left: 3rem;
 }
 </style>
-

components/Layout/UI/SolutionsFooter.vue

@@ -9,16 +9,18 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="!hideArtistRow"  class="row-artist">
-        <v-col cols="3">
-          <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
+      <v-row v-if="!hideArtistRow" class="row-artist">
+        <v-col cols="4">
+          <NuxtLink to="/opentalent_artist">
+            <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
+          </NuxtLink>
         </v-col>
 
-        <v-col cols="2">
+        <!-- <v-col cols="2">
           <h5 class="solution-name">Opentalent Artist</h5>
-        </v-col>
+        </v-col> -->
 
-        <v-col cols="7">
+        <v-col cols="8">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" label>
@@ -41,15 +43,17 @@
       </v-row>
 
       <v-row v-if="!hideManagerRow" class="row-manager">
-        <v-col cols="3">
+        <v-col cols="4">
+          <NuxtLink to="/opentalent_manager">
           <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
+        </NuxtLink>
         </v-col>
 
-        <v-col cols="2">
+        <!-- <v-col cols="2">
           <h5 class="solution-name">Opentalent Manager</h5>
-        </v-col>
+        </v-col> -->
 
-        <v-col cols="7">
+        <v-col cols="8">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" color="primary" label>
@@ -69,31 +73,39 @@
       </v-row>
 
       <v-row v-if="!hideSchoolRow" class="row-school">
-        <v-col cols="3">
+        <v-col cols="4">
+          <NuxtLink to="/opentalent_school">
           <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
+        </NuxtLink>
         </v-col>
 
-        <v-col cols="2">
+        <!-- <v-col cols="2">
           <h5 class="solution-name">Opentalent Artist</h5>
-        </v-col>
+        </v-col> -->
 
-        <v-col cols="7">
+        <v-col cols="8">
           <!-- list v-chip-->
           <v-chip-group active-class="primary--text" column>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Agenda</span>
+              <span class="chip-detail">Conservatoire</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Écoles d'art</span>
             </v-chip>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Facturation</span>
+              <span class="chip-detail">École de musique</span>
             </v-chip>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Comptabilité</span>
+              <span class="chip-detail">École de danse</span>
             </v-chip>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Communication</span>
+              <span class="chip-detail">École de théâtre</span>
             </v-chip>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Site internet</span>
+              <span class="chip-detail">École de cirque</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">MJC</span>
             </v-chip>
           </v-chip-group>
         </v-col>
@@ -107,10 +119,9 @@ import { useRoute } from "vue-router";
 
 const route = useRoute();
 
-// Check the URL and set variables to determine which rows to hide
 const hideManagerRow = route.path.includes("opentalent_manager");
 const hideArtistRow = route.path.includes("opentalent_artist");
-const hideSchoolRow = route.path.includes("opentalent_school");
+const hideSchoolRow = route.path.includes("opentalent_school") || route.path.includes("formation");
 </script>
 
 <style scoped>
@@ -152,7 +163,9 @@ const hideSchoolRow = route.path.includes("opentalent_school");
   color: #0e2d32;
 }
 
-.row-artist, .row-school, .row-manager {
+.row-artist,
+.row-school,
+.row-manager {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -170,7 +183,7 @@ const hideSchoolRow = route.path.includes("opentalent_school");
 }
 
 .logo {
-  width: 17rem;
+  width: 20rem;
   height: 10rem;
   margin-left: 2rem;
   margin-right: 2rem;

components/Layout/UI/StickyMenu.vue

@@ -6,13 +6,13 @@
           <v-row
             v-for="square in squares"
             :key="square.id"
-            :class="square.bgColor"
+            :class="['square', square.bgColor]"
             @click="() => handleSquareClick(square)"
           >
             <NuxtLink :to="square.url" class="link">
               <div>
                 <v-icon :class="square.iconClass" />
-                <p class="text-square">{{ square.text }}</p>
+                <p class="text-square mt-2">{{ square.text }}</p>
               </div>
             </NuxtLink>
           </v-row>
@@ -58,6 +58,15 @@ const isMobileDevice = () => {
 </script>
 
 <style scoped>
+.square {
+  transition: transform 0.3s ease-in-out; 
+}
+
+.square:hover {
+  transform: translateX(-10px); 
+}
+
+
 .link {
   text-decoration: none;
   color: white;
@@ -78,11 +87,13 @@ const isMobileDevice = () => {
 .red-square,
 .yellow-square,
 .blue-square,
-.darkblue-square {
+.darkblue-square,
+.green-square {
   position: relative;
   font-family: "Barlow";
-  width: 10rem;
+  width: 7rem;
   padding: 1rem;
+  cursor: pointer;
 }
 
 .yellow-square {
@@ -90,12 +101,16 @@ const isMobileDevice = () => {
   color: #0e2d32;
 }
 
+.green-square {
+  background: #9edbdd;
+}
+
 .red-square {
   background: #d8050b;
 }
 
 .blue-square {
-  background: rgb(125, 194, 198);
+  background: var(--Bleu-School-60, rgba(32, 147, 190));
 }
 
 .darkblue-square {
@@ -103,6 +118,5 @@ const isMobileDevice = () => {
 }
 
 .text-square {
-  margin: 0.5rem 2rem;
 }
 </style>

components/Layout/UI/SubTitle.vue

@@ -1,53 +1,88 @@
 <template>
   <LayoutContainer>
-  <div class="subtitle">
-    <v-icon :size="iconSize" :style="{ color: iconColor }" :class="iconClasses" />
-    <h4 class="presentation-title" :style="{ color: titleColor }">{{ titleText }}</h4>  </div>
-</LayoutContainer>
+    <div class="title-container">
+      <v-icon
+        :size="iconSize"
+        :style="{ color: iconColor }"
+        :class="iconClasses"
+      />
+      <h4 class="presentation-title" :style="{ color: titleColor }">
+        {{ titleText }}
+      </h4>
+    </div>
+  </LayoutContainer>
 </template>
 
 <script setup>
+const router = useRouter();
+
+const iconColor = ref("#2093BE4D");
+
+const updateIconColor = computed(() => {
+  const path = router.currentRoute.value.path;
+  switch (path) {
+    case "/opentalent_school":
+      return "#2093BE4D";
+    case "/opentalent_artist":
+      return "#FAC20A";
+    case "/opentalent_manager":
+      return "#D8050B";
+    default:
+      return "#9edbdd";
+  }
+});
+watch(
+  () => router.currentRoute.value,
+  () => {
+    iconColor.value = updateIconColor.value;
+  },
+  { immediate: true }
+);
+
 const props = defineProps({
   iconSize: {
     type: [String, Number],
-    default: 6,
+    default: 5,
   },
   iconClasses: {
     type: String,
-    default: 'fa-solid fa-circle icon-title',
+    default: "fa-solid fa-circle icon-title",
   },
   titleText: {
     type: String,
-    default: 'default title',
+    default: "default title",
   },
-  iconColor: { 
+  iconColor: {
     type: String,
-    default: 'rgba(32, 147, 190, 0.6)', 
   },
-  titleColor: { 
+  titleColor: {
     type: String,
-    default: '#071b1f', 
+    default: "#071b1f",
   },
 });
 </script>
 
 <style scoped>
-.subtitle {
+.title-container {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: 3rem;
-}
-
-.presentation-title {
+  margin-left: 1rem;
   color: #071b1f;
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
+  font-size: 10px;
   font-weight: 600;
   line-height: 15px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
 }
 
+.presentation-title {
+  font-weight: 500;
+  color: var(--Vert-90, #0E2D32); 
+
+  font-size: 1rem;
+  line-height: 15px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
 </style>

components/Layout/UI/Title.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   title: String,
   titleColor: {
     type: String,
-    default: "#000", // Default color is black, but it's overridden by passed props
+    default: "#0E2D32", 
   },
 });
 </script>
@@ -22,11 +22,10 @@ const props = defineProps({
 .title {
   font-weight: 600;
   font-size: 3rem;
-  line-height: 18px;
+  line-height: 3rem;
   color: inherit;
-  margin-left: 2rem;
-
-  line-height: 2.4rem;
+  margin-left: 1rem;
+  color: var(--Vert-90, #0E2D32); 
   width: 35rem;
 }
 </style>

components/Logiciels/Artist/Abonnement.vue

@@ -9,11 +9,14 @@
           :titleText="'S\'abonner dès maintenant'"
           :iconColor="'#fac20a'"
         />
-          <div class="profile-circle"></div>
+          <div class="profile-circle">
+            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png"></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="/lien-vers-le-formulaire" 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" class="download-button">Télécharger le formulaire d'abonnement</a>
           </div>
           <div class="subscription-steps">
             <ol>
@@ -42,10 +45,14 @@
             Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
           </h3>
           <div class="border-row">
-            <v-img
+            <!-- <v-img
               class="logo-cmf"
               src="/images/logiciels/school/cmf_logo_orange.png"
-            />
+            /> -->
+
+            <div class="logo-cmf">
+
+            </div>
             <div class="cmf-container">
 
               <p class="cmf-text">
@@ -169,18 +176,15 @@ line-height: 18px;
   margin-bottom: 4rem;
   width: 45rem;
 }
-.border-col {
-  border-top: 1px solid #e5e5e5;
-  border-right: 1px solid #e5e5e5;
-  height: 8rem;
-}
 .border-row {
+  text-align: justify;
   border: 1px solid #e5e5e5;
-  margin-right: 25rem;
   margin-bottom: 3rem;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  width: 50rem;
+  height: 15rem;
+  border-radius: 5%;
 }
 .cmf-container {
   margin-top: 4rem;
@@ -188,22 +192,22 @@ line-height: 18px;
 }
 
 .logo-cmf {
-  width: 8rem;
-  height: 10rem;
-  margin-top: 3rem;
-  margin-bottom: 4rem;
-  margin-right: 2rem;
   border-right: 1px solid #e5e5e5;
+  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 15rem; 
+  height: 10rem;
 }
 
 .cmf-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.3rem;
   color: #091d20;
-  width: 35rem;
+  width: 20rem;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  margin-left: 2rem;
 }
 .cmf {
   margin-top: 3rem;

components/Logiciels/Artist/Avantages.vue

@@ -1,67 +1,83 @@
-<template>
-  <div id="Avantages">
-    <LayoutContainer>
-      <v-row class="mt-12">
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez les avantages de la solution'"
-          :iconColor="'#fac20a'"
-        />
-      </v-row>
-      <LayoutUITitle title="Des avantages concrets" />
 
-      <v-row class="row">
-        <v-col cols="4" v-for="(card, index) in cards" :key="index">
-          <LayoutUIAvantageCard
-            :title="card.title"
-            :number="card.number"
-            :description="card.description"
-            :image="card.image"
-            :isMemberCMF="card.isMemberCMF"
-            :dynamicNumberColor="'#fac20a'"
+  <template>
+    <div id="Avantages">
+      <LayoutContainer>
+        <v-row class="row-custom">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Découvrez les avantages de la solution'"
+            :iconColor="'#fac20a'"
+
           />
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
-</template>
+          <LayoutUITitle title="Des avantages concrets" />
+        </v-row>
+
+        <v-row class="row-custom">
+          <v-col
+            cols="12"
+            md="4"
+            offset-md="1"
+            v-for="(card, index) in cards"
+            :key="index"
+          >
+            <LayoutUIAvantageCard
+              :title="card.title"
+              :number="card.number"
+              :description="card.description"
+              :image="card.image"
+              :isMemberCMF="card.isMemberCMF"
+              :numberColor="card.numberColor"
+              :dynamicNumberColor="'#fac20a'"
+
+            />
+          </v-col>
+        </v-row>
+      </LayoutContainer>
+    </div>
+  </template>
 
 <script setup>
 import { ref } from "vue";
 
+// Exemple de données pour les cartes
 const cards = ref([
   {
     title: "Un gain de temps",
     number: "01",
     description:
       "Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.",
-    image: "/images/logiciels/school/screen3.png",
+    image: "/images/avantages/school/temps.jpg",
     isMemberCMF: true,
-    numberColor: "#f9d648",
   },
   {
     title: "Une activité structurée",
     number: "02",
     description:
       "Des espaces dédiés et des outils spécifiques à vos besoins pour une gestion optimisée et une lecture simplifiée.",
-    image: "/images/logiciels/school/screen3.png",
+    image: "/images/avantages/school/struture.png",
     isMemberCMF: false,
-    numberColor: "#f9d648",
   },
   {
     title: "Une gestion collaborative",
     number: "03",
     description:
       "Grâce à des comptes dédiés, personnalisés et autonomes, permettez à vos membres de mettre à jour leurs informations et d'interagir dans leur agenda.",
-    image: "/images/logiciels/school/screen3.png",
+    image: "/images/avantages/school/collaborative.jpg",
     isMemberCMF: true,
-    numberColor: "#f9d648",
   },
 ]);
 </script>
+<style scoped>
 
-<style>
-
+.row-custom{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
 
-</style>
+</style>

components/Logiciels/Artist/Banner.vue

@@ -13,7 +13,7 @@
         <LayoutUIBanner
           :imageSrc="'/images/logiciels/artist/banner.jpg'"
           imageAlt="'line'"
-          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoireset MJC'"
+          :squareText="'Orchestres, chorales, compagnies de danse, de cirque et de théâtre  '"
           :logoSrc="'/images/logo/logiciels/Artist-noir.png'"
           :squareColor="'#fac20a'"
           :blueSquareColor="'#FFF'"

components/Logiciels/Artist/Comparatif.vue

@@ -8,7 +8,7 @@
           :iconColor="'#fac20a'"
         />
         <LayoutUITitle
-          title="Et si vous passiez à la version Premium"
+          title="Choisissez la version qui vous convient !"
         />
         <LayoutTableComparatif
         :standardPrice="'14€'"
@@ -50,20 +50,20 @@ const tableData = [
   {
     id: 5,
     column1: "COMMUNICATION",
-    column2: "check",
+    column2: "cross",
     column3: "check",
   },
   {
     id: 6,
     column1: "SMS",
-    column2: "check",
-    column3: "check",
+    column2: "Option",
+    column3: "Option",
   },
   {
     id: 6,
     column1: "NOM DE DOMAINE",
-    column2: "check",
-    column3: "check",
+    column2: "Option",
+    column3: "Option",
   },
   {
     id: 7,
@@ -92,8 +92,8 @@ const tableData = [
   {
     id: 11,
     column1: "EXTRANET UTILISATEURS",
-    column2: "cross",
-    column3: "Option",
+    column2: "75 comptes",
+    column3: "150 comptes",
   },
   {
     id: 12,
@@ -116,14 +116,14 @@ const tableData = [
   {
     id: 15,
     column1: "ESPACE DE STOCKAGE",
-    column2: "500 Mo",
+    column2: "100 Mo",
     column3: "1 Go",
   },
   {
     id: 16,
     column1: "PAGE DU SITE INTERNET",
-    column2: "restreint",
-    column3: "illimités",
+    column2: "Restreint",
+    column3: "Illimités",
   },
 ];
 </script>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -20,37 +20,18 @@
 
 <script setup>
 import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 
 const functionCarousel = ref(null);
-const activeCardIndex = ref(2);
-
-const previousAction = () => {
-  const newIndex = activeCardIndex.value - 1;
-  if (newIndex >= 0) {
-    activeCardIndex.value = newIndex;
-    functionCarousel.value.prev();
-  }
-};
-
-const nextAction = () => {
-  const newIndex = activeCardIndex.value + 1;
-  if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex;
-    functionCarousel.value.next();
-  }
-};
 
 const cards = [
   {
-    logo:"images/logiciels/school/fonctionnalites/Agenda.png",
+    logo:"images/logiciels/artist/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration / Membres / Adhérents"],
+    list: ["Administration", "Membres", "Adhérents", "Sur tous supports (ordinateur, tablette et smartphone)"],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
-
+    logo: "images/logiciels/artist/fonctionnalites/Repertoire.svg",
     title: "RÉPERTOIRE",
     list: [
       "Membres",
@@ -59,6 +40,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/Agenda.svg",
     title: "AGENDA",
     list: [
       "Création et gestion des événements internes et externes",
@@ -67,6 +49,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/Parc_materiel.svg",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -75,15 +58,17 @@ const cards = [
     ],
   },
   {
-    title: "COMMUNICATION",
+    logo: "images/logiciels/artist/fonctionnalites/Communication.svg",
+    title: "COMMUNICATION *",
     list: [
-      "Édition et envoi de courriers, de mails ou de SMS*",
-      "Création de modèles de courriers, mails ou SMS",
+      "Édition et envoi de courriers, de mails ou de SMS**",
+      "Création de modèles de courriers, mails ou SMS **",
       "Outil de publipostage intégré pour un envoi personnalisé",
     ],
-    option: "* en option",
+    options: ["* version Artist Premium ", "** en option"],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/Site_internet.svg",
     title: "SITE INTERNET ",
     list: [
       "Gestion intégrée au logiciel",
@@ -92,6 +77,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/Statistique.svg",
     title: "STATISTIQUE",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
@@ -100,6 +86,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/CMF-réseau-J.png",
     title: "RÉSEAU CMF ",
     list: [
       "Accès au répertoire du réseau",
@@ -108,6 +95,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/artist/fonctionnalites/Promotion.svg",
     title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
     list: [
       "Sur votre site internet intégré",

components/Logiciels/Artist/Formations.vue

@@ -14,10 +14,7 @@
 
         <v-row class="mt-12">
           <v-col cols="4">
-            <v-img
-              src="/images/logiciels/school/reunion.jpg"
-              class="reunion-img mb-12"
-            />
+            <div class="reunion-img"></div>
           </v-col>
 
           <v-col cols="6">
@@ -25,29 +22,43 @@
               Webinaire de découverte - Nouveaux utilisateurs
             </h3>
             <p class="formation-details mb-6">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              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>
-
-            <v-btn class="formation-btn mt-12"> S’incrire à une session </v-btn>
+            <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'"
+            />
+          </v-row>
       <v-row class="card-container mb-12">
         <v-col
           cols="3"
           class="d-flex justify-center align-center small-padding"
         >
           <LayoutCardStat
-            :chiffre="XXX"
+            :chiffre="'18 4634'"
             text="utilisateurs"
             backgroundColor="#fac20a"
           />
         </v-col>
         <v-col cols="3" class="d-flex justify-center align-center">
           <LayoutCardStat
-            :chiffre="XXX"
+            :chiffre="'3 424'"
             text="structures"
             backgroundColor="#fac20a"
           />
@@ -63,16 +74,23 @@
 
       <v-row />
 
-      <v-row>
-        <LogicielsSchoolCaroussel />
-      </v-row>
-
       <v-row />
+      <LayoutCarouselTrustCompanie  :items="items" :trustMessage="'nous ont déjà adoptées'" :structureCount="'3400 structures'"  />
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const items = ref([
+  { src: "/images/reviews/artist/review1.jpeg" },
+  { src: "/images/reviews/artist/review2.jpg" },
+  { src: "/images/reviews/artist/review3.jpeg" },
+  { src: "/images/reviews/artist/review4.jpg" },
+  { src: "/images/reviews/artist/review5.png" },
+  { src: "/images/reviews/artist/review6.jpeg" },
+
+]);
+</script>
 
 <style scoped>
 .carousel-button i {
@@ -146,11 +164,13 @@
   margin-bottom: 3rem;
 }
 .reunion-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 20%;
-  margin-left: 5rem;
+  margin-left: 3rem;
+  width: 600px;
+  height: 500px;
+  background-position: center;
+  background-size: cover;
+  border-radius: 10%;
+  background-image: url("/images/logiciels/artist/webinaire.jpg");
 }
 .subtitle {
   font-family: "Barlow";

components/Logiciels/Artist/MenuScroll.vue

@@ -122,14 +122,14 @@ const navigate = (menu) => {
   text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
-
 .v-chip.active-menu {
-  background: black;
+  background: var(--Vert-100, #091D20);;
   color: white;
 }
 
 .menu-container div:hover {
   cursor: pointer;
   text-decoration: underline;
+  z-index: 15;
 }
 </style>

components/Logiciels/Artist/Presentation.vue

@@ -1,39 +1,45 @@
-
 <template>
   <div>
     <LayoutUIPresentation
       :pictoImages="pictoData"
       :presentationText="presentationData"
-      :logoSrc="'images/logo/logiciels/Artist-Blanc.png'"
-      :pricingAmount="'15€'"
+      :logoSrc="'images/logo/logiciels/OT_Artist-BLANC.png'"
+      :pricingAmount="'14€'"
       :backgroundColor="'rgba(250, 194, 10, 0.2)'"
+      pricingFromText="à partir de"
+      pricingPeriodText="/mois"
+      pricingAnnouncementText="payable annuellement"
     />
   </div>
 
-  <LayoutUIContainerVideo
-      image-url="/images/logiciels/school/screen2.png"
-    />
+  <LayoutUIContainerVideo image-url="/images/logiciels/school/screen2.png" />
 </template>
 
 <script setup>
-
 const pictoData = [
-  { src: '/images/logiciels/artist/picto1.png', text: 'Logiciel de gestion et communication full web' },
-  { src: '/images/logiciels/artist/picto2.png', text: 'Site web intégré & simple d\'usage' },
-  { src: '/images/logiciels/artist/picto3.png', text: 'Boostez votre visibilité & communication' },
-  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' }
+  {
+    src: "/images/logiciels/artist/picto1.png",
+    text: "Logiciel de gestion et communication full web",
+  },
+  {
+    src: "/images/logiciels/artist/picto2.png",
+    text: "Site web intégré & simple d'usage",
+  },
+  {
+    src: "/images/logiciels/artist/picto3.png",
+    text: "Boostez votre visibilité & communication",
+  },
+  { src: "/images/logiciels/artist/picto4.png", text: "Communiquez en réseau" },
 ];
 
 const presentationData = {
-  toolTitle: 'Un outil complet en ligne',
+  toolTitle: "Un outil complet en ligne",
   toolList: [
-    'Logiciel de gestion et communication en ligne',
-    'Destiné aux établissements d\'enseignement artistique',
-    'Gestion quotidienne et en temps réel',
-    'Pilotage complet de votre structure'
+    "Logiciel de gestion et communication en ligne",
+    "Destiné aux structures culturelles (tout statut juridique)",
+    "Gestion complète (membres, événements, planning, matériel,...)",
+    "Une solution simple d'utilisation, intuitive et collaborative ",
   ],
-  characteristicsTitle: 'Des caractéristiques uniques & dédiées'
+  characteristicsTitle: "Des caractéristiques uniques & dédiées",
 };
 </script>
-
-

components/Logiciels/Artist/Reviews.vue

@@ -3,59 +3,43 @@
     <LayoutContainer>
       <div class="container-green">
         <v-row>
-          <v-col cols="4">
-            <h3 class="reviews-title">
-              C'est eux qui en parlent le mieux
-            </h3>
-            <div class="d-flex justify-center align-center">
-              <div
-                class="carousel-button"
-                @click="goPrevious"
-              >
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div
-                class="carousel-button"
-                @click="goNext"
-              >
-                <i class="fas fa-chevron-right" />
+          <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>
+              <div class="d-flex justify-center align-center">
+                <div class="carousel-button" @click="goPrevious">
+                  <i class="fas fa-chevron-left" />
+                </div>
+                <div class="carousel-button" @click="goNext">
+                  <i class="fas fa-chevron-right" />
+                </div>
               </div>
             </div>
           </v-col>
 
-          <v-col cols="8">
-            <Carousel
-              ref="carousel"
-              :items-to-show="3"
-              :items-to-scroll="1"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                class="card"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        {{ card.description }}
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p>
-                        <p class="reviewer-structure">
-                          {{ card.structure }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </div>
+          <v-col cols="9">
+            <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="1">
+              <Slide v-for="(card, index) in cards" :key="index" class="card">
+                <v-card>
+                  <v-card-item class="card-container">
+                    <v-card-text class="review-description">
+                      {{ card.description }}
+                    </v-card-text>
+
+                    <div class="card-footer">
+                      <v-card-actions class="reviewer-name">
+                        {{ card.name }}
+                      </v-card-actions>
+
+                      <p class="reviewer-status">
+                        {{ card.status }}
+                      </p>
+                      <p class="reviewer-structure">
+                        {{ card.structure }}
+                      </p>
+                    </div>
+                  </v-card-item>
+                </v-card>
               </Slide>
             </Carousel>
           </v-col>
@@ -83,10 +67,10 @@ const goNext = () => {
 const cards = [
   {
     description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "L'outil répond à toutes les demandes d'une structure de notre taille et la connexion avec le site internet est très pratique.",
+    name: "Patrice MONTESSUIT",
+    status: "Directeur musical ",
+    structure: "Orchestre d'Harmonie de Cluses (74)",
   },
   {
     description:
@@ -97,10 +81,10 @@ const cards = [
   },
   {
     description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "C'est un outil de travail très intéressant, complet et intuitif quand on comprend certaines subtilités. Il a très bien évolué aussi bien pour les chorales que les harmonie. Mes remarques ont toujours été prises en compte.",
+    name: "Gérard LEFÈBVRE ",
+    status: "Président",
+    structure: "Le choeur du Brevon (74)",
   },
   {
     description:
@@ -124,31 +108,27 @@ const cards = [
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-bottom: 2rem;
 }
 
 .carousel-button i {
   color: #fff;
 }
 .reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
-  color: #f9d648;
+  color: #f7d241;
+  margin-top: 5rem;
 }
 
 .reviewer-status {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -159,8 +139,6 @@ const cards = [
 }
 
 .reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 0.8rem;
   line-height: 14px;
@@ -172,53 +150,52 @@ const cards = [
 
 .review-description {
   text-align: left;
+  max-height: 200px;
+  overflow: auto;
+  font-size: 0.9rem;
 }
+
 .card-footer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  margin-left: 5.5rem;
-  margin-top: 3rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
 }
 
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  height: 12rem;
-}
 .reviews-title {
   font-size: 2rem;
   font-weight: 700;
   color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
-  margin-left: 3rem;
-  margin-right: 3rem;
-  margin-top: 5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-top: 3rem;
   text-align: center;
 }
 
 .card {
-  width: 80rem;
   margin-left: 0.5rem;
   border-radius: 1rem;
 }
 
+.v-card {
+  border-radius: 1rem;
+  min-height: 25rem;
+  max-height: 25rem;
+  min-width: 25rem;
+  max-width: 25rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .card-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
 .container-green {

components/Logiciels/Manager/Accompagnement.vue

@@ -1,231 +0,0 @@
-<template>
-  <div id="Formations">
-    <LayoutContainer>
-      <div class="container-green">
-        <div class="container-title">
-          <v-icon class="fa-solid fa-circle icon-title" size="6" />
-          <h4 class="subtitle-accompagnement">
-            Nos accompagnements pour aller plus loin
-          </h4>
-        </div>
-
-        <div class="image-container">
-          <v-row>
-            <v-col cols="6">
-              <div class="session-description">
-                <v-img
-                  src="/images/logiciels/manager/Webinaire.png"
-                  class="accompagnement-img left-img"
-                />
-
-                <small class="session left">X sessions disponibles</small>
-                <h5 class="session-name left">
-                  Formation prise en main du logiciel
-                </h5>
-                <p class="session-details left">
-                  Destinée aux nouveaux utilisateurs, elle est obligatoire lors
-                  de l'acquisition du logiciel. Elle est également utile lors
-                  d'un changement de personnel dans la structure.
-                </p>
-                <v-btn class="session-btn left">
-                  S’incrire à une formation
-                </v-btn>
-              </div>
-            </v-col>
-
-            <v-col cols="6">
-              <div class="session-description">
-                <v-img
-                  src="/images/logiciels/manager/Webinaire.png"
-                  class="accompagnement-img"
-                />
-
-                <small class="session">X sessions disponibles</small>
-                <h5 class="session-name">
-                  Formation prise en main du logiciel
-                </h5>
-                <p class="session-details">
-                  Destinée aux nouveaux utilisateurs, elle est obligatoire lors
-                  de l'acquisition du logiciel. Elle est également utile lors
-                  d'un changement de personnel dans la structure.
-                </p>
-                <v-btn class="session-btn">
-                  S’incrire à une formation
-                </v-btn>
-              </div>
-            </v-col>
-          </v-row>
-        </div>
-      </div>
-
-      <v-row class="card-container mb-12">
-        <v-col
-          cols="4"
-          class="d-flex justify-center align-center small-padding"
-        >
-          <LayoutCardStat
-            :chiffre="XXX"
-            text="Structures en réseau"
-            backgroundColor="#d8050b"
-          />
-        </v-col>
-        <v-col cols="4" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="XXX"
-            text="Utilisateurs"
-            backgroundColor="#d8050b"
-          />
-        </v-col>
-        <v-col cols="4" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="XXX"
-            text="années de collaboration"
-            backgroundColor="#d8050b"
-          />
-        </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"
-      />
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.cmf-img {
-  width: 30%;
-  margin-left: 35rem;
-  height: 50%;
-  text-align: center;
-  margin-bottom: 4rem;
-}
-
-.title-cmf {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 2.5rem;
-  line-height: 2.5rem;
-  text-align: center;
-  margin-left: 25rem;
-  margin-right: 25rem;
-}
-.card-container {
-  transform: translateY(-40%);
-  margin-left: 25rem;
-  margin-right: 25rem;
-}
-.card {
-  background: #d8050b;
-  border-radius: 10px;
-  padding-left: 5rem;
-  padding-right: 5rem;
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  color: white;
-  text-align: center;
-}
-.session-btn {
-  background: transparent;
-  border-radius: 1rem;
-  border: 1px solid #c1eff0;
-  color: #091d20;
-  font-family: "Barlow";
-  color: #c1eff0;
-  margin-bottom: 10rem;
-}
-
-.session-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  width: 15rem;
-  color: #ffffff;
-}
-
-.session-details {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: normal;
-  font-size: 0.8rem;
-  width: 17rem;
-  color: #eff9fb;
-  margin-bottom: 2rem;
-}
-.left {
-  margin-left: 24rem;
-}
-
-.session {
-  color: #c1eff0;
-}
-
-.session-description {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-.accompagnement-img::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 255, 0.1);
-  pointer-events: none;
-}
-
-.left-img {
-  margin-left: 24rem;
-}
-.image-container {
-  display: flex;
-  justify-content: space-around;
-}
-
-.accompagnement-img {
-  width: 50%;
-  height: 90%;
-  border-radius: 2rem;
-  margin-bottom: 1rem;
-}
-.subtitle-accompagnement {
-  color: white;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-.container-title {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  margin-bottom: 2rem;
-}
-
-.icon-title {
-  margin-top: 2rem;
-  margin-bottom: 0.5rem;
-  /** red*/
-  color: #d8050b;
-  size: .5rem;
-}
-
-.container-green {
-  background: #0e2d32;
-}
-</style>

components/Logiciels/Manager/Avantages.vue

@@ -1,28 +1,36 @@
-<template>
+
+
+  <template>
   <div id="Avantages">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class=" row-custom" >
+     
+
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
           :titleText="'Découvrez les avantages de la solution'"
           :iconColor="'#E34461'"
         />
+        <LayoutUITitle title="Des avantages concrets pour un outil..." />
+
       </v-row>
-      <LayoutUITitle title="Des avantages concrets" />
 
-      <v-row class="row">
-        <v-col cols="4" v-for="(card, index) in cards" :key="index">
+      <v-row class="row-custom"  >
+
+        <v-col cols="12" md="4" offset-md="1"  v-for="(card, index) in cards" :key="index">
           <LayoutUIAvantageCard
             :title="card.title"
             :number="card.number"
             :description="card.description"
             :image="card.image"
             :isMemberCMF="card.isMemberCMF"
+            :numberColor="card.numberColor"
             :dynamicNumberColor="'#E34461'"
-            :listItems="card.listItems"
+
           />
         </v-col>
+
       </v-row>
     </LayoutContainer>
   </div>
@@ -40,6 +48,7 @@ const cards = ref([
       "S'adapte à tous les réseaux de type pyramidal, quelque soit le nombre de niveaux :",
     numberColor: "#f9d648",
     listItems: ["Fédérations", "Institutions publiques"],
+    image: "/images/avantages/manager/Sur-mesure.jpg",
   },
   {
     title: "Adapté",
@@ -48,6 +57,8 @@ const cards = ref([
       "Chaque structure du réseau dispose de sa propre solution indépendante et connectée au réseau :",
     numberColor: "#f9d648",
     listItems: ["Opentalent manager", "Opentalent school", "Opentalent artist"],
+    image: "/images/avantages/manager/Adapte.jpg",
+
   },
   {
     title: "Économique",
@@ -55,6 +66,8 @@ const cards = ref([
     description:
       "Une solution éprouvée au niveau national, sans avoir à supporter de coûts de développement importants pour ce type de logiciel.",
     numberColor: "#f9d648",
+    image: "/images/avantages/manager/Economique.jpg",
+
   },
   {
     title: "De pilotage",
@@ -62,6 +75,8 @@ const cards = ref([
     description:
       "Pilotez votre réseau de manière quotidienne et en temps réel. Gagnez du temps avec notre solution qui génère automatiquement un rapport d'activité complet.",
     numberColor: "#f9d648",
+    image: "/images/avantages/manager/Pilotage.jpg",
+
   },
   {
     title: "En réseau",
@@ -69,6 +84,8 @@ const cards = ref([
     description:
       "Mise à jour automatique des coordonnées publiques entre les membres du réseau..",
     numberColor: "#f9d648",
+    image: "/images/avantages/manager/En-reseau.jpg",
+
   },
   {
     title: "Confidentiel",
@@ -76,8 +93,24 @@ const cards = ref([
     description:
       "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",
+
   },
 ]);
 </script>
 
-<style></style>
+<style>
+:deep().description-container {
+  height: 15rem;
+}
+
+.row-custom{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

components/Logiciels/Manager/FAQ.vue

@@ -1,182 +0,0 @@
-<template>
-  <LayoutContainer>
-    <div class="container-img">
-      <v-row>
-        <v-col cols="6">
-          <div class="container-left">
-            <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title" />
-              <h5 class="subtitle-faq">
-                Vous voulez tirer le meilleur de notre logiciel ?
-              </h5>
-            </div>
-            <h3 class="title-faq">
-              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>
-          </div>
-        </v-col>
-
-        <v-col cols="6">
-          <div class="btn-container">
-            <v-btn class="btn-faq-tuto">
-              <div class="container-button">
-                <v-icon class="fa-brands fa-react 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-icon class="fa-brands fa-react icon-button" />
-                <p class="text-btn">
-                  De nombreux articles tutoriels accessibles 24h/24
-                </p>
-              </div>
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.container-left {
-  margin-left: 6rem;
-}
-
-.text-btn {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 26px;
-  color: #f0e8e4;
-}
-.btn-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10rem;
-  margin-right: 15rem;
-}
-
-.container-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 20rem;
-  height: 3.5rem;
-}
-
-.icon-button {
-  color: #fff;
-  font-size: 2rem;
-  margin-right: 1rem;
-  margin-left: 2rem;
-}
-.btn-faq-tuto {
-  width: 20rem;
-  height: 5.5rem;
-  margin-left: 3rem;
-  border-radius: 6px;
-  font-family: "Barlow";
-  background: transparent;
-  color: #fff;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  line-height: 1rem;
-  border: 1px white solid;
-  margin-bottom: 2rem;
-  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;
-}
-.btn-faq {
-  width: 14rem;
-  height: 3.5rem;
-  margin-left: 3rem;
-  background: #ffffff;
-  border-radius: 6px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  text-transform: none !important;
-  line-height: 1rem;
-}
-.title-faq {
-  font-size: 2rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  font-family: "Barlow";
-  margin-left: 3rem;
-  margin-right: 15rem;
-}
-.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 {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  margin-top: 5rem;
-  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;
-}
-.container-img {
-  background-image: url("/images/logiciels/school/faq.jpg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 35rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-</style>

components/Logiciels/Manager/Fonctionnalites.vue

@@ -24,11 +24,12 @@ const functionCarousel = ref(null);
 
 const cards = [
   {
+    logo:"images/logiciels/manager/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS",
     list: ["Administration / Membres  / Adhérents"],
   },
   {
-    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
+    logo: "images/logiciels/manager/fonctionnalites/Repertoire.svg",
 
     title: "RÉPERTOIRE",
     list: [
@@ -38,6 +39,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Agenda.svg",
     title: "AGENDA",
     list: [
       "Création et gestion des événements internes et externes",
@@ -46,6 +48,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Parc_materiel.svg",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -54,6 +57,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/communication.svg",
     title: "COMMUNICATION RESEAU",
     list: [
       "Édition et envoi de courriers, de mails ou de SMS*",
@@ -64,6 +68,7 @@ const cards = [
     option: "* en option",
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Site_internet.svg",
     title: "SITE INTERNET ",
     list: [
       "Gestion intégrée au logiciel",
@@ -72,6 +77,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Statistiques.svg",
     title: "STATISTIQUE",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
@@ -80,6 +86,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Cotisation.svg",
     title: "COTISATION CMF ",
     list: [
       "Paramètrage des cotisations",
@@ -88,6 +95,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/manager/fonctionnalites/Fonctionnement_pyramidal.svg",
     title: "FONCTIONNEMENT PYRAMIDAL ",
     list: [
       "Publication des événements des structures de votre réseau ",

components/Logiciels/Manager/Formation.vue

@@ -0,0 +1,195 @@
+<template>
+  <div id="Formations">
+    <LayoutContainer>
+      <div class="container-green mt-12">
+        <v-row>
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Nos accompagnements pour aller plus loin '"
+            title-color="#fff"
+          />
+        </v-row>
+        <v-row class="mb-6">
+          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
+            <div class="image-wrapper mb-6">
+              <div :class="formation.overlayClass"></div>
+              <div
+                :style="{ backgroundImage: 'url(' + formation.image + ')' }"
+                class="background-img"
+              ></div>
+            </div>
+            <div class="col-details">
+              <h4 class="session-title">
+                {{ formation.sessions }}
+              </h4>
+              <h3 class="formation-title">{{ formation.title }}</h3>
+              <p class="formation-details">{{ formation.description }}</p>
+              <br />
+            </div>
+            <nuxt-link :to="formation.link">
+              <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
+            </nuxt-link>
+          </v-col>
+        </v-row>
+      </div>
+      <v-row>
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="' Quelques chiffres'"
+          class="mt-6"
+        />
+      </v-row>
+      <v-row class="card-container mt-6 mb-12">
+        <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>
+        <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>
+        </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" />
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+const formations = ref([
+  {
+    id: 1,
+    image: "/images/logiciels/school/formation.png",
+    overlayClass: "image-overlay1",
+    sessions: "Formation sur-mesure",
+    title: " Des formations adaptées à votre projet - en ligne",
+    description:
+      "Chaque projet de solution de mise en réseau d'organisation nécessite un accompagnement sur-mesure par notre équipe de formation en fonction de vos besoins.",
+    buttonText: "Formation sur-mesure",
+    link: "/nous-contacter",
+  },
+  {
+    id: 2,
+    image: "/images/logiciels/school/webinaire.png",
+    overlayClass: "image-overlay2",
+    sessions: "Webinaire CMF Réseau",
+    title: "Trouvez le webinaire qu'il vous faut ",
+    description:
+      "Des explications précises sur certains modules du logiciel Opentalent Manager, c'est possible pour aller encore plus loin... ",
+    buttonText: "Découvrir nos webinaires ",
+    link: "/webinaires",
+  },
+]);
+const items = ref([
+  { src: "/images/reviews/school/review1.svg" },
+  { src: "/images/reviews/school/review2.png" },
+  { src: "/images/reviews/school/review3.png" },
+  { src: "/images/reviews/school/review4.jpeg" },
+  { src: "/images/reviews/school/review5.jpeg" },
+  { src: "/images/reviews/school/review6.jpeg" },
+]);
+</script>
+
+<style scoped>
+
+.cmf-img{
+  width: 50rem;
+  height: 20rem;
+  margin-top: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+.image-wrapper {
+  position: relative;
+}
+.background-img {
+  width: 600px;
+  margin-left: 5rem;
+  height: 400px;
+  background-size: cover;
+  background-position: center;
+}
+
+.col-details {
+  margin-right: 6rem;
+  margin-left: 5rem;
+  height: 15rem;
+}
+
+.formation-btn {
+  margin-left: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  width: 30rem;
+  height: 4rem;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 18px;
+  background: transparent;
+  color: #eff9fb;
+  border: 1px solid #eff9fb;
+  border-radius: 0.5rem;
+  text-transform: none;
+}
+.formation-details {
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.5rem;
+  color: #eff9fb;
+}
+.formation-title {
+  font-weight: 500;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-bottom: 3rem;
+}
+
+.session-title {
+  font-weight: 500;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-bottom: 3rem;
+}
+
+.container-green {
+  background-color: #0e2d32;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: white;
+}
+
+.card-container {
+  margin-bottom: 20px;
+  margin-left: 10rem;
+  margin-right: 0rem;
+}
+</style>

components/Logiciels/Manager/MenuScroll.vue

@@ -32,11 +32,9 @@ import { ref, onMounted, onUnmounted, reactive } from 'vue';
 const refs = reactive({
   Presentation: null,
   Avantages: null,
-  Comparatif: null,
-  Fonctionnatités: null,
-  Abonnement: null,
+  Fonctionnalites: null,
+  Formations: null,
   Temoignages: null,
-  Formations: null
 });
 
 const isSticky = ref(false);
@@ -78,11 +76,9 @@ onMounted(() => {
 const menus = [
   { label: "Presentation" },
   { label: "Avantages" },
-  { label: "Comparatif" },
-  { label: "Fonctionnatités" },
-  { label: "Abonnement" },
-  { label: "Temoignages" },
+  { label: "Fonctionnalites" },
   { label: "Formations" },
+  { label: "Temoignages" },
 ];
 
 const activeMenu = ref(menus[0].label);
@@ -123,12 +119,14 @@ const navigate = (menu) => {
   border-bottom: 0.1rem solid #eaeaea;
 }
 .v-chip.active-menu {
-  background: black;
+  background: var(--Vert-100, #091D20);;
   color: white;
 }
 
 .menu-container div:hover {
   cursor: pointer;
   text-decoration: underline;
+  z-index: 15;
 }
 </style>
+

components/Logiciels/Manager/Presentation.vue

@@ -1,370 +1,75 @@
 <template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <v-row class="outil-row">
-        <v-col cols="4">
-          <div class="title-container">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle">Présentation d'opentalent Manager</h4>
-          </div>
-          <v-img
-            src="/images/logiciels/school/screen.jpg"
-            class="screen-img"
-          />
-
-          <div class="rectangle-4">
-            <div class="black-circle">
-              <div class="content-flex">
-                <v-img
-                  src="/images/logo/logiciels/Manager-Blanc.png"
-                  class="logo-manager"
-                />
-                <p class="devis">
-                  Sur devis
-                </p>
-              </div>
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="5">
-          <h2 class="outil-title">
-            La solution de mise en réseau des organisations culturelles
-          </h2>
-          <ul class="outil-ul">
-            <li class="outil-list">
-              Logiciel de gestion et communication en ligne
-            </li>
-            <li class="outil-list">
-              Répond aux besoin globaux des réseaux culturels
-            </li>
-            <li class="outil-list">
-              Gestion collaborative
-            </li>
-            <li class="outil-list">
-              Mise en valeur des activités des membres du réseau
-            </li>
-          </ul>
-        </v-col>
-
-        <v-row>
-          <v-col cols="4" />
-
-          <v-col cols="5">
-            <h2>Des caractéristiques uniques & dédiées</h2>
-            <div class="picto-container">
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto1.png"
-                />
-                <p class="picto-text">
-                  Logiciel de gestion & communication full web
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto2.png"
-                />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto3.png"
-                />
-                <p class="picto-text">
-                  Site web intégré & simple d'usage
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto4.png"
-                />
-                <p class="picto-text">
-                  Communiquez en réseau
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto5.png"
-                />
-                <p class="picto-text">
-                  Sur-Mesure
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/manager/picto6.png"
-                />
-                <p class="picto-text">
-                  Pour tout réseau de type pyramidal
-                </p>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="2" />
-        </v-row>
-      </v-row>
-    </LayoutContainer>
-  </div>
+  <LayoutContainer>
+    <div id="Presentation">
+      <LayoutUIPresentation
+        :pictoImages="pictoData"
+        :presentationText="presentationData"
+        :logoSrc="'images/logo/logiciels/OT_Manager-BLANC.png'"
+        :backgroundColor="'rgba(216, 5, 11, 0.2)'"
+      />
+    </div>
+
+    <LayoutUIContainerVideo image-url="/images/logiciels/school/screen2.png" />
+  </LayoutContainer>
 </template>
 
-<script setup></script>
+<script setup>
+const pictoData = [
+  {
+    src: "/images/logiciels/manager/picto1.png",
+    text: "Logiciel de gestion et communication full web",
+  },
+  {
+    src: "/images/logiciels/manager/picto2.png",
+    text: "Site web intégré & simple d'usage",
+  },
+  {
+    src: "/images/logiciels/manager/picto3.png",
+    text: "Boostez votre visibilité & communication",
+  },
+  {
+    src: "/images/logiciels/manager/picto4.png",
+    text: "Communiquez en réseau",
+  },
+  {
+    src: "/images/logiciels/manager/picto5.png",
+    text: "Communiquez en réseau",
+  },
+  {
+    src: "/images/logiciels/manager/picto6.png",
+    text: "Communiquez en réseau",
+  },
+];
+
+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 ",
+    "Gestion collaborative ",
+    "Mise en valeur des activités des membres du réseau ",
+  ],
+  characteristicsTitle: "Des caractéristiques uniques & dédiées",
+};
+</script>
 
 <style scoped>
-
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
+:deep().pricing-big-text {
   font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 25rem;
-  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;
-}
-
-.title-logiciel-group {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.devis {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 9rem;
-  width: 7rem;
-}
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
-
-.logo-manager {
-  top: 2rem;
-  margin-left: 0.3rem;
-  margin-right: 0.5rem;
-  z-index: 1;
-}
-
-.rectangle-4 {
-  width: 18rem;
-  height: 6rem;
-  background: rgba(216, 5, 11, 0.2);
-  border-radius: 3rem;
-  margin-left: 5rem;
-  margin-top: 2rem;
-}
-
-.outil-subtitle {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1rem;
-  color: #091d20;
-  margin-right: 2rem;
-}
-
-.text-square {
-  font-family: "Barlow";
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 0.9rem;
-  text-align: center;
-}
-
-.icon-subtitle {
-  font-size: 2rem;
-  margin-right: 1rem;
-  color: #d8050b;
-}
-
-.icon {
-  margin-top: 2rem;
-  color: #ffffff;
+  font-weight: normal;
+  line-height: 1.5rem;
+  margin-top: 1rem;
 }
 
-.container-square {
+:deep().picto-group {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.outil-title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 3rem;
-  color: #091d20;
-  margin-bottom: 2rem;
-  margin-right: 9rem;
+  margin-left: -4rem;
 }
 
-.outil-ul {
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.citation-school {
-  font-family: "Barlow";
-  font-style: italic;
-  font-weight: 300;
-  font-size: 2rem;
-  width: 3rem;
-  line-height: 40px;
-  color: #ffffff;
-  font-style: italic;
-  margin-top: 20rem;
-  margin-left: 5rem;
-}
-
-.icon-logiciel {
-  font-size: 2rem;
-  color: #d8050b;
-  margin-left: 5rem;
-  margin-top: 4rem;
-}
-
-.icon-title {
-  margin-right: 1.5rem;
-  color: #d8050b;
-}
-.subtitle-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 2rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
-.screen2-img {
-  width: 50rem;
-  height: 40rem;
-  bottom: 7rem;
-}
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
-    rgba(7, 27, 31, 0.3);
-  height: 35rem;
-}
-
-.picto-container {
+:deep().picto-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-left: -15rem;
-}
-
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
-
-.picto-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.picto-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  margin-right: 2rem;
-  margin-left: 2rem;
-}
-.title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-left: 5rem;
-  margin-right: 15rem;
-}
-
-.screen-img {
-  width: 20rem;
-  height: 15rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.outil-row {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
-.darkblue-square {
-  width: 10rem;
-  height: 7rem;
-  background: #0e2d32;
-  margin-left: 14rem;
-}
-.red-square {
-  margin-left: 14rem;
-  width: 10rem;
-  height: 7rem;
-  background: #d8050b;
 }
 </style>

components/Logiciels/Manager/Pyramide.vue

@@ -2,30 +2,24 @@
   <div id="détails">
     <LayoutContainer>
       <v-row class="mt-12">
-        <div class="d-flex justify-center align-center ">
-          <v-icon class="fa-solid fa-circle icon-title" />
-          <h4 class="subtitle-pyramide">
-            Un réseau pyramidal
-          </h4>
-        </div>
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Un réseau pyramidal '"
+          :iconColor="'#E34461'"
+        />
       </v-row>
 
       <v-row>
-        <v-col cols="4">
-          <div class="row-pyramide">
-            <h4 class="title-pyramide">
-              Opentalent Manager, un logiciel adapté à chacun
-            </h4>
-            <p class="detail-pyramide">
-              Notre système s'adapte à toutes les structures de réseau
-              pyramidal, quel que soit le nombre de niveau.
-            </p>
-          </div>
+        <v-col cols="3">
+          <LayoutUITitle
+          title="Opentalent Manager, un logiciel adapté à chacun "
+        />
         </v-col>
 
         <v-col cols="8">
           <v-img
-            src="/images/logiciels/manager/schema_manager.png"
+            src="/images/logiciels/manager/reseau.png"
             class="schema-manager"
           />
         </v-col>
@@ -38,53 +32,9 @@
 <script setup></script>
 
 <style scoped>
-.icon {
-  font-size: 3rem;
-  color: #0e2d32;
-}
 .schema-manager {
-  width: 70%;
-  height: 100%;
-}
-
-.row-pyramide {
-  margin-left: 2rem;
-}
-
-.detail-pyramide {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1.8rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  width: 22rem;
-}
-.title-pyramide {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  width: 20rem;
-}
-.icon-title {
-  color: #d8050b;
-  margin-right: 1rem;
-  font-size: .5rem;
-  margin-left: 2rem;
+  width: 89%;
+  height: 90%;
 }
 
-.subtitle-pyramide {
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -1,61 +1,45 @@
 <template>
-  <div id="témoignages">
+  <div id="Temoignages">
     <LayoutContainer>
       <div class="container-green">
         <v-row>
-          <v-col cols="4">
-            <h3 class="reviews-title">
-              Ce sont eux qui en parle le mieux
-            </h3>
-            <div class="d-flex justify-center align-center">
-              <div
-                class="carousel-button"
-                @click="goPrevious"
-              >
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div
-                class="carousel-button"
-                @click="goNext"
-              >
-                <i class="fas fa-chevron-right" />
+          <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>
+              <div class="d-flex justify-center align-center">
+                <div class="carousel-button" @click="goPrevious">
+                  <i class="fas fa-chevron-left" />
+                </div>
+                <div class="carousel-button" @click="goNext">
+                  <i class="fas fa-chevron-right" />
+                </div>
               </div>
             </div>
           </v-col>
 
-          <v-col cols="8">
-            <Carousel
-              ref="carousel"
-              :items-to-show="3"
-              :items-to-scroll="1"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                class="card"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        {{ card.description }}
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p>
-                        <p class="reviewer-structure">
-                          {{ card.structure }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </div>
+          <v-col cols="9">
+            <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="1">
+              <Slide v-for="(card, index) in cards" :key="index" class="card">
+                <v-card>
+                  <v-card-item class="card-container">
+                    <v-card-text class="review-description">
+                      {{ card.description }}
+                    </v-card-text>
+
+                    <div class="card-footer">
+                      <v-card-actions class="reviewer-name">
+                        {{ card.name }}
+                      </v-card-actions>
+
+                      <p class="reviewer-status">
+                        {{ card.status }}
+                      </p>
+                      <p class="reviewer-structure">
+                        {{ card.structure }}
+                      </p>
+                    </div>
+                  </v-card-item>
+                </v-card>
               </Slide>
             </Carousel>
           </v-col>
@@ -83,24 +67,24 @@ const goNext = () => {
 const cards = [
   {
     description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "L'outil répond à toutes les demandes d'une structure de notre taille et la connexion avec le site internet est très pratique.",
+    name: "Christophe MORIZOT",
+    status: "Président ",
+    structure: "Confédération Musicale de France (92)",
   },
   {
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+    name: "Eric TAUVRON ",
+    status: "Vice-président",
+    structure: "CMF Rhône - Grand Lyon (69)",
   },
   {
     description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "C'est un outil de travail très intéressant, complet et intuitif quand on comprend certaines subtilités. Il a très bien évolué aussi bien pour les chorales que les harmonie. Mes remarques ont toujours été prises en compte.",
+    name: "Noëlle ROBERT",
+    status: "Président",
+    structure: "CMF Côte d'or (21)",
   },
   {
     description:
@@ -124,31 +108,27 @@ const cards = [
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-bottom: 2rem;
 }
 
 .carousel-button i {
   color: #fff;
 }
 .reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
   color: #e34461;
+  margin-top: 5rem;
 }
 
 .reviewer-status {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -159,8 +139,6 @@ const cards = [
 }
 
 .reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 0.8rem;
   line-height: 14px;
@@ -172,53 +150,52 @@ const cards = [
 
 .review-description {
   text-align: left;
+  max-height: 200px;
+  overflow: auto;
+  font-size: 0.9rem;
 }
+
 .card-footer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  margin-left: 5.5rem;
-  margin-top: 3rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
 }
 
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  height: 12rem;
-}
 .reviews-title {
   font-size: 2rem;
   font-weight: 700;
   color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
-  margin-left: 3rem;
-  margin-right: 3rem;
-  margin-top: 5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-top: 3rem;
   text-align: center;
 }
 
 .card {
-  width: 80rem;
   margin-left: 0.5rem;
   border-radius: 1rem;
 }
 
+.v-card {
+  border-radius: 1rem;
+  min-height: 25rem;
+  max-height: 25rem;
+  min-width: 25rem;
+  max-width: 25rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .card-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
 .container-green {

components/Logiciels/School/Avantages.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Avantages">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class=" row-custom" >
      
 
         <LayoutUISubTitle
@@ -9,11 +9,13 @@
             :iconClasses="iconClasses"
             :titleText="'Découvrez les avantages de la solution'"
           />
+          <LayoutUITitle title="Des avantages concrets" />
+
       </v-row>
-      <LayoutUITitle title="Des avantages concrets" />
 
-      <v-row class="row">
-        <v-col cols="4" v-for="(card, index) in cards" :key="index">
+      <v-row class="row-custom"  >
+
+        <v-col cols="12" md="4" offset-md="1"  v-for="(card, index) in cards" :key="index">
           <LayoutUIAvantageCard
             :title="card.title"
             :number="card.number"
@@ -23,6 +25,7 @@
             :numberColor="card.numberColor"
           />
         </v-col>
+
       </v-row>
     </LayoutContainer>
   </div>
@@ -37,7 +40,7 @@ const cards = ref([
     title: 'Un gain de temps',
     number: '01',
     description: 'Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.',
-    image: '/images/logiciels/school/screen3.png',
+    image: '/images/avantages/school/temps.jpg',
     isMemberCMF: true,
     
   },
@@ -45,16 +48,30 @@ const cards = ref([
     title: 'Une activité structurée',
     number: '02',
     description: 'Des espaces dédiés et des outils spécifiques à vos besoins pour une gestion optimisée et une lecture simplifiée.',
-    image: '/images/logiciels/school/screen3.png',
+    image: '/images/avantages/school/struture.png',
     isMemberCMF: false,
   },
   {
     title: 'Une gestion collaborative',
     number: '03',
     description: 'Grâce à des comptes dédiés, personnalisés et autonomes, permettez à vos membres de mettre à jour leurs informations et d\'interagir dans leur agenda.',
-    image: '/images/logiciels/school/screen3.png',
+    image: '/images/avantages/school/collaborative.jpg',
     isMemberCMF: true,
   },
 ]);
 
 </script>
+
+<style scoped>
+
+.row-custom{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+</style>

components/Logiciels/School/Comparatif.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="Comparatif">
-    <LayoutContainer>
+    <LayoutContainer class="mt-6">
       <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
           :titleText="' Comparatif de nos solutions'"
         />
         <LayoutUITitle
-          title="Et si vous passiez à la version Premium "
+          title="Choisissez la version qui vous convient ! "
         />
 
         <LayoutTableComparatif
@@ -56,14 +56,14 @@ const tableData = [
   {
     id: 6,
     column1: "SMS",
-    column2: "check",
-    column3: "check",
+    column2: "Option",
+    column3: "Option",
   },
   {
     id: 6,
     column1: "NOM DE DOMAINE",
-    column2: "check",
-    column3: "check",
+    column2: "Option",
+    column3: "Option",
   },
   {
     id: 7,

components/Logiciels/School/FAQ.vue

@@ -1,209 +0,0 @@
-<template>
-  <div id="Aide">
-    <LayoutContainer>
-      <div class="container-img">
-        <div class="overlay" />
-        <v-row>
-          <v-col cols="6">
-            <div class="container-left">
-              <div class="container-title">
-                <v-icon size="6" class="fa-solid fa-circle icon-title " />
-                <h5 class="subtitle-faq">
-                  Vous voulez tirer le meilleur de notre logiciel ?
-                </h5>
-              </div>
-              <h3 class="title-faq">
-                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>
-            </div>
-          </v-col>
-
-          <v-col cols="6">
-            <div class="btn-container">
-              <v-btn class="btn-faq-tuto">
-                <div class="container-button">
-                  <v-icon class="fa-solid fa-circle icon-button" size="6" />
-                  <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-icon class="fa-solid fa-circle icon-button" size="6" />
-                  <p class="text-btn">
-                    De nombreux articles tutoriels accessibles 24h/24
-                  </p>
-                </div>
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.container-left {
-  margin-left: 6rem;
-}
-
-.text-btn {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 26px;
-  color: #f0e8e4;
-  white-space: normal !important;
-  text-align: left;
-}
-.btn-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10rem;
-  margin-right: 15rem;
-}
-
-.container-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 20rem;
-  height: 3.5rem;
-}
-
-.icon-button {
-  color: #fff;
-  margin-right: 0.7rem;
-  margin-left: 2rem;
-  z-index: 2;
-  color: rgba(32, 147, 190);
-}
-.btn-faq-tuto {
-  z-index: 2;
-
-  width: 20rem;
-  height: 5.5rem;
-  margin-left: 3rem;
-  border-radius: 6px;
-  font-family: "Barlow";
-  background: transparent;
-  color: #fff;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  line-height: 1rem;
-  border: 1px white solid;
-  margin-bottom: 2rem;
-  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: 2;
-}
-.btn-faq {
-  width: 14rem;
-  height: 3.5rem;
-  margin-left: 3rem;
-  background: #ffffff;
-  border-radius: 6px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  z-index: 2;
-
-  text-transform: none !important;
-  line-height: 1rem;
-}
-.title-faq {
-  font-size: 2rem;
-  font-weight: 500;
-  color: #fff;
-  font-family: "Barlow";
-  margin-left: 3rem;
-  margin-right: 15rem;
-  width: 28rem;
-  margin-bottom: 3rem;
-}
-.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;
-  margin-bottom: 2rem;
-  font-family: "Barlow";
-  width: 25rem;
-  margin-right: 15rem;
-
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-.container-img {
-  background-image: url("/images/logiciels/school/faq.jpg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 35rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.container-img::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 1;
-}
-
-.v-row {
-  position: relative;
-  z-index: 2;
-}
-</style>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="Fonctionnalites">
-    <LayoutContainer>
+    <LayoutContainer >
       <div class="container-green" v-if="!mdAndDown">
   
-        <v-row>
+        <v-row class="my-6">
           <v-col cols="12">
             <LayoutCarouselFonctionnalite
               :cards="cards"
@@ -37,9 +37,9 @@ const itemsToShow = computed(() => {
 
 const cards = [
   {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
+    logo: "images/logiciels/school/fonctionnalites/Espaces.svg",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration / Professeurs / Élèves / Familles"],
+    list: ["Administration" , "Professeurs", "Élèves / Familles", "Sur tous supports (ordinateur, tablette et smartphone)"],
   },
   {
     logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
@@ -146,7 +146,7 @@ const cards = [
     list: [
       "Sur votre site internet intégré",
       "Sur l'agenda de la CMF",
-      "Sur l'Agenda culturel Opentalent ",
+      "Sur l'agenda culturel Opentalent",
     ],
   },
 ];

components/Logiciels/School/Formations.vue

@@ -13,17 +13,19 @@
         <v-row class="mb-6">
           <v-col cols="6" v-for="(formation, index) in formations" :key="index">
             <div class="image-wrapper mb-6">
-              <v-img :src="formation.image" class="reunion-img1" />
               <div :class="formation.overlayClass"></div>
+              <div :style="{ backgroundImage: 'url(' + formation.image + ')' }" class="background-img"></div>
             </div>
             <div class="col-details">
               <h4 class="session-title">
-                {{ formation.sessions }} sessions disponibles
+                {{ formation.sessions }}
               </h4>
               <h3 class="formation-title">{{ formation.title }}</h3>
               <p class="formation-details">{{ formation.description }}</p>
               <br />
-              <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
+              <nuxt-link :to="formation.link">
+                <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
+              </nuxt-link>
             </div>
           </v-col>
         </v-row>
@@ -35,9 +37,10 @@
             <LayoutUISubTitle
               :iconSize="6"
               :iconClasses="iconClasses"
-              :titleText="'QUELQUES CHIFFRES'"
+              :titleText="' Pour les petits comme pour les GRANDS établissements d\'enseignement artistique '"
             />
           </v-row>
+          
         </v-col>
       </v-row>
 
@@ -47,7 +50,7 @@
           class="d-flex justify-center align-center small-padding"
         >
           <LayoutCardStat
-            :chiffre="301500"
+            :chiffre="'30 > 1500'"
             text="élèves"
             backgroundColor="#c3e5e7"
           />
@@ -75,11 +78,9 @@
         </v-col>
       </v-row>
 
-      <v-row>
-        <LogicielsSchoolCaroussel />
-      </v-row>
 
       <v-row />
+      <LayoutCarouselTrustCompanie :items="items" />
     </LayoutContainer>
   </div>
 </template>
@@ -88,36 +89,58 @@
 const formations = ref([
   {
     id: 1,
-    image: "/images/logiciels/school/reunion.jpg",
+    image: "/images/logiciels/school/formation.png",
     overlayClass: "image-overlay1",
-    sessions: "2",
-    title: "Formation prise en main du logiciel - En ligne",
+    sessions: "3 formations disponibles",
+    title: "Des formations adaptées à chacun - en ligne",
     description:
       "Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux et que vous n’avez pas de temps à perdre,...",
-    buttonText: "S’incrire à une formation",
+    buttonText: "Découvrir toutes nos formations",
+    link: "/formations",
   },
   {
     id: 2,
-    image: "/images/logiciels/school/reunion.jpg",
+    image: "/images/logiciels/school/webinaire.png",
     overlayClass: "image-overlay2",
-    sessions: "10",
-    title: "Webinaire - Apprendre à piloter son activité",
+    sessions: "Toutes nos sessions",
+    title: "Trouvez le webinaire qu'il vous faut ",
     description:
       "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
-    buttonText: "S'inscrire au webinaire",
+    buttonText: "Découvrir nos webinaires ",
+    link: "/webinaires",
   },
 ]);
+const items = ref([
+  { src: "/images/reviews/school/review1.svg" },
+  { src: "/images/reviews/school/review2.png" },
+  { src: "/images/reviews/school/review3.png" },
+  { src: "/images/reviews/school/review4.jpeg" },
+  { src: "/images/reviews/school/review5.jpeg" },
+  { src: "/images/reviews/school/review6.jpeg" },
+
+]);
 </script>
 
 <style scoped>
+.image-wrapper {
+  position: relative;
+}
+.background-img {
+  width: 600px;
+  margin-left: 5rem;
+  height: 400px;
+  background-size: cover;
+  background-position: center;
+}
+
 .col-details {
   margin-right: 6rem;
   margin-left: 5rem;
 }
-.image-wrapper {
-  position: relative;
-}
+
 .formation-btn {
+  font-family: "Barlow";
+  font-style: normal;
   width: 30rem;
   height: 4rem;
   font-weight: 500;
@@ -150,11 +173,7 @@ const formations = ref([
   color: #ffffff;
   margin-bottom: 3rem;
 }
-.reunion-img1 {
-  width: 80%;
-  margin-left: 5rem;
-  height: 100%;
-}
+
 .container-green {
   background-color: #0e2d32;
   padding: 20px;

components/Logiciels/School/MenuScroll.vue

@@ -126,7 +126,7 @@ const navigate = (menu) => {
   border-bottom: 0.1rem solid #eaeaea;
 }
 .v-chip.active-menu {
-  background: black;
+  background: var(--Vert-100, #091D20);;
   color: white;
 }
 

components/Logiciels/School/Presentation.vue

@@ -4,12 +4,18 @@
       <LayoutUIPresentation
         :pictoImages="pictoData"
         :presentationText="presentationData"
-        :logoSrc="'images/logo/logiciels/School-Blanc.png'"
+        :logoSrc="'images/logo/logiciels/OT_School-blanc.png'"
+        :pricing-amount="'20€'"
+        pricingFromText="à partir de"
+        pricingPeriodText="/mois"
+        pricingAnnouncementText="payable annuellement"
+        
       />
     </div>
 
     <LayoutUIContainerVideo
       image-url="/images/logiciels/school/screen2.png"
+      
     />
   </LayoutContainer>
 </template>
@@ -44,50 +50,6 @@ const presentationData = {
 </script>
 
 <style scoped>
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%), rgba(7, 27, 31, 0.3);
-  height: 40rem;
-}
-
-
-
-.outil-ul {
-  font-family: "Barlow";
-  margin-left: 1rem;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.citation-school {
-  font-style: italic;
-  font-weight: 300;
-  font-size: 2rem;
-  width: 38rem;
-  line-height: 40px;
-  color: #ffffff;
-  font-style: italic;
-  margin-top: 27rem;
-  margin-left: 2rem;
-}
-.subtitle-logiciel {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 5rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
-
-.icon-logiciel {
-  color: #fac20a;
-  margin-right: 1rem;
-}
-
 
 
 </style>

components/Logiciels/School/Projet.vue

@@ -1,103 +1,77 @@
 <template>
-  <div id="contact">
-    <LayoutContainer>
-      <v-row class="mt-12 ml-12 mr-12 mb-12">
-        <v-col cols="5" class="ml-12">
-
-            <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="' Contactez-nous '"
-        />
-
-            <v-img
-              src="/images/logiciels/school/femme-casque.jpg"
-              class="femme-casque"
-            />
-
-
-        </v-col>
-
-
-        <v-col cols="6" class="mt-12">
-            <h5 class="title">
-              Vous avez un projet ?
-            </h5>
-            <h6 class="subtitle">
-              N'attendez plus, appelez-nous
-            </h6>
-            <p class="contact-details">
-              Vous avez une identité, des besoins, des projets... On est là pour
-              vous écouter et vous offrir une offre personnalisée ! 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>
-            <v-btn class="btn-contact">
-              Nous contacter
-            </v-btn>
-
-        </v-col>
-      </v-row>
-
-      <v-row class="border-row">
-        <v-col cols="2">
-          <v-img
-            class="logo-cmf"
-            src="/images/logiciels/school/cmf_logo_orange.png"
-          />
-        </v-col>
-        <v-col cols="10">
-          <div class="cmf-container">
-            <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
-            <p>
-              Si votre établissement d’enseignement artistique est 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 conditions priviliégiés pour la
-              version Opentalent School. Contactez nous direcetement ou
-              contactez votre fédération pour obtenir vos codes d’accès.
-            </p>
-          </div>
-        </v-col>
-      </v-row>
-
-    </LayoutContainer>
-  </div>
+  <LayoutContainer id="contact">
+    <v-row no-gutters>
+      <v-col cols="6">
+        <v-img class="help-img" src="/images/contact/contact.jpg" />
+      </v-col>
+
+      <v-col cols="6" class="mt-12">
+        <LayoutUISubTitle :titleText="` Contactez-nous `" />
+
+        <LayoutUITitle :title="` Vous avez un projet ? `" />
+        <div class="ml-8">
+          <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <p class="contact-details">
+            Vous avez une identité, des besoins, des projets... On est là pour
+            vous écouter et vous offrir une offre personnalisée ! 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>
+          <v-btn class="btn-contact"> Nous contacter </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row no-gutters>
+      <v-col cols="6" class="mt-12">
+        <LayoutUISubTitle :titleText="` Adhérents CMF `" />
+        <LayoutUITitle :title="` Bénéficiez de conditions privilégiés ? `" />
+        <div class="ml-8">
+          <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <p class="contact-details">
+            Si votre établissement d’enseignement artistique est 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 conditions priviliégiés pour la
+            version Opentalent School. <br> 
+          </p>
+          <p class="mt-6">Contactez nous direcetement ou contactez
+            votre fédération pour obtenir vos codes d’accès.</p>
+          <v-btn class="btn-contact"> Je souhaite obtenir mon code d'accès </v-btn>
+        </div>
+      </v-col>
+      <v-col cols="6">
+        <!-- <v-img class="logo-cmf" src="/images/logiciels/school/cmf_logo_orange.png" /> -->
+        <div class="logo-cmf"></div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
-
 <script setup></script>
 
 <style scoped>
-.border-row {
-  border: 1px solid #e5e5e5;
-  margin-left: 10rem;
-  margin-right: 28rem;
-  margin-bottom: 3rem;
-}
-.cmf-container {
-  margin-left: 3rem;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-  width: 30rem;
-}
 
+:deep().title{
+  width: 100% !important;
+}
 .logo-cmf {
-  width: 10rem;
-  height: 10rem;
-  margin-top: 3rem;
-  margin-bottom: 4rem;
-  margin-left: 3rem;
+  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+  margin-top: 2rem;
 }
 
 .btn-contact {
-  background: rgba(32, 147, 190, 0.4);;
+  background: rgba(32, 147, 190, 0.4);
   border-radius: 6px;
   color: #fff;
 
   font-weight: 600;
-  font-size: 12px;
+  font-size: 18px;
   line-height: 16px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
@@ -110,14 +84,8 @@
   font-size: 16px;
   line-height: 20px;
   color: #091d20;
-  width: 20rem;
-}
-.title {
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
+  width: 40rem;
+  text-align: justify;
 }
 
 .subtitle {
@@ -128,8 +96,10 @@
   margin-bottom: 2rem;
 }
 
-
-.femme-casque {
-  width: 20rem;
+.help-img {
+  width: 100%;
+  height: 90%;
+  object-fit: cover;
+  object-position: center;
 }
 </style>

components/Logiciels/School/Reviews.vue

@@ -4,60 +4,45 @@
       <div class="container-green">
         <v-row>
           <v-col cols="3">
-            <h3 class="reviews-title">
-              Ce sont eux qui en parlent le mieux
-            </h3>
-            <div class="d-flex justify-center align-center">
-              <div
-                class="carousel-button"
-                @click="goPrevious"
-              >
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div
-                class="carousel-button"
-                @click="goNext"
-              >
-                <i class="fas fa-chevron-right" />
+            <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>
+              <div class="d-flex justify-center align-center">
+                <div class="carousel-button" @click="goPrevious">
+                  <i class="fas fa-chevron-left" />
+                </div>
+                <div class="carousel-button" @click="goNext">
+                  <i class="fas fa-chevron-right" />
+                </div>
               </div>
             </div>
           </v-col>
 
           <v-col cols="9">
-            <Carousel
-              ref="carousel"
-              :items-to-show="3"
-              :items-to-scroll="1"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                class="card"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        {{ card.description }}
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p>
-                        <p class="reviewer-structure">
-                          {{ card.structure }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </div>
+            <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="1">
+              <Slide v-for="(card, index) in cards" :key="index" class="card">
+                <v-card>
+                  <v-card-item class="card-container">
+                    <v-card-text class="review-description">
+                      {{ card.description }}
+                    </v-card-text>
+
+                    <div class="card-footer">
+                      <v-card-actions class="reviewer-name">
+                        {{ card.name }}
+                      </v-card-actions>
+
+                      <p class="reviewer-status">
+                        {{ card.status }}
+                      </p>
+                      <p class="reviewer-structure">
+                        {{ card.structure }}
+                      </p>
+                    </div>
+                  </v-card-item>
+                </v-card>
               </Slide>
             </Carousel>
+
           </v-col>
         </v-row>
       </div>
@@ -83,38 +68,31 @@ const goNext = () => {
 const cards = [
   {
     description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "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:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "É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:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "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:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
-  },
-  {
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
-    name: "Laurent Lebon",
-    status: "Chef d'orchestre",
-    structure: "Conservatoire de Lyon",
+      "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>
@@ -124,31 +102,27 @@ const cards = [
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-bottom: 2rem;
 }
 
 .carousel-button i {
   color: #fff;
 }
 .reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
   color: rgba(32, 147, 190);
+  margin-top: 5rem;
 }
 
 .reviewer-status {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -159,8 +133,6 @@ const cards = [
 }
 
 .reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 0.8rem;
   line-height: 14px;
@@ -172,13 +144,17 @@ const cards = [
 
 .review-description {
   text-align: left;
+  max-height: 200px;
+  overflow: auto;
+  font-size: 0.9rem;
 }
+
 .card-footer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  margin-left: 5.5rem;
-  margin-top: 3rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
 }
 
 .reviews-title {
@@ -190,27 +166,30 @@ const cards = [
   line-height: 42px;
   margin-left: 1rem;
   margin-right: 1rem;
-  margin-top: 5rem;
+  margin-top: 3rem;
   text-align: center;
 }
 
 .card {
-  width: 80rem;
   margin-left: 0.5rem;
   border-radius: 1rem;
 }
 
-.v-card{
+.v-card {
   border-radius: 1rem;
+  min-height: 25rem;
+  max-height: 25rem;
+  min-width: 25rem;
+  max-width: 25rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .card-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
 .container-green {

components/Logiciels/School/StickyMenu.vue

@@ -59,7 +59,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: "Barlow";
   width: 10rem;
   height: 7rem;
   margin-left: 14rem;
@@ -83,7 +82,7 @@
 }
 
 .icon-logiciel {
-  color: rgba(32, 147, 190, 0.6);
+  color: #9EDBDD;
   margin-right: 1rem;
 }
 

components/Webinaire/Banner.vue

@@ -1,34 +1,36 @@
 <template>
   <LayoutContainer>
-    <LayoutUITitlePage title="webinaires" subtitle="Partez à la découverte de vos logiciels Opentalent. " />
+    <LayoutUITitlePage
+      title="webinaires"
+      subtitle="Partez à la découverte de vos logiciels Opentalent. "
+    />
+
     <v-row>
-      <v-col cols="12" style="position: relative">
-        <img
-          src="/images/formation/banner.jpg"
-          alt="line"
-          class="cover-image"
+      <v-col cols="12">
+        <LayoutUIBanner
+          :imageSrc="'images/banner/Visuel_page_Webinaires.png'"
+          imageAlt="'line'"
         />
       </v-col>
     </v-row>
 
-    <v-row>
-      <v-col cols="12" class="menu-container">
-        <div v-for="menu in menus" :key="menu.label">
-          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">
-            {{ menu.label }}
-          </v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
   </LayoutContainer>
 </template>
 
-<script setup>
-
-</script>
+<script setup></script>
 
 <style scoped>
+
+:deep().text-left,
+:deep().text-right,
+:deep().description-square,
+:deep().black-square,
+:deep().blue-square {
+  display: none;
+}
+:deep().text-right {
+  display: none;
+}
 .image-text {
   position: absolute;
   top: 40px;
@@ -45,48 +47,8 @@
 :deep().subtitle {
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: .1rem;
+  letter-spacing: 0.1rem;
   margin-bottom: 1rem;
 }
 
-.formation {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 90px;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-bottom: 1rem;
-}
-
-.menu-container {
-  display: flex;
-  justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #bbb8b8;
-  font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
-
-.cover-image {
-  width: 100%;
-  height: 35rem;
-  object-fit: cover;
-  object-position: center 30%;
-  margin: 0 auto;
-  transform: scaleX(-1);
-}
 </style>

components/Webinaire/Catalogue.vue

@@ -11,42 +11,38 @@
           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 no-gutters class="centered-row ml-12 mt-12">
-          <v-col
-            cols="12"
-            sm="6"
-            md="4"
-            v-for="(course, index) in courses"
-            :key="index"
-          >
+        <v-row
+          style="
+            padding: 2rem;
+            max-width: 90%;
+            margin-left: auto;
+            margin-right: auto;
+          "
+        >
+          <v-col v-for="(course, index) in courses" :key="index" cols="4">
             <v-card class="mb-4">
               <v-card-text>
-                <v-row>
-                  <div class="title-card-container">
-                    <span class="number-card">{{ course.number }}</span>
-                    <h4 class="card-title">{{ course.title }}</h4>
-                    <v-img class="logo-img" :src="course.imageUrl" />
-                  </div>
-                  <p class="details-card">{{ course.description }}</p>
-                </v-row>
-                <v-row>
-                  <div class="container-blue">
-                    <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-row>
-                  <v-chip class="badge-time"
-                    >Durée : {{ course.duration }}</v-chip
-                  >
-                </v-row>
+                <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>
+
+                <div class="container-blue">
+                  <h6 class="title-obj">Objectifs</h6>
+                  <ul class="list-obj">
+                    <li
+                      v-for="(objective, objIndex) in course.objectives"
+                      :key="objIndex"
+                    >
+                      {{ objective }}
+                    </li>
+                  </ul>
+                </div>
+
                 <div class="container-blue">
                   <h6 class="title-obj">Programme</h6>
                   <v-row>
@@ -66,17 +62,16 @@
                     </v-col>
                   </v-row>
                 </div>
-                <v-row>
-                  <v-chip class="badge-time">{{ course.price }}</v-chip>
-                </v-row>
-                <v-row>
-                  <v-chip
-                    class="chip-download"
-                    @click="showModal(course.title)"
-                  >
-                    Inscrivez-vous
-                  </v-chip>
-                </v-row>
+                <v-chip class="badge-time">
+                  <span>Durée : {{ course.duration }}</span></v-chip
+                >
+                <v-chip class="badge-time">
+                  <span>{{ course.price }}</span></v-chip
+                >
+
+                <v-chip class="chip-download" @click="showModal(course.title)">
+                  Inscrivez-vous
+                </v-chip>
               </v-card-text>
             </v-card>
           </v-col>
@@ -100,9 +95,9 @@
             height="700"
           ></iframe>
           <v-row>
-            <v-cols cols="12">
+            <v-col cols="12">
               <v-btn class="close-button" @click="closeModal()">Fermer</v-btn>
-            </v-cols>
+            </v-col>
           </v-row>
         </div>
       </div>
@@ -135,7 +130,7 @@ const downloadPdf = (pdfUrl) => {
 };
 const courses = [
   {
-    // number: "01",
+    imageUrl: "/images/logo/logiciels/&_Jaune.png",
     title: "Webinaire Artist ",
     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.. ",
@@ -173,7 +168,7 @@ const courses = [
   {
     // number: "02",
     title: "Webinaire School",
-    // imageUrl: "/images/opentalent_school_black.jpg",
+    imageUrl: "/images/logo/logiciels/&_Bleu.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: [
@@ -208,9 +203,8 @@ const courses = [
       "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
   },
   {
-    // number: "03",
     title: "Webinaire Manager",
-    // imageUrl: "/images/opentalent_school_black.jpg",
+    imageUrl: "/images/logo/logiciels/&_Rouge.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: [
@@ -242,129 +236,17 @@ const courses = [
   },
 ];
 </script>
-
 <style scoped>
 .v-card {
-  border: none !important; 
-  box-shadow: none !important; 
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
 }
-:deep().subtitle {
-  font-size: 1.5rem;
-  font-weight: normal !important;
-  line-height: 2rem;
-  letter-spacing: 0.1rem;
-  margin-bottom: 1rem;
-}
-
-:deep().title {
-  font-size: 2rem;
-  line-height: 3.5rem;
-  letter-spacing: 0.1rem;
-  margin-top: 2rem;
-  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;
-}
-
-.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;
-}
-.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;
-}
-
-.container-green {
-  background-color: #0e2d32;
-  padding: 4rem;
-}
 .grey-container {
   background-color: #f8f8f8;
-  padding: 4rem;
-}
-.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;
-}
-
-.centered-row {
-  margin: auto;
-  justify-content: center;
-}
-.catalog {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  margin-bottom: 3rem;
 }
 .chip-download {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: azure;
+  border-radius: 3rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -378,10 +260,11 @@ const courses = [
 }
 
 .badge-time {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: #fff;
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 18px;
@@ -392,8 +275,14 @@ const courses = [
   align-items: center;
 }
 
+.badge-time span {
+  color: var(--Vert-90, #0e2d32);
+}
+
 .list-obj {
   margin-top: 0.5rem;
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 300;
   font-size: 14px;
   line-height: 18px;
@@ -402,6 +291,8 @@ const courses = [
 }
 
 .title-obj {
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
@@ -417,47 +308,100 @@ const courses = [
   margin-bottom: 1rem;
   border-radius: 1rem;
   padding-left: 1.5rem;
-  width: 31rem;
   height: 11rem;
 }
 
 .details-card {
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1rem;
   color: #091d20;
   margin-top: 1rem;
-  width: 31rem;
-  height: 4rem;
+  margin-bottom: 0.5rem;
+  height: 5rem;
 }
 
-.number-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #e34461;
-  margin-right: 1rem;
+.title-card-container {
+  border-bottom: 1px solid #0e2d32;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.title-card-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
+.card-title {
   font-weight: 600;
   font-size: 1.2rem;
-  width: 31rem;
-  border-bottom: 1px solid #0e2d32;
+  margin-bottom: .8rem;
 }
 
 .logo-img {
-  width: 10rem;
-  height: 3rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+}
+
+
+
+:deep().subtitle {
+  font-size: 1.5rem;
+  font-weight: normal !important;
+  line-height: 2rem;
+  letter-spacing: 0.1rem;
+  margin-bottom: 1rem;
+}
+
+:deep().title {
+  font-size: 2rem;
+  line-height: 3.5rem;
+  letter-spacing: 0.1rem;
+  margin-top: 2rem;
+  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;
+}
+
+.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;
-  margin-left: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.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;
+}
+
+.container-green {
+  background-color: #0e2d32;
+  padding: 4rem;
 }
 </style>

package.json

@@ -29,7 +29,7 @@
     "@splidejs/vue-splide": "^0.6.12",
     "@syncfusion/ej2-vue-calendars": "^20.4.54",
     "@turf/turf": "^6.5.0",
-    "@vue-leaflet/vue-leaflet": "^0.9.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.2.2",

pages/formations.vue

@@ -1,5 +1,11 @@
 <template>
   <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <FormationBanner />
   <FormationMenuScroll />
   <FormationPresentation />
@@ -9,10 +15,76 @@
   <FormationParticipation />
   <FormationReviews />
   <LayoutFAQ />
-  <LayoutUISolutionsFooter />
-  <LayoutFooter />
+  <LayoutUISolutionsFooter id="layout-footer"/>
+  <LayoutFooter id="layout-footer" />
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const shouldShowStickyMenu = ref(true);
+
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "green-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+    url: "/nous-contacter",
+  },
+  {
+    id: 2,
+    bgColor: "green-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+    url: "/nous-contacter",
+
+  },
+  {
+    id: 4,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous Appeler"
+
+  },
+];
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 20rem;
+  z-index: 1;
+  margin-bottom: -32rem;
+  float: right;
+}
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>
 
-<style scoped></style>

pages/index.vue

@@ -14,7 +14,7 @@
   <HomeBesoin />
   <HomeReviews />
   <!-- <HomeNews /> -->
-  <HomeHelp id="layout-footer" />
+  <HomeHelp  />
   <LayoutPrefooter id="layout-footer" />
   <LayoutFooter id="layout-footer" />
 </template>
@@ -31,14 +31,14 @@ const shouldShowStickyMenu = ref(true);
 const squaresData = [
   {
     id: 1,
-    bgColor: "blue-square",
+    bgColor: "green-square",
     iconClass: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
     id: 2,
-    bgColor: "blue-square",
+    bgColor: "green-square",
     iconClass: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
     url: "/nous-contacter",
@@ -46,7 +46,7 @@ const squaresData = [
   },
   {
     id: 3,
-    bgColor: "blue-square",
+    bgColor: "green-square",
     iconClass: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
@@ -82,7 +82,7 @@ onMounted(() => {
 <style scoped>
 #sticky-menu {
   position: sticky;
-  top: 25rem;
+  top: 20rem;
   z-index: 1;
   margin-bottom: -32rem;
   float: right;
@@ -90,7 +90,7 @@ onMounted(() => {
 
 @media (max-width: 1800px) {
   #sticky-menu {
-    top: 20rem;
+    top: 16rem;
     margin-bottom: -28rem;
   }
 }

pages/nous-rejoindre.vue

@@ -1,10 +1,89 @@
 <template>
   <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <JoinUsBanner />
   <JoinUsMissions />
-  <LayoutFooter />
+  <LayoutFooter id="layout-footer" />
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from 'vue-router';
 
-<style scoped></style>
+const router = useRouter();
+
+const shouldShowStickyMenu = ref(true);
+
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "green-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+    url: "/nous-contacter",
+  },
+  {
+    id: 2,
+    bgColor: "green-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+    url: "/nous-contacter",
+
+  },
+  {
+    id: 3,
+    bgColor: "green-square",
+    iconClass: "fa-brands fa-readme icon",
+    text: "Brochure",
+    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
+
+  },
+  {
+    id: 4,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous Appeler"
+
+  },
+];
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 20rem;
+  z-index: 1;
+  margin-bottom: -32rem;
+  float: right;
+}
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

pages/opentalent_artist.vue

@@ -1,25 +1,24 @@
 <template>
   <LayoutNavigation />
   <LogicielsArtistBanner />
-  <LogicielsArtistMenuScroll />
+  <LogicielsArtistMenuScroll class="mb-6" />
 
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
-
     <LayoutUIStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
-    </div>
-  <LogicielsArtistPresentation/>
+  </div>
+  <LogicielsArtistPresentation />
   <LogicielsArtistAvantages />
   <LogicielsArtistFonctionnalites />
   <LogicielsArtistComparatif />
-  <LogicielsArtistAbonnement/>
+  <LogicielsArtistAbonnement />
   <LogicielsArtistFormations />
   <LogicielsArtistReviews />
-  <LayoutFAQ id="layout-footer"/>
-  <LayoutUISolutionsFooter id="layout-footer" />
-  <LayoutFooter id="layout-footer"/>
+  <LayoutFAQ />
+  <LayoutUISolutionsFooter />
+  <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
@@ -33,13 +32,21 @@ const squaresData = [
     bgColor: "yellow-square",
     iconClass: "fa-regular fa-comments icon",
     text: "Nous contacter",
+    url: "/nous-contacter",
   },
   {
     id: 2,
     bgColor: "yellow-square",
     iconClass: "fa-solid fa-circle-info icon",
-    text: "Demander une demo",
-  }
+    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(() => {
@@ -63,10 +70,16 @@ onMounted(() => {
 <style scoped>
 #sticky-menu {
   position: sticky;
-  top: 20rem;
-  z-index: 1;
-  margin-bottom: -30rem;
+  top: 25rem;
+  z-index: 10;
+  margin-bottom: -35rem;
   float: right;
 }
-</style>
 
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

pages/opentalent_manager.vue

@@ -4,21 +4,20 @@
   <LogicielsManagerMenuScroll />
 
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
-
-<LayoutUIStickyMenu
-  :shouldShowStickyMenu="shouldShowStickyMenu"
-  :squaresData="squaresData"
-/>
-</div>
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <LogicielsManagerPresentation />
   <LogicielsManagerAvantages />
   <LogicielsManagerFonctionnalites />
   <LogicielsManagerPyramide />
-  <LogicielsManagerAccompagnement />
+  <LogicielsManagerFormation />
   <LogicielsManagerReviews />
   <LayoutFAQ />
-  <LayoutUISolutionsFooter id="layout-footer" />
-  <LayoutFooter />
+  <LayoutUISolutionsFooter />
+  <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
@@ -32,6 +31,7 @@ const squaresData = [
     bgColor: "red-square",
     iconClass: "fa-regular fa-comments icon",
     text: "Nous contacter",
+    url: "/nous-contacter",
   },
   {
     id: 2,
@@ -40,11 +40,11 @@ const squaresData = [
     text: "Brochure",
   },
   {
-    id: 3,
+    id: 4,
     bgColor: "darkblue-square",
     iconClass: "fa-solid fa-phone icon",
     text: "Nous appeler",
-  }
+  },
 ];
 
 onMounted(() => {
@@ -65,15 +65,20 @@ onMounted(() => {
 });
 </script>
 
+
 <style scoped>
 #sticky-menu {
   position: sticky;
-  top: 20rem;
-  z-index: 1;
-  margin-bottom: -30rem;
+  top: 25rem;
+  z-index: 10;
+  margin-bottom: -35rem;
   float: right;
 }
-</style>
-
-
 
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

pages/opentalent_school.vue

@@ -1,9 +1,9 @@
 <template>
   <LayoutNavigation />
   <LogicielsSchoolBanner />
-  <LogicielsSchoolMenuScroll class="sticky-scroll" />
+  <LogicielsSchoolMenuScroll  />
 
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+  <div v-if="shouldShowStickyMenu" id="sticky-menu" class="mt-6">
     <LayoutUIStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
@@ -15,10 +15,9 @@
   <LogicielsSchoolComparatif />
   <LogicielsSchoolProjet />
   <LogicielsSchoolFormations />
-  <LayoutCarouselTrustCompanie />
   <LogicielsSchoolReviews />
-  <LayoutFAQ id="layout-footer" />
-  <LayoutUISolutionsFooter id="layout-footer" />
+  <LayoutFAQ  />
+  <LayoutUISolutionsFooter  />
   <LayoutFooter id="layout-footer" />
 </template>
 
@@ -33,18 +32,21 @@ const squaresData = [
     bgColor: "blue-square",
     iconClass: "fa-regular fa-comments icon",
     text: "Nous contacter",
+    url: "/nous-contacter",
   },
   {
     id: 2,
     bgColor: "blue-square",
     iconClass: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
+    url: "/nous-contacter",
   },
   {
     id: 3,
     bgColor: "blue-square",
     iconClass: "fa-brands fa-readme icon",
     text: "Brochure",
+    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
   },
   {
     id: 4,
@@ -54,30 +56,37 @@ const squaresData = [
   },
 ];
 
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
+// onMounted(() => {
+//   const stickyMenu = document.getElementById("sticky-menu");
+//   const footer = document.getElementById("layout-footer");
 
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
+//   const observer = new IntersectionObserver(
+//     ([entry]) => {
+//       shouldShowStickyMenu.value = !entry.isIntersecting;
+//     },
+//     {
+//       root: null,
+//       threshold: 0,
+//     }
+//   );
 
-  observer.observe(footer);
-});
+//   observer.observe(footer);
+// });
 </script>
 
 <style scoped>
 #sticky-menu {
   position: sticky;
   top: 25rem;
-  z-index: 1;
-  margin-bottom: -30rem;
+  z-index: 10;
+  margin-bottom: -35rem;
   float: right;
 }
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
 </style>

pages/poc.vue

@@ -1,194 +1,103 @@
 <template>
-  <div id="formations">
-    <LayoutContainer>
-      <div class="container-green mt-12">
- 
-        <v-container>
-          <v-row>
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Nos accompagnements sur-mesure'"
-            title-color="#fff"
-          />
-        </v-row>
-          <v-row class="mb-6">
-          <v-col
-            cols="12"
-            md="6"
-            v-for="(formation, index) in formations"
-            :key="index"
-          >
-            <v-card class="mb-6">
-              <div class="image-wrapper">
-                <v-img :src="formation.image" class="reunion-img1" />
-                <div :class="formation.overlayClass"></div>
-              </div>
-              <v-card-text>
-                <div class="col-details">
-                  <h4 class="session-title">
-                    {{ formation.sessions }} sessions disponibles
-                  </h4>
-                  <h3 class="formation-title">{{ formation.title }}</h3>
-                  <p class="formation-details">{{ formation.description }}</p>
-                </div>
-              </v-card-text>
-              <v-card-actions>
-                <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-col>
-        </v-row>
-        </v-container>
- 
-      </div>
+  <LayoutContainer>
+    <v-row no-gutters>
+      <v-col cols="6">
+        <v-img class="help-img" src="/images/contact/contact.jpg" />
+      </v-col>
 
-      <v-row>
-        <v-col cols="4">
-          <v-row>
-            <LayoutUISubTitle
-              :iconSize="6"
-              :iconClasses="iconClasses"
-              :titleText="'QUELQUES CHIFFRES'"
-            />
-          </v-row>
-        </v-col>
-      </v-row>
+      <v-col cols="6" class="mt-12">
+        <LayoutUITitle :title="` Vous avez un projet ? `" />
+        <div class="ml-8">
+          <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <p class="contact-details">
+            Vous avez une identité, des besoins, des projets... On est là pour
+            vous écouter et vous offrir une offre personnalisée ! 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>
+          <v-btn class="btn-contact"> Nous contacter </v-btn>
+        </div>
+      </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="301500"
-            text="élèves"
-            backgroundColor="#c3e5e7"
-          />
-        </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="234"
-            text="Clients"
-            backgroundColor="#c3e5e7"
-          />
-        </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="20304"
-            text="Utilisateurs"
-            backgroundColor="#c3e5e7"
-          />
-        </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <LayoutCardStat
-            :chiffre="13"
-            text="années d'expérience"
-            backgroundColor="#c3e5e7"
-          />
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <LogicielsSchoolCaroussel />
-      </v-row>
-
-      <v-row />
-    </LayoutContainer>
-  </div>
+    <v-row no-gutters>
+      <v-col cols="6" class="mt-12">
+        <LayoutUISubTitle :titleText="` Adhérents CMF `" />
+        <LayoutUITitle :title="` Bénéficiez de conditions privilégiés ? `" />
+        <div class="ml-8">
+          <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <p class="contact-details">
+            Si votre établissement d’enseignement artistique est 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 conditions priviliégiés pour la
+            version Opentalent School. <br> 
+          </p>
+          <p class="mt-6">Contactez nous direcetement ou contactez
+            votre fédération pour obtenir vos codes d’accès.</p>
+          <v-btn class="btn-contact"> Nous contacter </v-btn>
+        </div>
+      </v-col>
+      <v-col cols="6">
+        <!-- <v-img class="logo-cmf" src="/images/logiciels/school/cmf_logo_orange.png" /> -->
+        <div class="logo-cmf"></div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
-
-<script setup>
-const formations = ref([
-  {
-    id: 1,
-    image: "/images/logiciels/school/reunion.jpg",
-    overlayClass: "image-overlay1",
-    sessions: "2",
-    title: "Formation prise en main du logiciel - En ligne",
-    description:
-      "Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux et que vous n’avez pas de temps à perdre,...",
-    buttonText: "S’incrire à une formation",
-  },
-  {
-    id: 2,
-    image: "/images/logiciels/school/reunion.jpg",
-    overlayClass: "image-overlay2",
-    sessions: "10",
-    title: "Webinaire - Apprendre à piloter son activité",
-    description:
-      "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
-    buttonText: "S'inscrire au webinaire",
-  },
-]);
-</script>
+<script setup></script>
 
 <style scoped>
 
-:deep().subtitle {
-  margin-left: 0rem;
+:deep().title{
+  width: 100% !important;
 }
-.v-card {
-  border: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
+.logo-cmf {
+  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+  margin-top: 2rem;
 }
-.col-details {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
 
-}
-.image-wrapper {
-  position: relative;
-}
-.formation-btn {
-  width: 30rem;
-  height: 4rem;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 18px;
-  background: transparent;
-  color: #eff9fb;
-  border: 1px solid #eff9fb;
-  border-radius: 0.5rem;
-  text-transform: none;
-}
-.formation-details {
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.5rem;
-  color: #eff9fb;
-}
-.formation-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
-  margin-bottom: 3rem;
-}
+.btn-contact {
+  background: rgba(32, 147, 190, 0.4);
+  border-radius: 6px;
+  color: #fff;
 
-.session-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 2rem;
   margin-bottom: 3rem;
 }
-.reunion-img1 {
-  width: 80%;
-  height: 100%;
+
+.contact-details {
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 40rem;
+  text-align: justify;
 }
-.container-green {
-  background-color: #0e2d32;
-  padding: 20px;
-  margin-bottom: 20px;
-  color: white;
+
+.subtitle {
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 38px;
+  color: #071b1f;
+  margin-bottom: 2rem;
 }
 
-.card-container {
-  margin-bottom: 20px;
-  margin-left: 10rem;
-  margin-right: 0rem;
+.help-img {
+  width: 100%;
+  height: 90%;
+  object-fit: cover;
+  object-position: center;
 }
 </style>

pages/qui-sommes-nous.vue

@@ -1,18 +1,88 @@
 <template>
   <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <AboutBanner />
   <AboutMenuScroll />
   <AboutHistoire />
   <AboutValeurs />
   <AboutLogiciels />
   <AboutAgenda />
+  <AboutChronologie />
   <AboutEquipe />
   <AboutFAQ />
   <LayoutPrefooter />
-  <LayoutFooter />
+  <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+const shouldShowStickyMenu = ref(true);
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "green-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+    url: "/nous-contacter",
+  },
+  {
+    id: 2,
+    bgColor: "green-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+    url: "/nous-contacter",
+  },
+  {
+    id: 3,
+    bgColor: "green-square",
+    iconClass: "fa-brands fa-readme icon",
+    text: "Brochure",
+    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
+  },
+  {
+    id: 4,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous Appeler",
+  },
+];
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 20rem;
+  z-index: 10;
+  margin-bottom: -32rem;
+  float: right;
+}
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

pages/test.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="Nos logiciels">
+    <LayoutContainer>
+      <v-row class="mb-6">
+        <LayoutUISubTitle titleText="Ce qui nous anime" />
+        <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
+      </v-row>
+
+      <v-row no-gutters="">
+        <v-col cols="3">
+          Découvrez notre gamme de logiciels de gestion & de communication
+          adapté au secteur culturel. Des fonctionnalités complètes:
+          <ul class="custom-list-style">
+            <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
+          </ul>
+        </v-col>
+        <v-col cols="3" v-for="(item, index) in items" :key="index">
+          <div
+            class="container-image"
+            :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
+          >
+            <div class="overlay"></div>
+            <div class="footer-container">
+              <v-img class="logo" :src="item.logoUrl"></v-img>
+              <nuxt-link :to="item.link">
+                <v-btn
+                  :style="{ backgroundColor: item.buttonColor }"
+                  class="plus-button"
+                >
+                  <v-icon>fas fa-plus</v-icon>
+                </v-btn>
+              </nuxt-link>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+const features = [
+  "Une gestion de vos contacts",
+  "un agenda collaboratif et interactif",
+  "Une gestion du matériel et du stock",
+  "Une communication simplifiée",
+  "Un rapport d'activité complet",
+  "Un site internet intégré",
+  "Et bien plus encore..."
+];
+
+const items = [
+  {
+    imageUrl: "/images/solutions/artist.jpg",
+    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
+    buttonColor: "#FAC20A",
+    link: "/opentalent_artist",
+  },
+  {
+    imageUrl: "/images/solutions/school.jpg",
+    logoUrl: "/images/logo/logiciels/School-Blanc.png",
+    buttonColor: "rgba(32, 147, 190)",
+    link: "/opentalent_school",
+  },
+
+  {
+    imageUrl: "/images/solutions/manager.png",
+    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
+    buttonColor: "#D8050B",
+    link: "/opentalent_manager",
+  },
+];
+</script>
+
+<style scoped>
+.container {
+  max-width: 1700px;
+}
+.container-image {
+  position: relative;
+  background-image: url("/images/solutions/school.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  width: 300px;
+  height: 400px;
+  z-index: 0;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.logo {
+  width: 100px;
+  z-index: 2;
+  margin-right: 10px;
+}
+
+.plus-button {
+  background-color: #fac20a;
+  height: 70px;
+  z-index: 3;
+  border-bottom-right-radius: none !important;
+}
+
+.v-btn {
+  height: 80px !important;
+  border-bottom-right-radius: none !important;
+}
+
+.plus-button .v-icon {
+  color: #ffffff;
+  font-size: 2rem;
+}
+
+.plus-button,
+.v-btn {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border-top-left-radius: 10% !important;
+}
+
+ul.custom-list-style {
+  list-style-type: none;
+  padding-left: 0; 
+}
+
+ul.custom-list-style li:before {
+  content: '- '; 
+  padding-right: 5px; 
+}
+
+</style>

pages/webinaires.vue

@@ -1,12 +1,83 @@
 <template>
   <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <WebinaireBanner />
   <WebinaireCatalogue />
   <WebinaireFAQ />
   <LayoutPrefooter />
-  <LayoutFooter />
+  <LayoutFooter id="layout-footer" />
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from 'vue-router';
 
-<style scoped></style>
+const router = useRouter();
+
+const shouldShowStickyMenu = ref(true);
+
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "green-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+    url: "/nous-contacter",
+  },
+  {
+    id: 2,
+    bgColor: "green-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+    url: "/nous-contacter",
+
+  },
+  {
+    id: 4,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous Appeler"
+
+  },
+];
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 20rem;
+  z-index: 1;
+  margin-bottom: -32rem;
+  float: right;
+}
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

yarn.lock

@@ -7484,10 +7484,10 @@ leaflet.markercluster@^1.5.3:
   resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
   integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
 
-leaflet@^1.9.3:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414"
-  integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
 
 levn@^0.4.1:
   version "0.4.1"