retour v3 logiciels

.gitignore

@@ -1,4 +1,4 @@
-node_modules
+/node_modules
 *.log*
 .nuxt
 .nitro

components/About/Agenda.vue

@@ -1,6 +1,5 @@
 <template>
-  <div id="L'agenda opentalent">
-    <LayoutContainer>
+    <LayoutContainer id="agenda" class="mb-12" >
       <v-row class="custom-row align-center">
         <v-col cols="4">
           <h2 class="title">L'agenda Opentalent</h2>
@@ -55,7 +54,7 @@
                     <v-chip
                       v-for="(tag, tagIndex) in event.tags"
                       :key="tagIndex"
-                      class="ma-2 chip-custom"
+                      class="chip-custom"
                       :color="tagColor(tag)"
                       label
                     >
@@ -69,7 +68,6 @@
         </v-col>
       </v-row>
     </LayoutContainer>
-  </div>
 </template>
 
 <script setup>
@@ -148,6 +146,13 @@ const goNext = () => carousel.next();
 
 <style scoped>
 
+.v-container{
+  padding: 0 !important;
+}
+
+.container{
+  background: #F8F8F8 
+}
 .card-footer{
   text-align: left !important;
 }
@@ -227,8 +232,6 @@ const goNext = () => carousel.next();
   margin-bottom: 2rem;
 }
 .agenda-details {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
@@ -238,8 +241,6 @@ const goNext = () => carousel.next();
   width: 15rem;
 }
 .title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
@@ -251,8 +252,8 @@ const goNext = () => carousel.next();
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   background-color: transparent;
   border: 2px solid #000000;
   cursor: pointer;

components/About/Chronologie.vue

@@ -1,6 +1,6 @@
 <template>
-  <LayoutContainer id="Notre Histoire">
-    <v-container>
+  <LayoutContainer id="story" v-if="!mdAndDown">
+    <v-container >
       <v-row class="mb-6 mt-6">
         <v-col cols="6">
           <LayoutUISubTitle
@@ -24,7 +24,12 @@
     </v-container>
     <v-row class="mb-12">
       <v-col cols="12">
-        <Carousel ref="functionCarousel" :items-to-show="2" :items-to-scroll="1">
+        <Carousel
+          ref="functionCarousel"
+          :items-to-show="2"
+          :items-to-scroll="1"
+          :wrap-around="true"
+        >
           <v-row> </v-row>
           <Slide
             v-for="(slide, index) in slides"
@@ -46,11 +51,11 @@
               <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>
+                  <h4 class="title-slide" v-html="slide.title"></h4>
+                  <p class="description mb-6" v-html="slide.description"></p>
                 </div>
               </v-col>
-              <div  class="timeline-container">
+              <div class="timeline-container">
                 <div v-if="slide.year" class="timeline">
                   <div
                     class="timeline-point"
@@ -76,10 +81,12 @@
 </template>
 
 <script setup>
+import { useDisplay } from "vuetify";
 import { Carousel, Navigation, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 const functionCarousel = ref(null);
 const activeSlide = ref(0);
+const { smAndDown, mdAndDown } = useDisplay();
 
 const setActiveSlide = (index) => {
   activeSlide.value = index;
@@ -87,7 +94,6 @@ const setActiveSlide = (index) => {
 const nextAction = () => {
   functionCarousel.value.next();
   activeSlide.value = activeSlide.value + 1;
-
 };
 
 const previousAction = () => {
@@ -95,17 +101,14 @@ const previousAction = () => {
   activeSlide.value = activeSlide.value - 1;
 };
 
-
-
 const calculateTimelinePosition = (year) => {
-  if(!year) {
+  if (!year) {
     return 0;
   }
   const startYear = 2005;
   const endYear = 2024;
   const position = ((year - startYear) / (endYear - startYear)) * 100;
   return position;
-
 };
 
 const slides = [
@@ -114,16 +117,16 @@ const slides = [
     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",
+      "Sous une pleine lune inspirante, Guillaume alors imagine un outil collaboratif en ligne révolutionnaire pour le secteur culturel. Cette idée germe alors qu'il est président d'orchestre et membre du CA d'une école de musique, marquant le début du concept Opentalent.",
+    imageUrl: "/images/about/Origine-Opentalent-outil-collaboratif-pour-la-culture.jpg",
   },
   {
     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",
+      "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 culturelles.",
+    imageUrl: "/images/about/Developpement-et-partenariat-stratégique-Opentalent.jpg",
   },
   {
     id: 3,
@@ -144,7 +147,7 @@ const slides = [
   {
     id: 5,
     year: "2010",
-    title: "CMF Réseau, l'innovation communautaire",
+    title: "CMF Réseau <br> 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",
@@ -163,7 +166,7 @@ const slides = [
     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",
+    imageUrl: "/images/about/Refonte-du-site-internet-Opentalent-agenda-et-logiciels-culturels.jpg",
   },
   {
     id: 8,
@@ -171,7 +174,7 @@ const slides = [
     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",
+    imageUrl: "/images/about/Nouvelle-génération-Opentalent-moderne-securisee-experience-optimisee.jpg",
   },
   {
     id: 9,
@@ -183,16 +186,15 @@ const slides = [
   },
   {
     id: 10,
-    title: "Le Futur avec Vous...",
+    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",
+      "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. <br> Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la culture. <br> <strong> Opentalent, c'est vous ! </strong>",
     imageUrl: "/images/about/idee.png",
   },
 ];
 </script>
 
 <style scoped>
-
 .active-slide {
   opacity: 1;
   transform: scale(1.1);
@@ -223,7 +225,6 @@ const slides = [
   position: relative;
 }
 
-
 .timeline-point {
   position: relative;
   top: 15px;
@@ -309,5 +310,4 @@ const slides = [
   border-top-left-radius: 20%;
   border-bottom-left-radius: 20%;
 }
-
 </style>

components/About/Equipe.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer id="Notre équipe">
+  <LayoutContainer id="team">
     <v-row class="mt-12 custom-row">
       <LayoutUISubTitle
         :iconSize="6"
@@ -7,32 +7,46 @@
         :titleText="'notre équipe'"
       />
     </v-row>
-    <v-row class=" custom-row">
+    <v-row class="custom-row">
       <LayoutUITitle title="Une équipe spécialisée et passionnée" />
-    <h4 class="details ml-4 mt-6 mb-12">
-      Chez Opentalent, on recherche des compétences mais surtout des hommes et des femmes qui souhaitent s'engager dans un projet porteur de sens.
-    </h4>
+      <h4 class="details ml-4 mt-6 mb-12">
+        Chez Opentalent, on recherche des compétences mais surtout des hommes et
+        des femmes qui souhaitent s'engager dans un projet porteur de sens.
+      </h4>
     </v-row>
 
-
-    <v-row class=" custom-row">
-      <v-col cols="12" sm="6" md="4" lg="3" v-for="chef in chefs" :key="chef.id">
+    <v-row class="custom-row">
+      <v-col
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        v-for="chef in chefs"
+        :key="chef.id"
+      >
         <v-card>
           <v-img :src="chef.photo" height="370px"></v-img>
           <v-card-title class="name">{{ chef.nom }}</v-card-title>
           <v-card-subtitle class="poste">{{ chef.poste }}</v-card-subtitle>
-          <v-card-text clas>{{ chef.description }}</v-card-text>
+          <!-- <v-card-text clas>{{ chef.description }}</v-card-text> -->
         </v-card>
       </v-col>
     </v-row>
 
-    <v-row class=" custom-row"> 
-      <v-col cols="12" sm="6" md="4" lg="3" v-for="employe in employes" :key="employe.id">
+    <v-row class="custom-row">
+      <v-col
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        v-for="employe in employes"
+        :key="employe.id"
+      >
         <v-card>
           <v-img :src="employe.photo" height="370px"></v-img>
-          <v-card-title>{{ employe.nom }}</v-card-title>
-          <v-card-subtitle>{{ employe.poste }}</v-card-subtitle>
-          <v-card-text>{{ employe.description }}</v-card-text>
+          <v-card-title class="name"> {{ employe.nom }}</v-card-title>
+          <v-card-subtitle class="poste">{{ employe.poste }}</v-card-subtitle>
+          <!-- <v-card-text>{{ employe.description }}</v-card-text> -->
         </v-card>
       </v-col>
     </v-row>
@@ -40,23 +54,92 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const chefs = ref([
-  { id: 1, nom: 'Guillaume', poste: 'Fondateur / DIRECTEUR COMMERCIAL', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.' },
-  { id: 1, nom: 'Michel', poste: 'FONDATEUR / Directeur développement', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.' },
-
+  {
+    id: 1,
+    nom: "Guillaume",
+    poste: "Fondateur / DIRECTEUR COMMERCIAL",
+    photo: "/images/about/equipe/Guillaume_CORCOBA-co-fondateur_et_Gerant.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.",
+  },
+  {
+    id: 1,
+    nom: "Michel",
+    poste: "FONDATEUR / Directeur développement",
+    photo: "/images/about/equipe/Michel_PERNET-SOLLIET-Co-fondateur_et_Product_Owner.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.",
+  },
 ]);
 
 const employes = ref([
-  { id: 1, nom: 'Johan', poste: ' FORMATEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-  { id: 1, nom: 'Nathalie', poste: 'Ch. DEVELOPPEMENT COMMERCIAL', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolorel' },
-  { id: 1, nom: 'Laetitia', poste: 'CH. COMMUNICATION & MARKETING', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-  { id: 1, nom: 'Florence', poste: 'ASSISTANTE ADMINISTRATIVE', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-  { id: 1, nom: 'Vincent', poste: 'LEAD DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-  { id: 1, nom: 'Olivier', poste: 'DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-  { id: 1, nom: 'Sébastien', poste: 'DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
-   { id: 1, nom: 'Maha', poste: 'DEVELOPPEUSE', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' }
+  {
+    id: 1,
+    nom: "Johan",
+    poste: " FORMATEUR",
+    photo: "/images/about/equipe/Johan_HAUDIQUET-Formateur_et_Assistance.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Nathalie",
+    poste: "Ch. DEVELOPPEMENT COMMERCIAL",
+    photo: "/images/about/equipe/Nathalie_CHEVALON-Chargee_de_developpement_commercial.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolorel",
+  },
+  {
+    id: 1,
+    nom: "Laetitia",
+    poste: "CH. COMMUNICATION & MARKETING",
+    photo: "/images/about/equipe/Laetitia_SIFFOINTE-Chargee_de_Marketing_et_Communication.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Florence",
+    poste: "ASSISTANTE ADMINISTRATIVE",
+    photo: "/images/about/equipe/Florence_JOANNIDIS-ADV.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Vincent",
+    poste: "LEAD DEVELOPPEUR",
+    photo: "/images/about/equipe/Vincent_GUFFON-Lead_dev.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Olivier",
+    poste: "DEVELOPPEUR",
+    photo: "/images/about/equipe/Olivier_MASSOT-Developpeur.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Sébastien",
+    poste: "DEVELOPPEUR",
+    photo: "/images/about/equipe/Sebastien_FAVRE-BONTE_Developpeur.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
+  {
+    id: 1,
+    nom: "Maha",
+    poste: "DEVELOPPEUSE",
+    photo: "/images/about/equipe/Maha_BOUCHIBA-Developpeuse.png",
+    description:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
+  },
 ]);
 </script>
 
@@ -68,13 +151,13 @@ const employes = ref([
 }
 .v-card {
   max-width: 284px;
-  border: none !important; 
-  box-shadow: none !important; 
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
 }
 
 .details {
-  color: var(--Vert-100, #091D20);
+  color: var(--Vert-100, #091d20);
   font-family: Barlow;
   font-size: 16px;
   font-weight: 300;
@@ -84,39 +167,44 @@ const employes = ref([
 
 .v-card {
   max-width: 284px;
-  border: none !important; 
-  box-shadow: none !important; 
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
 }
 
 .description {
-  color: var(--Vert-100, #091D20);
-font-family: Barlow;
-font-size: 14px;
-font-style: normal;
-font-weight: 300;
-line-height: 18px; 
+  color: var(--Vert-100, #091d20);
+  font-family: Barlow;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 18px;
 }
 
-.name{
+.name {
   color: #112528;
-/* Subtitle 1 */
-font-family: Barlow;
-font-size: 22px;
-font-style: normal;
-font-weight: 500;
-line-height: 26px; 
+  /* Subtitle 1 */
+  font-family: Barlow;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 26px;
 }
 
-.poste{
-  color: #071B1F;
-font-family: Barlow;
-font-size: 10px;
-font-style: normal;
-font-weight: 600;
-line-height: 15px; 
-letter-spacing: 1.8px;
-text-transform: uppercase; 
+.poste {
+  color: #071b1f;
+  font-family: Barlow;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
 }
+.v-card-subtitle {
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
 
 </style>

components/About/FAQ.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer id="faq">
     <v-row no-gutters>
       <v-col cols="6">
         <div class="help-img"></div>

components/About/Histoire.vue

@@ -1,79 +1,70 @@
 <template>
-  <LayoutContainer>
-    <div id="Qui sommes-nous">
+  <LayoutContainer id="Qui-sommes-nous" >
+    <v-row class="mt-12 custom-row">
+      <v-col cols="4">
+        <LayoutUISubTitle :titleText="'Qui sommes-nous ?'" />
+      </v-col>
 
-      <v-row class="mt-12 custom-row">
-        <v-col cols="4">
-          <LayoutUISubTitle
-            :titleText="'Qui sommes-nous ?'"
-            />
-        </v-col>
+      <v-col cols="8">
+        <h3 class="italic-title mr-8">
+          “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
+          la référence pour la gestion et la promotion du spectacle vivant sur
+          les territoires.”
+        </h3>
+      </v-col>
+    </v-row>
 
-        <v-col cols="8">
-          <h3 class="italic-title mr-8">
-            “Imaginé par des musiciens pour des musiciens, Opentalent se veut
-            être la référence pour la gestion et la promotion du spectacle
-            vivant sur les territoires.”
-          </h3>
-        </v-col>
-      </v-row>
+    <v-row style="width: 80%; margin-left: auto; margin-right: auto" class="mb-12">
+      <v-col cols="6">
+        <div class="passion-img"></div>
+      </v-col>
 
-      <v-row style="width: 80%; margin-left: auto; margin-right: auto;">
-        <v-col cols="6">
-          <div class="passion-img"></div>
-          <!-- <v-img class="passion-img" src="/images/about/passion.jpg" /> -->
-        </v-col>
+      <v-col cols="6">
+        <h2 class="passion-title">Une histoire de passionnés</h2>
+        <p class="passion-details">
+          En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment là
+          président d'un orchestre d'harmonie, mais également membre du conseil
+          d'administration de sa fédération, réfléchit à un outil pour
+          centraliser les informations de sa structure, mais également au niveau
+          fédéral. Il souhaite simplifier la gestion des structures culturelles
+          et en faire la promotion, car pour lui, le milieu culturel est
+          indispensable. Il est rapidement rejoint par Michel   PERNET-SOLLIET,
+          lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
+          quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
+          3 logiciels spécialement dédiés à la culture et un agenda culturel
+          pour en faire la promotion.
+        </p>
 
-        <v-col cols="6">
-          <h2 class="passion-title">Une histoire de passionnés</h2>
-          <p class="passion-details">
-            En 2005, Guillaume Corcoba, musicien depuis toujours et à ce moment
-            là président d'un orchestre d'harmonie, mais également membre du
-            conseil d'administration de sa fédération, réfléchit à un outil pour
-            centraliser les informations de sa structure, mais également au
-            niveau fédéral. Il souhaite simplifier la gestion des structures
-            culturelles et en faire la promotion, car pour lui, le milieu
-            culturel est indispensable. Il est rapidement rejoint par Michel
-            Pernet-Solliet, lui aussi musicien, et ils montent ensemble
-            Openassos, qui deviendra quelques années plus tard, Opentalent.
-            Opentalent c'est un ensemble de 3 logiciels spécialement dédiés à la
-            culture et un portail culturel pour en faire la promotion.
-          </p>
-
-          <h2 class="culture-title">
-            La Culture au service du développement territorial
-          </h2>
-          <p class="culture-details">
-            Qui n'a jamais entendu que la culture coûtait trop cher ? On
-            l'entend , ha ça oui on l'a même trop entendu ! Mais la culture
-            c'est avant tout un facteur de lien social incroyable. On se
-            retrouve, on échange, on partage... on vit ensemble. On crée des
-            vrais moments et on développe des groupes de passionnés. On
-            participe à rendre nos collectivités attractives et surtout on les
-            fait vivre, toute l'année, à toutes les saisons. Depuis plusieurs
-            décennies, un grand nombre de territoires s'appuie sur le
-            développement de la culture comme un outil de développement
-            territorial pour faire face à la désindustrialisation, à une
-            croissance démographique ralentie ou encore une image défavorable.
-            Ce modèle de développement par la culture pour pallier un déficit
-            d’attractivité touristique inspire de plus en plus de politiques de
-            développement territorial.
-          </p>
-        </v-col>
-      </v-row>
-    </div>
+        <h2 class="culture-title">
+          La Culture au service du développement territorial
+        </h2>
+        <p class="culture-details">
+          Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
+          , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
+          tout un facteur de lien social incroyable. On se retrouve, on échange,
+          on partage... on vit ensemble. On crée des vrais moments et on
+          développe des groupes de passionnés. On participe à rendre nos
+          collectivités attractives et surtout on les fait vivre, toute l'année,
+          à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
+          territoires s'appuie sur le développement de la culture comme un outil
+          de développement territorial pour faire face à la
+          désindustrialisation, à une croissance démographique ralentie ou
+          encore une image défavorable. Ce modèle de développement par la
+          culture pour pallier un déficit d’attractivité touristique inspire de
+          plus en plus de politiques de développement territorial.
+        </p>
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
 
 <script setup></script>
 
 <style scoped>
-
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
-
 }
 .culture-details {
   font-weight: 300;
@@ -100,7 +91,6 @@
   color: #071b1f;
   flex: none;
   margin-bottom: 3rem;
-  
 }
 
 .passion-details {

components/About/Logiciels.vue

@@ -1,44 +1,49 @@
 <template>
-  <div id="Nos logiciels">
-    <LayoutContainer>
-      <v-row class="mb-6 custom-row">
-        <LayoutUISubTitle titleText="Ce qui nous anime" />
-        <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
-      </v-row>
-
-      <v-row no-gutters class="mb-12 custom-row">
-        <v-col cols="3">
-          <p style="text-align: justify;" class="mr-4 ml-6">
-            Découvrez notre gamme de logiciels de gestion & de communication
-          adapté au secteur culturel. Des fonctionnalités complètes:
-          </p>
-   
-          <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" 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>
+  <LayoutContainer id="software">
+    <v-row class="mb-6 custom-row">
+      <LayoutUISubTitle titleText="Ce qui nous anime" />
+      <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
+    </v-row>
+
+    <v-row class="mb-12 custom-row">
+      <v-col cols="3">
+        <p style="text-align: justify" class="mr-4 ml-6">
+          Découvrez notre gamme de logiciels de gestion & de communication
+          adapté au secteur culturel. <br />
+          Des fonctionnalités complètes:
+        </p>
+        <div class="mb-6"></div>
+        <ul class="custom-list-style ml-6">
+          <li v-for="(feature, index) in features" :key="index">
+            {{ feature }}
+          </li>
+        </ul>
+        <p style="text-align: justify" class="mr-4 ml-6 mt-6">
+          À chaque logiciel sa spécificité !
+        </p>
+      </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="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>
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
 
 <script setup>
@@ -49,7 +54,7 @@ const features = [
   "Une communication simplifiée",
   "Un rapport d'activité complet",
   "Un site internet intégré",
-  "Et bien plus encore..."
+  "Et bien plus encore...",
 ];
 
 const items = [
@@ -68,7 +73,7 @@ const items = [
 
   {
     imageUrl: "/images/solutions/manager.png",
-    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
+    logoUrl: "/images/logo/logiciels/Manager-Blanc.png",
     buttonColor: "#D8050B",
     link: "/opentalent_manager",
   },
@@ -76,43 +81,45 @@ const items = [
 </script>
 
 <style scoped>
+.v-container {
+  padding: 0 !important;
+}
 
-:deep().title{
+.container {
+  margin-top: 1rem;
+  background: #f8f8f8;
+}
+:deep().title {
   width: 100% !important;
 }
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
-}.container-image {
+}
+.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;
+  width: 100%;
+  height: 100%;
   z-index: 0;
+  cursor: pointer;
 }
 
-.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;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
 }
 
 .logo {
@@ -121,16 +128,19 @@ const items = [
   margin-right: 10px;
 }
 
+
 .plus-button {
-  background-color: #fac20a;
-  height: 70px;
-  z-index: 3;
-  border-bottom-right-radius: none !important;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--Vert-60, #64afb7);
+  color: white;
 }
 
-.v-btn {
-  height: 80px !important;
-  border-bottom-right-radius: none !important;
+
+.container-image:hover .plus-button {
+  transform: scale(1.2); 
+  transition: all 0.3s ease-in-out;
 }
 
 .plus-button .v-icon {
@@ -145,14 +155,29 @@ const items = [
   border-top-left-radius: 10% !important;
 }
 
-ul.custom-list-style {
-  list-style-type: none;
-  padding-left: 0; 
+.custom-list-style {
+  list-style: none;
+  padding-left: 0;
 }
 
-ul.custom-list-style li:before {
-  content: '- '; 
-  padding-right: 5px; 
+.custom-list-style li {
+  margin-left: 0.8rem;
+  position: relative;
+  margin-bottom: 10px;
 }
 
+.custom-list-style li:before {
+  content: "";
+  position: absolute;
+  left: -10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 3px;
+  background-color: black;
+  border-radius: 50%;
+}
+
+
+
 </style>

components/About/Valeurs.vue

@@ -1,11 +1,11 @@
 <template>
-  <LayoutContainer>
-    <div id="Nos valeurs">
+  <LayoutContainer class="mt-12" id="valeurs">
+    <div id="valeurs">
       <div class="v-row custom-row">
         <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
       </div>
 
-      <v-row class="mt-6 custom-row align-center">
+      <v-row class="mt-6 custom-row align-center mb-12">
         <v-col cols="6">
           <div class="valeur-img"></div>
         </v-col>

components/Common/Card/AvantageCard.vue

@@ -1,29 +1,24 @@
 <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>
-
-        <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>
+    <div class="advantage-card">
+      <div class="title-card">
+        <h4 class="description-card">{{ title }}</h4>
+        <span class="number-card" :style="{ color: dynamicNumberColor }">{{
+          number
+        }}</span>
+      </div>
 
-        <div class="image-container" :style="backgroundImageStyle">
-          <!-- <v-chip class="chip-card" v-if="isMemberCMF">
-            <p class="cmf">Membre CMF</p>
-          </v-chip> -->
-        </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>
+      <div class="image-container" :style="backgroundImageStyle"></div>
+    </div>
   </LayoutContainer>
 </template>
 
@@ -50,8 +45,7 @@ const backgroundImageStyle = computed(() => ({
 </script>
 
 <style scoped>
-
-.v-row{
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
@@ -61,7 +55,7 @@ const backgroundImageStyle = computed(() => ({
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  height: 10rem;
+  height: 7rem;
 }
 
 .number-card {
@@ -95,7 +89,6 @@ const backgroundImageStyle = computed(() => ({
   font-size: 1rem;
   color: #091d20;
   margin-top: 1rem;
-  margin-bottom: 1rem;
   height: 5rem;
 }
 .number-card {
@@ -113,6 +106,4 @@ const backgroundImageStyle = computed(() => ({
   font-size: 1.3rem;
   margin-bottom: 1rem;
 }
-
-
 </style>

components/Common/Carousel/Fonctionnalite.vue

@@ -230,15 +230,18 @@ const previousAction = () => {
 
   min-height: 400px !important;
   max-height: 400px !important;
-  min-width: 300px !important;
+  min-width: 280px !important;
+  max-width: 280px !important;
   border-radius: 1rem;
   min-height: 25rem;
 }
 
-@media(min-width: 2900px){
+@media(min-width: 1800px){
   .v-card{
-    min-height: 300px !important;
-  max-height: 300px !important;
+    min-height: 400px !important;
+  max-height: 400px !important;
+  min-width: 400px !important;
+  max-width: 400px !important;
   }
 }
 

components/Common/Carousel/TrustCompanie.vue

@@ -3,7 +3,7 @@
     <v-row justify="center">
       <h2 class="title text-center" :style="{ color: titleColor }">
         Plus de&nbsp;
-        <span style="color: #c3e5e7">{{ structureCount }}</span
+        <span :style="{ color: structureCountColor }">{{ structureCount }}</span
         >&nbsp; {{ trustMessage }}
       </h2>
     </v-row>
@@ -12,41 +12,40 @@
 
     <v-container>
       <v-row>
-      <div
-        class="carousel-button"
-        @click="goPrevious"
-        :style="{
-          'border-color': carouselBorderColor,
-          color: carouselButtonColor,
-        }"
-      >
-        <i class="fas fa-chevron-left" :style="{ color: iconColor }" />
-      </div>
-      <Carousel
-        ref="carousel"
-        class="carrousel elevation-4 mb-12"
-        :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="carousel-button"
-        @click="goNext"
-        :style="{
-          'border-color': carouselBorderColor,
-          color: carouselButtonColor,
-        }"
-      >
-        <i class="fas fa-chevron-right" :style="{ color: iconColor }" />
-      </div>
-    </v-row>
+        <div
+          class="carousel-button"
+          @click="goPrevious"
+          :style="{
+            'border-color': carouselBorderColor,
+            color: carouselButtonColor,
+          }"
+        >
+          <i class="fas fa-chevron-left" :style="{ color: iconColor }" />
+        </div>
+        <Carousel
+          ref="carousel"
+          class="carrousel elevation-4 mb-12"
+          :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="carousel-button"
+          @click="goNext"
+          :style="{
+            'border-color': carouselBorderColor,
+            color: carouselButtonColor,
+          }"
+        >
+          <i class="fas fa-chevron-right" :style="{ color: iconColor }" />
+        </div>
+      </v-row>
     </v-container>
-
   </LayoutContainer>
 </template>
 
@@ -69,6 +68,10 @@ const props = defineProps({
     type: String,
     default: "5000 structures",
   },
+  structureCountColor: {
+    type: String,
+    default: "#c3e5e7", 
+  },
 });
 
 const goPrevious = () => {
@@ -78,8 +81,6 @@ const goPrevious = () => {
 const goNext = () => {
   carousel.value.next();
 };
-
-
 </script>
 
 <style scoped>

components/Common/ContainerVideo.vue

@@ -20,8 +20,8 @@
             <v-col cols="6">
               <div class="screen-img-3"></div>
               <div class="play-icon-container">
-              <i class="fas fa-play"></i>
-            </div>
+                <i class="fas fa-play"></i>
+              </div>
             </v-col>
           </v-row>
         </v-row>
@@ -82,6 +82,8 @@ const iconColor = computed(() => {
   color: white; 
   cursor: pointer;
 }
+
+
 .v-row {
   width: 90% !important;
   margin-left: auto !important;

components/Logiciels/Manager/MenuScroll.vue → components/Common/MenuScroll.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row >
+    <v-row>
       <v-col
         cols="12"
         class="menu-container"
@@ -8,16 +8,14 @@
       >
         <div
           v-for="menu in menus"
-          :key="menu.label"
+          :key="menu.id"
           @click="navigate(menu)"
         >
           <v-chip
-            v-if="activeMenu === menu.label"
+            v-if="activeMenu === menu.id"
             class="active-menu"
           >
-            {{
-              menu.label
-            }}
+            {{ menu.label }}
           </v-chip>
           <span v-else>{{ menu.label }}</span>
         </div>
@@ -27,68 +25,50 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
-const refs = reactive({
-  Presentation: null,
-  Avantages: null,
-  Fonctionnalites: null,
-  Formations: null,
-  Temoignages: null,
+const props = defineProps({
+  menus: Array
 });
 
 const isSticky = ref(false);
+const activeMenu = ref('');
+
+const scrollToElement = (element) => {
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+};
 
 const handleScroll = () => {
   const scrollPosition = window.scrollY;
+  isSticky.value = scrollPosition > 800; 
 
-  if (scrollPosition > 800) { 
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
+  for (const menu of props.menus) {
+    const { element } = menu;
+    if (element && scrollPosition >= element.offsetTop && scrollPosition < element.offsetTop + element.offsetHeight) {
+      activeMenu.value = menu.id;
+      break;
     }
   }
 };
 
 onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
+  props.menus.forEach(menu => {
+    menu.element = document.getElementById(menu.id);
   });
-
   window.addEventListener('scroll', handleScroll);
 });
 
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-const menus = [
-  { label: "Presentation" },
-  { label: "Avantages" },
-  { label: "Fonctionnalites" },
-  { label: "Formations" },
-  { label: "Temoignages" },
-];
-
-const activeMenu = ref(menus[0].label);
+watch(() => props.menus, (newMenus) => {
+  newMenus.forEach(menu => {
+    menu.element = document.getElementById(menu.id);
+  });
+}, { deep: true });
 
 const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
+  activeMenu.value = menu.id;
+  scrollToElement(menu.element);
 };
 </script>
 

components/Common/Presentation.vue

@@ -1,21 +1,23 @@
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row class="mt-12 custom-row">
+      <v-row class="custom-row" >
         <v-col cols="5">
           <LayoutUISubTitle
             :iconSize="5"
             :iconColor="iconColor"
             :titleText="titleText"
+            class="ml-8"
           />
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
+          <!-- <div class="screen-img"></div> -->
+          <v-img src="/images/logiciels/Opentalent-disponible-su-Multi-support.png" class="screen-img" />
 
           <div
             :style="{ backgroundColor: backgroundColor }"
-            class="rectangle-4"
+            class="rectangle-4 ml-6"
           >
             <div :style="{ backgroundColor: circleColor }" class="black-circle">
-              <div class="content-flex ml-6">
+              <div class="content-flex  ml-6">
                 <v-img :src="logoSrc" class="logo-manager" />
                 <div class="pricing-details">
                   <p class="pricing-small-text">{{ pricingFromText }}</p>
@@ -46,21 +48,21 @@
           <h2 class="mt-12 ml-6 presentation-caracteristique">
             {{ presentationText.characteristicsTitle }}
           </h2>
-          <div class="picto-container">
-            <div
-              class="picto-group"
-              v-for="picto in pictoImages"
-              :key="picto.text"
-            >
+            <div class="picto-container">
               <div
-                :style="{ backgroundImage: 'url(' + picto.src + ')' }"
-                class="picto-img"
-              ></div>
-              <p class="picto-text" :style="{ color: pictoColor }">
-                {{ picto.text }}
-              </p>
+                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>
@@ -78,7 +80,7 @@ const pricingAmount = computed(() => {
     return "14€";
   } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
     return "20€";
-  } else {
+  }else {
     return "Sur devis";
   }
 });
@@ -101,7 +103,7 @@ const titleText = computed(() => {
   } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
     return "Présentation d'Opentalent Manager";
   } else {
-    return "Titre par défaut";
+    return "Titre par défaut"; 
   }
 });
 
@@ -113,21 +115,19 @@ const iconColor = computed(() => {
   } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
     return "#d8050b";
   } else {
-    return "rgba(32, 147, 190, 0.6)";
+    return "rgba(32, 147, 190, 0.6)"; 
   }
 });
 
 // on affiche " à partir de" sur opentalent_school et artist
 const pricingFromText = computed(() => {
-  if (
-    /^\/opentalent_artist(\/|$)/.test(route.path) ||
-    /^\/opentalent_school(\/|$)/.test(route.path)
-  ) {
+  if (/^\/opentalent_artist(\/|$)/.test(route.path) || /^\/opentalent_school(\/|$)/.test(route.path)) {
     return "à partir de";
-  } else {
-    return "";
+  }else{
+    return ''
   }
-});
+
+})
 const props = defineProps({
   pictoImages: {
     type: Array,
@@ -150,11 +150,12 @@ const props = defineProps({
     default: "",
   },
   pricingFromText: {
-    type: String,
+    type: String
   },
   pricingAmount: {
     type: String,
     default: "sur devis",
+    class: "pricing-big-text",
   },
   pricingPeriodText: {
     type: String,
@@ -171,9 +172,12 @@ const props = defineProps({
     default: "#091d20",
   },
 });
+
+
 </script>
 
 <style scoped>
+
 .custom-row {
   width: 90%;
   margin-left: auto;
@@ -229,15 +233,16 @@ const props = defineProps({
   height: 6rem;
 }
 
+
 .logo-manager {
   display: flex;
   align-items: center;
   justify-content: center;
-  top: 1rem;
-  right: 0.5rem;
+  top:1rem;
+  right: .5rem;
 }
 .rectangle-4 {
-  width: 350px;
+  width: 380px;
   height: 6rem;
   background: rgba(32, 147, 190, 0.2);
   border-radius: 3rem;
@@ -269,7 +274,6 @@ const props = defineProps({
 }
 
 .screen-img {
-  margin-top: 2rem;
-  width: 70%;
+  width: 100%;
 }
 </style>

components/Common/ReviewCard.vue

@@ -0,0 +1,203 @@
+<template>
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row class="custom-row">
+          <v-col cols="3">
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                height: 100%;
+              "
+            >
+              <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
+              <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" :wrap-around="true">
+              <Slide v-for="(card, index) in cards" :key="index" class="card">
+                <v-container>
+                  <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>
+                </v-container>
+              </Slide>
+            </Carousel>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+</template>
+
+<script setup>
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import { ref } from "vue";
+
+const carousel = ref(null);
+
+const goPrevious = () => {
+  carousel.value.prev();
+};
+
+const goNext = () => {
+  carousel.value.next();
+};
+
+const props = defineProps({
+  cards: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+
+
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.v-container {
+  padding: 0 !important;
+}
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  background-color: transparent;
+  border: 2px solid #fff;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-bottom: 2rem;
+}
+
+.carousel-button i {
+  color: #fff;
+}
+.reviewer-name {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  color: rgba(32, 147, 190);
+  margin-top: 5rem;
+
+  text-align: justify !important;
+}
+
+.reviewer-status {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+
+  text-align: justify !important;
+}
+
+.reviewer-structure {
+  font-weight: 300;
+  font-size: 0.8rem;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.card-footer {
+  min-height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.reviews-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-top: 3rem;
+  text-align: center;
+  
+}
+@media (min-width:2100px) {
+  .review-description {
+    min-height: 150px !important;
+    max-height: 150px   !important;
+  }
+  .v-card {
+    min-height: 360px !important;
+    max-height: 360px !important;
+  }
+}
+.card {
+  margin-left: 0.5rem;
+  border-radius: 1rem;
+}
+.review-description {
+  text-align: justify;
+  min-height: 200px;
+  max-height: 200px;
+  overflow: auto;
+  font-size: 0.9rem;
+}
+.v-card {
+  border-radius: 1rem;
+  min-height: 450px;
+  max-height: 450px;
+  margin-top: 2rem;
+  margin-bottom: 0.6rem;
+  
+}
+
+.card-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  
+  
+}
+
+.container-green {
+  background-color: #0e2d32;
+}
+</style>

components/Contact/Banner.vue

@@ -55,7 +55,7 @@
             <v-col cols="12" md="6">
               <v-text-field
                 v-model="postalCode"
-                label="Code postal"
+                label="Code postal*"
                 type="number"
               ></v-text-field>
             </v-col>
@@ -78,7 +78,7 @@
             <v-col cols="12" md="6">
               <v-text-field
                 v-model="phone"
-                label="Téléphone"
+                label="Téléphone*"
                 type="tel"
               ></v-text-field>
             </v-col>
@@ -103,7 +103,7 @@
               <v-select
                 v-model="requestType"
                 :items="requestTypes"
-                label="Votre demande concerne"
+                label="Votre demande concerne*"
                 outlined
                 dense
               ></v-select>

components/Formation/Catalogue.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="Catalogue">
-    <LayoutContainer>
+    <LayoutContainer v-if="!mdAndDown">
       <div class="grey-container">
         <v-row class="custom-row">
           <LayoutUISubTitle
@@ -22,7 +22,7 @@
                   <h4 class="card-title">{{ course.title }}</h4>
                   <v-img class="logo-img" :src="course.imageUrl" />
                 </div>
-                <p class="details-card">{{ course.description }}</p>
+                <p class="details-card mb-6">{{ course.description }}</p>
 
                 <div class="container-blue">
                   <h6 class="title-obj">Objectifs pédagogiques</h6>
@@ -78,6 +78,10 @@
 </template>
 
 <script setup>
+
+import { useDisplay } from "vuetify";
+const { smAndDown, mdAndDown } = useDisplay();
+
 const downloadPdf = (pdfUrl) => {
   window.open(pdfUrl, "_blank");
 };
@@ -256,7 +260,7 @@ const courses = [
   margin-bottom: 1rem;
   border-radius: 1rem;
   padding-left: 1.5rem;
-  height: 11rem;
+  height: 13rem;
 }
 
 .details-card {

components/Formation/MenuScroll.vue

@@ -1,132 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row >
-      <v-col
-        cols="12"
-        class="menu-container"
-        :class="{ 'sticky-menu': isSticky }"
-      >
-        <div
-          v-for="menu in menus"
-          :key="menu.label"
-          @click="navigate(menu)"
-        >
-          <v-chip
-            v-if="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, onMounted, onUnmounted, reactive } from 'vue';
-
-const refs = reactive({
-  Presentation: null,
-  Catalogue: null,
-  Financement: null,
-  Certification: null,
-  Inscription: null,
-  Evaluation: null,
-});
-const menus = [
-  { label: 'Présentation' },
-  { label: 'Catalogue' },
-  { label: 'Financement' },
-  { label: 'Certification' },
-  { label: 'Inscription' },
-  { label: 'Evaluation' },
-];
-const isSticky = ref(false);
-
-const handleScroll = () => {
-  const scrollPosition = window.scrollY;
-
-  if (scrollPosition > 800) { 
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
-  });
-
-  window.addEventListener('scroll', handleScroll);
-});
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-
-const activeMenu = ref(menus[0].label);
-
-const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-</script>
-
-<style scoped>
-
-.sticky-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-.menu-container {
-  z-index: 3;
-  display: flex;
-  justify-content: space-around;
-  background: white;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  line-height: 19px;
-  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: var(--Vert-100, #091D20);;
-  color: white;
-}
-
-.menu-container div:hover {
-  cursor: pointer;
-  text-decoration: underline;
-  z-index: 15;
-}
-</style>

components/Formation/Presentation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Présentation">
+  <div id="Presentation">
     <LayoutContainer>
       <v-row class="custom-row mt-6">
         <LayoutUISubTitle

components/Formation/Reviews.vue

@@ -1,166 +1,70 @@
 <template>
-  <div id="Evaluation">
+  <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>
-          </v-col>
-
-          <v-col cols="8">
-            <div class="card-container">
-              <v-card class="card">
-                <v-card-item>
-                  <v-card-text class="card-text">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Provident porro fuga incidunt quae, doloremque tenetur
-                    aliquam exercitationem deleniti aspernatur illo rem deserunt
-                    sapiente tempore dolorem ipsa aliquid vel nihil eius.
-                  </v-card-text>
-
-                  <div class="card-footer">
-                    <v-card-actions class="reviewer-name">
-                      Laurent Lebon
-                    </v-card-actions>
-
-                    <p class="reviewer-status">Chef d'orchestre</p>
-                    <p class="reviewer-structure">Conservatoire de Lyon</p>
-                  </div>
-                </v-card-item>
-              </v-card>
-
-              <v-card class="card">
-                <v-card-item>
-                  <v-card-text class="card-text">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Provident porro fuga incidunt quae, doloremque tenetur
-                    aliquam exercitationem deleniti aspernatur illo rem deserunt
-                    sapiente tempore dolorem ipsa aliquid vel nihil eius.
-                  </v-card-text>
-
-                  <div class="card-footer">
-                    <v-card-actions class="reviewer-name">
-                      Laurent Lebon
-                    </v-card-actions>
-
-                    <p class="reviewer-status">Chef d'orchestre</p>
-                    <p class="reviewer-structure">Conservatoire de Lyon</p>
-                  </div>
-                </v-card-item>
-              </v-card>
-
-              <v-card class="card">
-                <v-card-item>
-                  <v-card-text class="card-text">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Provident porro fuga incidunt quae, doloremque tenetur
-                    aliquam exercitationem deleniti aspernatur illo rem deserunt
-                    sapiente tempore dolorem ipsa aliquid vel nihil eius.
-                  </v-card-text>
-
-                  <div class="card-footer">
-                    <v-card-actions class="reviewer-name">
-                      Laurent Lebon
-                    </v-card-actions>
-
-                    <p class="reviewer-status">Chef d'orchestre</p>
-                    <p class="reviewer-structure">Conservatoire de Lyon</p>
-                  </div>
-                </v-card-item>
-              </v-card>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
+      <CommonReviewCard :cards="cards" />
     </LayoutContainer>
   </div>
 </template>
 
-<script></script>
+<script setup>
+const cards = [
+  {
+    description:
+      "Formation très personnalisée et très productive. Tout à fait adaptée à nos besoins actuels.",
+    name: "Jocelyne DELAPORTE ",
+    status: "Responsable administrative",
+    structure: "École de Musique Municipale De Pecquencourt (59)",
+  },
+  {
+    description:
+      "Merci à Johan d'avoir pris le temps de nous former, de rentrer dans les détails des questions abordées. Et merci à l'équipe pour votre réactivité lorsque l'on demande à être aidés",
+    name: "Claire CAGNON ",
+    status: "Secrétaire administrative",
+    structure: "École de Musique, Théâtre et Cirque Alsace Rhin Brisach (68)",
+  },
+  {
+    description:
+      " Une journée de formation précieuse pour un point complet de la prise en main du logiciel et des réponses utiles aux questions et problématiques rencontrées.",
+    name: "Sayuri OKA NICOLEAU",
+    status: "Directrice administrative & pédagogique",
+    structure: "École Municipale de Musique de Croissy-sur-Seine (78)",
+  },
+  {
+    description:
+      "Un formateur à l'écoute des besoins de notre structure et des besoins de nous deux débutants sur le logiciel. Besoin compris pour une journée de formation complémentaire pour lancer la campagne d'inscription courant le deuxième trimestre 2022. Merci pour la patience de Johan, pédagogue et fin connaisseur de son logiciel.",
+    name: "Alain BATS",
+    status: "Président adjoint",
+    structure: "L'École Intercommunale de Musique LEIM (74)",
+  },
+];
+</script>
 
 <style scoped>
-.card-text {
-  color: #fff;
-}
-
-.reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: white;
+:deep().container-green {
+  background-color: white !important;
 }
 
-.reviewer-status {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #fff;
+:deep().reviews-title {
+  color: black !important;
 }
 
-.reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  color: #fff;
+:deep().v-card,
+.reviewer-name {
+  background-color: #0e2d32;
+  color: white !important;
 }
 
-.card-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-left: 5.5rem;
-  margin-top: 3rem;
+:deep().reviewer-name {
+  color: white !important;
 }
 
-.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-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #091d20;
-  margin-top: 2rem;
-  margin-left: 2rem;
-  margin-right: 8rem;
+:deep().carousel-button i {
+  color: #0e2d32 !important;
 }
-
-.card {
-  width: 70rem;
-  height: 23rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  border-radius: 1rem;
-  background: #0e2d32;
+:deep().carousel-button {
+  border: 2px solid #0e2d32;
 }
-
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
+.v-container {
+  padding: 0 !important;
 }
 </style>

components/Home/Besoin.vue

@@ -1,16 +1,16 @@
 <template>
   <LayoutContainer :overflow="false">
-    <v-row class="mt-6" justify="center" >
-      <v-col cols="7" class="relative-container" >
-        <div class="screen-img"></div>
-        <div class="circle">
+    <v-row class="mt-6" justify="center" v-if="!mdAndDown" >
+      <v-col cols="6" class="relative-container" >
+        <div class="screen-img ml-4"></div>
+        <!-- <div class="circle">
           <v-icon class="fa-brands fa-react icon" />
           <div class="circle-text">Réponse aux besoins</div>
-        </div>
+        </div> -->
       </v-col>
 
-      <v-col cols="5" >
-        <h3 class="title-event ">
+      <v-col cols="6" >
+        <h3 class="title-event mt-12">
           Une solution évolutive pour vous donner entière satisfaction
         </h3>
 
@@ -34,14 +34,14 @@ const { smAndDown, mdAndDown } = useDisplay();
 
 <style scoped>
 
+.v-row
+{
+  margin-left:auto !important;
+  margin-right: auto !important;
+  max-width: 1400px !important;
+}
 
 
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-bottom: 10rem;
-}
 
 .relative-container {
   position: relative;
@@ -51,34 +51,6 @@ const { smAndDown, mdAndDown } = useDisplay();
   font-weight: bold;
 }
 
-.circle {
-  position: absolute;
-  top: 20%;
-  right: 0;
-  margin-top: 0.5rem;
-  width: 300px;
-  height: 300px;
-  background: #eff9fb;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.icon {
-  font-size: 3rem;
-}
-.circle-text {
-  font-size: 22px;
-  line-height: 26px;
-  text-align: center;
-  color: #0e2d32;
-  font-family: "Barlow";
-  font-style: normal;
-  margin-top: 2rem;
-}
-
 .title-event {
   font-weight: 400;
   font-size: 1.5rem;
@@ -100,15 +72,10 @@ const { smAndDown, mdAndDown } = useDisplay();
 }
 
 .screen-img {
-  position: absolute;
-  right: 0;
-  margin-left: 3rem;
-  width: 500px;
-  height: 500px;
-  background-image: url("/images/eventAgenda/logiciel.png");
+  background-image: url("/images/home/Repondre-aux-besoins-des-clients-Opentalent.png");
   background-position: center;
   background-size: cover;
-  border-radius: 10%;
-  margin-right: 10rem;
+  width: 700px;
+  height: 500px;
 }
 </style>

components/Home/Help.vue

@@ -9,18 +9,18 @@
 
           <v-col cols="6">
             <h4 class="subtitle-team ml-10">
-              Notre équipe est <br />
-              à vos côtés pour vous guider
+              Notre équipe est à vos côtés <br />
+              pour vous guider
             </h4>
 
-            <p class="need-help  ml-10">
+            <p class="need-help ml-10">
               Besoin d’aide ? <br />
               Vous souhaitez en savoir plus sur nos solutions ou vous avez
               besoin d'assistance sur l'utilisation de l'un de nos logiciels ?
             </p>
 
             <v-row>
-              <ul class="details  ml-10">
+              <ul class="details ml-10">
                 <li class="detail-item">
                   Ouvert du lundi au vendredi de 8h15 à 17h45
                 </li>
@@ -31,7 +31,7 @@
               </ul>
             </v-row>
 
-            <v-row class="row-faq  ml-10">
+            <v-row class="row-faq ml-10">
               <a href="https://ressources.opentalent.fr/" target="_blank">
                 <v-btn class="button-faq">Consulter la FAQ</v-btn>
               </a>

components/Home/Promotion.vue

@@ -9,10 +9,14 @@
         <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
           <span class="span-color">Simplifiez</span>-vous la vie avec un outil
           <span class="d-inline-flex align-center">
+            
             <v-img
               src="/images/promotion/piano.jpg"
               :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
             />
+            <div class="play-icon-container">
+                <i class="fas fa-play"></i>
+              </div>
           </span>
           tout en un pour la gestion et la promotion
           <span class="d-inline-flex align-center">
@@ -108,6 +112,16 @@ const zoomOut = () => {
 </script>
 
 <style scoped>
+.play-icon-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 3rem;
+  color: white;
+  cursor: pointer;
+  z-index: 100;
+}
 .text-gestion .d-inline-flex {
   vertical-align: middle;
 }

components/Home/Reviews.vue

@@ -27,7 +27,6 @@
                 </p>
               </v-card-text>
               <div class="card-footer">
-                <!-- card footer-->
                 <small class="status"
                   >Directeur administratif & pédagogique</small
                 >
@@ -41,9 +40,6 @@
 
           <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>
@@ -73,12 +69,8 @@
 
       <v-row justify="center">
         <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>
@@ -94,7 +86,6 @@
                 </p>
               </v-card-text>
               <div class="card-footer">
-                <!-- card footer-->
                 <small class="status"
                   >Directeur administratif & pédagogique
                 </small>
@@ -122,7 +113,6 @@
                 </p>
               </v-card-text>
               <div class="card-footer">
-                <!-- card footer-->
                 <small class="status">Personnel administratif</small>
 
                 <small class="structure">
@@ -195,29 +185,10 @@ const items = ref([
   margin-top: 1rem;
   color: #64afb7;
 }
-.carousel-button i,
-.carousel-button-sm i {
-  color: #ffffff;
-}
-
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 5rem;
-  height: 5rem;
-  margin-left: 1.5rem;
-  background-color: transparent;
-  border: 2px solid #ffffff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 1rem;
-}
-
 
 .container-green {
   background-color: #0e2d32;
-  height: 57rem
+  height: 60rem
 }
 
 .status {
@@ -266,9 +237,10 @@ const items = ref([
   height: 22rem;
 }
 .review-card {
+  padding-top: 1rem ;
   width: 21rem;
-  min-height: 20rem;
-  max-height: 23rem;
+  min-height: 21rem;
+  max-height: 21rem;
   margin-bottom: .9rem;
 }
 .review-name {
@@ -276,7 +248,7 @@ const items = ref([
   font-weight: 500;
   font-family: "Barlow";
   font-style: normal;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   color: #9edbdd;
 }
 

components/Home/Solution.vue

@@ -184,6 +184,7 @@ onMounted(() => {
 
 .image-container:hover .view-button {
   display: block;
+
 }
 
 .solution-subtitle {
@@ -314,17 +315,6 @@ onMounted(() => {
   width: 20rem;
 }
 
-.artist-image {
-  position: relative;
-  background: url(/images/solutions/artist.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 21rem;
-  height: 20rem;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
-}
 
 .artist-image::before {
   content: "";
@@ -343,17 +333,7 @@ onMounted(() => {
   opacity: 1;
   cursor: pointer;
 }
-.manager-image {
-  position: relative;
-  background: url(/images/solutions/manager.png);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 21rem;
-  height: 20rem;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
-}
+
 
 .manager-image::before {
   content: "";
@@ -372,17 +352,48 @@ onMounted(() => {
   opacity: 1;
   cursor: pointer;
 }
-
-.school-image {
+.artist-image {
   position: relative;
+  background: url(/images/solutions/artist.jpg);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 21rem;
+  height: 300px;
+  margin-top: 2rem;
+  margin-left: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.school-image{
   background: url(/images/solutions/school.jpg);
+
+}
+.manager-image {
+  position: relative;
+  background: url(/images/solutions/manager.png);
   background-size: cover;
   background-position: center;
   border-radius: 0px 0px 10px 10px;
   width: 21rem;
-  height: 20rem;
+  height: 300px;
   margin-top: 2rem;
   margin-left: 0.9rem;
+  margin-bottom: 1rem;
+
+}
+
+.school-image, .manager-image .artist-image {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 350px;
+  height: 300px;
+  margin-top: 2rem;
+  margin-left: 0.9rem;
+  margin-bottom: 1rem;
+
 }
 
 .school-image::before {

components/JoinUs/Banner.vue

@@ -4,12 +4,14 @@
 
     <v-row>
       <v-col cols="12">
-        <div class="banner-container">
-          <img src="/images/join/join.jpg" alt="line" class="cover-image" />
-        </div>
+        <CommonBanner
+          :imageSrc="'/images/join/join.jpg'"
+          imageAlt="'line'"
+        />
       </v-col>
     </v-row>
 
+
     <h3 class="text-center join-title bold mt-6">
       Opentalent, où l'innovation & la passion se rencontre !
     </h3>
@@ -24,6 +26,20 @@
 
 <style scoped>
 
+:deep().cover-image {
+  object-position: center 50% !important;
+}
+:deep().text-left,
+:deep().text-right,
+:deep().description-square,
+:deep().black-square,
+:deep().blue-square {
+  display: none;
+}
+:deep().text-right {
+  display: none;
+}
+
 .bold {
   font-weight: 600 !important;
 }
@@ -34,31 +50,7 @@
   font-size: 1.5rem;
   line-height: 2.5rem;
   text-align: center;
-  margin-left: 30rem;
-  margin-right: 30rem;
-}
-.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;
 }
 
-.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/JoinUs/Missions.vue

@@ -1,23 +1,33 @@
 <template>
   <LayoutContainer>
     <div v-for="(job, index) in jobs" :key="index" class="mission-container">
-      <!-- Première ligne -->
-      <v-row class="announcement-title ml-6 mr-6">
+      <!-- Première ligne avec alignement vertical -->
+      <v-row class="announcement-title ml-6 mr-6 d-flex align-center">
         <NuxtLink
           :to="`/nous-rejoindre/${job.id}`"
           class="text-decoration-none"
         >
-          <div class="title-job">{{ job.title }} - {{ job.contractType }}</div>
+          <div class="title-job ml-4">
+            <!-- Icône étoile pour les annonces 'featured' -->
+            {{ job.title }} - {{ job.contractType }}
+            <v-icon
+              v-if="job.featured"
+              class="fas fa-star"
+              style="color: yellow"
+            ></v-icon>
+          </div>
         </NuxtLink>
         <NuxtLink
           :to="`/nous-rejoindre/${job.id}`"
-          class="text-decoration-none"
+          class="text-decoration-none d-flex align-center"
         >
-        <v-btn class="btn-more" text> En savoir plus </v-btn>
+          <v-icon class="mr-2"> </v-icon>
+          <v-btn class="btn-more mr-4" text>
+            En savoir plus
+          </v-btn>
         </NuxtLink>
       </v-row>
 
-      <!-- Deuxième ligne -->
       <v-row class="announcement-location ml-6 mr-6">
         <v-icon class="icon-location">
           <i class="fas fa-map-marker"></i>
@@ -38,10 +48,41 @@
     </v-row>
     <v-row>
       <v-col cols="12">
-        
-        <v-btn class="btn-send"> Envoyer ma candidature </v-btn>
+        <v-btn class="btn-send" @click="dialog = true">
+          Envoyer ma candidature
+        </v-btn>
       </v-col>
     </v-row>
+
+    <v-dialog v-model="dialog" max-width="600px">
+      <v-card>
+        <v-card-title class="text-center" style="font-family: Barlow">
+          Formulaire de Candidature
+        </v-card-title>
+        <v-card-text>
+          <v-form>
+            <v-text-field label="Nom*" required></v-text-field>
+            <v-text-field label="Prénom*" required></v-text-field>
+            <v-text-field label="Téléphone*" required></v-text-field>
+            <v-text-field label="Email*" required></v-text-field>
+            <v-file-input
+              label="Dépôt de CV*"
+              accept=".pdf, .jpeg, .png"
+              required
+            ></v-file-input>
+            <v-file-input
+              label="Dépôt de lettre de motivation"
+              accept=".pdf, .jpeg, .png"
+            ></v-file-input>
+            <v-textarea label="Message*" required></v-textarea>
+          </v-form>
+        </v-card-text>
+        <p class="text-right mr-6">* Champs obligatoires</p>
+        <v-card-actions>
+          <v-btn class="btn-more" @click="sendApplication">Envoyer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </LayoutContainer>
 </template>
 
@@ -50,6 +91,13 @@ import { ref } from "vue";
 import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
 const { apiRequestService } = useMaestroRequestService();
 
+const dialog = ref(false);
+
+const sendApplication = () => {
+  console.log("Formulaire envoyé");
+  dialog.value = false;
+};
+
 const query = computed(() => {
   const queryParams: {
     page: number;
@@ -62,7 +110,7 @@ const query = computed(() => {
 
   return queryParams;
 });
-// Base URL for API requests
+
 const totalItems = ref(0);
 const config = useRuntimeConfig();
 const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;
@@ -70,6 +118,7 @@ const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;
 const page: Ref<number> = ref(1);
 const itemsPerPage: Ref<number> = ref(10);
 const { t } = useI18n();
+
 const {
   data: jobs = [],
   pending,
@@ -77,18 +126,30 @@ const {
 } = useLazyAsyncData("files", async () => {
   const response = await apiRequestService.get(baseUrl, query.value);
   const collection = response["hydra:member"];
-
-  // Obtenir la date actuelle
   const currentDate = new Date();
 
-  const filteredJobs = collection.filter((item) => {
+  // Séparer les annonces 'featured'
+  const featuredJobs = collection.filter(
+    (item) => item.featured && new Date(item.startPublication) <= currentDate
+  );
+
+  // Filtrer et trier les autres annonces
+  const regularJobs = collection.filter((item) => {
+    const startPublicationDate = new Date(item.startPublication);
     const endPublicationDate = new Date(item.endPublication);
-    return item.type === "ENTREPRISE" && endPublicationDate >= currentDate;
+    return (
+      !item.featured &&
+      startPublicationDate <= currentDate &&
+      endPublicationDate >= currentDate
+    );
   });
 
-  totalItems.value = filteredJobs.length;
-  console.log(filteredJobs);
-  return filteredJobs;
+  // Combinez les annonces 'featured' et les autres annonces
+  const combinedJobs = [...featuredJobs, ...regularJobs];
+
+  totalItems.value = combinedJobs.length;
+  console.log(combinedJobs);
+  return combinedJobs;
 });
 </script>
 
@@ -102,7 +163,8 @@ const {
   color: white;
   display: flex;
   justify-content: space-between;
-  padding: 10px;
+  height: 80px;
+  padding: 10px 10px 10px 1;
 }
 
 .title-job {
@@ -116,8 +178,12 @@ const {
 
 .btn-more,
 .btn-send {
-  background: #9edbdd;
+  font-weight: 600;
+  height: 50px;
+  background: #64afb7;
+  border-radius: 6px;
   color: white;
+  gap: 9px;
 }
 
 .btn-send {
@@ -158,7 +224,7 @@ const {
 }
 
 .mission-container {
-  margin-top: 5rem;
+  margin-top: 3rem;
   margin-bottom: 5%;
 }
 </style>

components/Layout/FAQ.vue

@@ -25,7 +25,7 @@
 
           <v-col cols="6">
             <div class="btn-container">
-              <nuxt-link to="https://ressources.opentalent.fr/" target="_blank">
+              <nuxt-link to="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564" target="_blank">
                 <v-btn class="btn-faq-tuto">
                   <div class="container-button">
                     <v-img src="/images/icons/tuto.svg" class="icon-button" />

components/Layout/Footer/SolutionsFooter.vue

@@ -120,8 +120,8 @@ import { useRoute } from "vue-router";
 const route = useRoute();
 
 const hideManagerRow = route.path.includes("opentalent_manager");
-const hideArtistRow = route.path.includes("opentalent_artist");
-const hideSchoolRow = route.path.includes("opentalent_school") || route.path.includes("formation");
+const hideArtistRow = route.path.includes("opentalent_artist") || route.path.includes("formations");
+const hideSchoolRow = route.path.includes("opentalent_school") ;
 </script>
 
 <style scoped>
@@ -150,8 +150,7 @@ const hideSchoolRow = route.path.includes("opentalent_school") || route.path.inc
 .row-school,
 .row-manager {
   border-top: 1px solid #d1cdc7;
-  margin-left: 2rem;
-  margin-right: 2rem;
+
 }
 
 .solution-name {

components/Layout/Navigation.vue

@@ -2,7 +2,7 @@
   <div class="container-grey">
     <v-row>
       <v-col cols="12" class="buttons-col">
-        <nuxt-link to="https://admin.opentalent.fr/#/login/">
+        <nuxt-link to="https://admin.opentalent.fr/#/login/" style="text-decoration: none">
           <v-btn class="btn btn-common btn-login" text>
             <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
             logiciels
@@ -10,84 +10,85 @@
         </nuxt-link>
 
         <div class="vertical-bar" />
-        <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
-          <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
-        </v-btn>
+        <NuxtLink to="/agenda-culturel" style="text-decoration: none;">
+          <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
+            <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
+          </v-btn>
+        </NuxtLink>
       </v-col>
     </v-row>
   </div>
-    <v-row class="menu">
-      <v-col cols="3">
-        <nuxt-link to="/">
-          <v-img class="logo" src="/images/logo/navigation-logo.png" />
-        </nuxt-link>
-      </v-col>
-
-      <v-col cols="9">
-        <v-menu open-on-hover>
-          <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="link-style"
-              >Nos logiciels
-            </nuxt-link>
-          </template>
-
-          <v-list class="menu-list">
-            <nuxt-link
-              v-for="software in softwareLinks"
-              :key="software.name"
-              :to="software.href"
-              class="link-styles"
-            >
-              <v-list-item>
-                <v-list-item-title>{{ software.name }}</v-list-item-title>
-              </v-list-item>
-            </nuxt-link>
-          </v-list>
-        </v-menu>
-
-        <v-menu open-on-hover>
-          <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="link-style"
-              >Nos services
-            </nuxt-link>
-          </template>
-
-          <v-list>
-            <nuxt-link
-              v-for="service in serviceLinks"
-              :key="service.name"
-              :to="service.href"
-              class="link-styles"
-            >
-              <v-list-item>
-                <v-list-item-title>{{ service.name }}</v-list-item-title>
-              </v-list-item>
-            </nuxt-link>
-          </v-list>
-        </v-menu>
-
-        <v-menu open-on-hover>
-          <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="link-style">à propos</nuxt-link>
-          </template>
-
-          <v-list>
-            <nuxt-link
-              v-for="info in aboutLinks"
-              :key="info.name"
-              :to="info.href"
-              class="link-styles"
-            >
-              <v-list-item>
-                <v-list-item-title>{{ info.name }}</v-list-item-title>
-              </v-list-item>
-            </nuxt-link>
-          </v-list>
-        </v-menu>
-
-        <nuxt-link class="link-style" to="/actualites">Actualités</nuxt-link>
-      </v-col>
-    </v-row>
+  <v-row class="menu">
+    <v-col cols="3">
+      <nuxt-link to="/">
+        <v-img class="logo" src="/images/logo/navigation-logo.png" />
+      </nuxt-link>
+    </v-col>
+
+    <v-col cols="9">
+      <v-menu open-on-hover>
+        <template v-slot:activator="{ props }">
+          <nuxt-link v-bind="props" class="link-style"
+            >Nos logiciels
+          </nuxt-link>
+        </template>
+
+        <v-list class="menu-list">
+          <nuxt-link
+            v-for="software in softwareLinks"
+            :key="software.name"
+            :to="software.href"
+            class="link-styles"
+          >
+            <v-list-item>
+              <v-list-item-title>{{ software.name }}</v-list-item-title>
+            </v-list-item>
+          </nuxt-link>
+        </v-list>
+      </v-menu>
+
+      <v-menu open-on-hover>
+        <template v-slot:activator="{ props }">
+          <nuxt-link v-bind="props" class="link-style">Nos services </nuxt-link>
+        </template>
+
+        <v-list>
+          <nuxt-link
+            v-for="service in serviceLinks"
+            :key="service.name"
+            :to="service.href"
+            class="link-styles"
+          >
+            <v-list-item>
+              <v-list-item-title>{{ service.name }}</v-list-item-title>
+            </v-list-item>
+          </nuxt-link>
+        </v-list>
+      </v-menu>
+
+      <v-menu open-on-hover>
+        <template v-slot:activator="{ props }">
+          <nuxt-link v-bind="props" class="link-style">à propos</nuxt-link>
+        </template>
+
+        <v-list>
+          <nuxt-link
+            v-for="info in aboutLinks"
+            :key="info.name"
+            :to="info.href"
+            class="link-styles"
+          >
+            <v-list-item>
+              <v-list-item-title>{{ info.name }}</v-list-item-title>
+            </v-list-item>
+          </nuxt-link>
+        </v-list>
+      </v-menu>
+
+      <nuxt-link class="link-style" to="/actualites">Actualités</nuxt-link>
+      <nuxt-link class="link-style" to="/nous-contacter">Contact</nuxt-link>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
@@ -108,7 +109,6 @@ const serviceLinks = ref([
 const aboutLinks = ref([
   { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
   { name: "Nous rejoindre", href: "/nous-rejoindre" },
-  { name: "Nous contacter", href: "/nous-contacter" },
 ]);
 </script>
 

components/Logiciels/Artist/Abonnement.vue

@@ -52,7 +52,7 @@
 
         <v-col cols="8">
           <h5 class="title">
-            Opentalent Artist, la solution que vous attendiez...
+            Opentalent Artist, <br> la solution que vous attendiez...
           </h5>
           <p class="solution" style="text-align: justify">
             Conçu pour les structures artistiques telles que chorales,
@@ -62,13 +62,10 @@
             vos besoins d'évolution !
           </p>
           <h3 class="cmf">
-            Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
+            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
           </h3>
           <div class="border-row">
-            <!-- <v-img
-              class="logo-cmf"
-              src="/images/logiciels/school/cmf_logo_orange.png"
-            /> -->
+
 
             <div class="logo-cmf"></div>
             <div class="cmf-container">
@@ -139,16 +136,15 @@
 }
 
 .download-button {
+  font-weight: 700;
   background-color: #000;
   color: #fff;
   padding: 10px 20px;
   border-radius: 5px;
   text-decoration: none;
   display: inline-block;
-  margin-left: 1rem;
 }
 
-/* Style du rond noir */
 .black-circle {
   width: 90px;
   height: 90px;
@@ -169,17 +165,8 @@
   line-height: 18px;
   color: #091d20;
   margin-bottom: 4rem;
-  width: 45rem;
-}
-.border-row {
-  text-align: justify;
-  border: 1px solid #e5e5e5;
-  margin-bottom: 3rem;
-  display: flex;
-  align-items: center;
-  width: 50rem;
-  height: 15rem;
 }
+
 .cmf-container {
   margin-top: 4rem;
   margin-bottom: 4rem;
@@ -197,7 +184,7 @@
 
 .cmf-text {
   color: #091d20;
-  width: 20rem;
+  width: 25rem;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;

components/Logiciels/Artist/Comparatif.vue

@@ -10,7 +10,7 @@
         <LayoutUITitle
           title="Choisissez la version qui vous convient !"
         />
-        <LayoutTableComparatif
+        <CommonTableComparatif
         :standardPrice="'14€'"
         :premiumPrice="'18€'"
         :color="'#0e2d32'"
@@ -89,12 +89,6 @@ const tableData = [
     column2: "75 comptes",
     column3: "150 comptes",
   },
-  {
-    id: 14,
-    column1: "GESTION DES RÈGLEMENTS",
-    column2: "Option",
-    column3: "Option",
-  },
   {
     id: 15,
     column1: "ESPACE DE STOCKAGE",

components/Logiciels/Artist/Fonctionnalites.vue

@@ -26,13 +26,13 @@ const functionCarousel = ref(null);
 const cards = [
   {
     logo: "/images/logiciels/artist/fonctionnalites/Espaces_dedies.svg",
-    title: "ESPACES DÉDIÉS",
+    title: "ESPACES DÉDIÉS *",
     list: [
       "Administration",
-      "Membres",
-      "Adhérents",
-      "Sur tous supports <br> (ordinateur, tablette et smartphone)",
+      "Professeurs",
+      "Élèves / Familles",
     ],
+    options: ["*Disponible sur tous supports"],
   },
   {
     logo: "/images/logiciels/artist/fonctionnalites/Repertoire.svg",

components/Logiciels/Artist/Formations.vue

@@ -21,7 +21,7 @@
 
             <v-col cols="12" lg="6" md="6" sm="6">
               <h3 class="formation-title ml-6 mr-12">
-                Webinaire de découverte - Nouveaux utilisateurs
+                Webinaire - Partez à la découverte du logiciel Opentalent Artist
               </h3>
               <p
                 class="formation-details ml-6 mr-12"
@@ -62,21 +62,21 @@
           >
             <CommonCardStat
               :chiffre="'184 634'"
-              text="utilisateurs"
+              text="Utilisateurs"
               backgroundColor="#fac20a"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
               :chiffre="'3 424'"
-              text="structures"
+              text="Structures"
               backgroundColor="#fac20a"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
               :chiffre="13"
-              text="années d'expérience"
+              text="Années d'expérience"
               backgroundColor="#fac20a"
             />
           </v-col>
@@ -89,6 +89,7 @@
         :items="items"
         :trustMessage="'nous ont déjà adoptées'"
         :structureCount="'3400 structures'"
+        :structureCountColor="'#fac20a'"
       />
     </LayoutContainer>
   </div>
@@ -141,7 +142,7 @@ const items = ref([
 .formation-title {
   font-weight: 500;
   font-size: 1.8rem;
-  line-height: 26px;
+  line-height: 35px;
   color: #ffffff;
   margin-bottom: 1rem;
 }

components/Logiciels/Artist/MenuScroll.vue

@@ -1,135 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row >
-      <v-col
-        cols="12"
-        class="menu-container"
-        :class="{ 'sticky-menu': isSticky }"
-      >
-        <div
-          v-for="menu in menus"
-          :key="menu.label"
-          @click="navigate(menu)"
-        >
-          <v-chip
-            v-if="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, onMounted, reactive } from 'vue';
-
-const refs = reactive({
-  Presentation: null,
-  Avantages: null,
-  Fonctionnalites: null,
-  Comparatif: null,
-  Abonnement: null,
-  Webinaires: null,
-  Temoignages: null
-});
-
-const isSticky = ref(false);
-
-const handleScroll = () => {
-  const scrollPosition = window.scrollY;
-
-  if (scrollPosition > 800) { 
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
-  });
-
-  window.addEventListener('scroll', handleScroll);
-});
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-const menus = [
-  { label: "Presentation" },
-  { label: "Avantages" },
-  { label: "Fonctionnalites"},
-  { label: "Comparatif" },
-  { label: "Abonnement" },
-  { label: "Webinaires" },
-  { label: "Temoignages" },
-];
-
-const activeMenu = ref(menus[0].label);
-
-const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-</script>
-
-<style scoped>
-
-.sticky-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-.menu-container {
-  z-index: 3;
-  display: flex;
-  justify-content: space-around;
-  background: white;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  line-height: 19px;
-  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: 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,5 +1,5 @@
 <template>
-  <div>
+  <div id="Presentation">
     <CommonPresentation
       :pictoImages="pictoData"
       :presentationText="presentationData"

components/Logiciels/Artist/Reviews.vue

@@ -1,69 +1,12 @@
 <template>
   <div id="Temoignages">
     <LayoutContainer>
-      <div class="container-green">
-        <v-row>
-          <v-col cols="3">
-            <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
-              <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
-              <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">
-                <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>
+      <CommonReviewCard :cards="cards" />
     </LayoutContainer>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
 const cards = [
   {
     description:
@@ -72,13 +15,6 @@ const cards = [
     status: "Directeur musical ",
     structure: "Orchestre d'Harmonie de Cluses (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:
       "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.",
@@ -86,121 +22,15 @@ const cards = [
     status: "Président",
     structure: "Le choeur du Brevon (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",
-  },
 ];
 </script>
 
 <style scoped>
-
-.v-container{
+.v-container {
   padding: 0 !important;
 }
-.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;
-  margin-bottom: 2rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: #f7d241;
-  margin-top: 5rem;
-}
-
-.reviewer-status {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-  max-height: 200px;
-  overflow: auto;
-  font-size: 0.9rem;
-}
-
-.card-footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.reviews-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #fff;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 3rem;
-  text-align: center;
-}
-
-.card {
-  margin-left: 0.5rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 25rem;
-  max-height: 25rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
 
-.container-green {
-  background-color: #0e2d32;
+:deep().reviewer-name {
+  color: rgb(250, 194, 10) !important;
 }
 </style>

components/Logiciels/Artist/Solutions.vue

@@ -1,188 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <h4 class="solution-title text-center">
-          Ces solutions peuvent vous intéresser
-        </h4>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_artist_black.png"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Artist
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- 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>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Facturation</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Comptabilité</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Communication</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Site internet</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_manager_black.jpg"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Manager
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- list v-chip-->
-        <v-chip-group
-          active-class="primary--text"
-          column
-        >
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Agenda</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Facturation</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Comptabilité</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Communication</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Site internet</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.chip-detail {
-  color: #000000;
-}
-.chip-custom {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.2em;
-}
-
-.row-artist {
-  border-top: 1px solid #d1cdc7;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.solution-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #0e2d32;
-}
-
-.row-artist {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.solution-title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #000000;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.logo {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-</style>

components/Logiciels/Manager/Avantages.vue

@@ -92,7 +92,7 @@ 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",
+    image: "/images/avantages/manager/Confidentiel-les-donnees-appartiennent-aux-structures.jpg",
 
   },
 ]);

components/Logiciels/Manager/Fonctionnalites.vue

@@ -28,7 +28,7 @@ const cards = [
     logo:"images/logiciels/manager/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS *",
     list: ["Administration","Membres / Adhérents"],
-    options: ["*Disponible sur tous supports (ordinateur, tablette et smartphone)"],
+    options: ["*Disponible sur tous supports "],
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/Repertoire.svg",
@@ -104,13 +104,6 @@ const cards = [
       "Mise en place d'un système d'adhésion",
       "Communication en réseau",
     ],
-    logo: "images/logiciels/manager/fonctionnalites/Promotion.svg",
-    title: "PROMOTION DU RÉSEAU SUR L'AGENDA CULTUREL",
-    list: [
-      "Publication des événements des structures de votre réseau ",
-      "Référencement des structures de votre réseau sur l'annuaire",
-      "Diffusion des annonces du réseau et des structures de votre réseau"
-    ],
   },
 ];
 </script>

components/Logiciels/Manager/Formation.vue

@@ -67,7 +67,7 @@
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
               :chiffre="12"
-              text="années de collaboration"
+              text="Années de collaboration"
               backgroundColor="#d8050b"
             />
           </v-col>

components/Logiciels/Manager/Presentation.vue

@@ -30,10 +30,10 @@ const pictoData = [
     src: "/images/logiciels/manager/picto4.png",
     text: "Communiquez en réseau",
   },
-  {
-    src: "/images/logiciels/manager/picto5.png",
-    text: "Sur-mesure",
-  },
+  // {
+  //   src: "/images/logiciels/manager/picto5.png",
+  //   text: "Sur-mesure",
+  // },
   {
     src: "/images/logiciels/manager/picto6.png",
     text: "Pout tout type de réseau pyramidal",
@@ -57,7 +57,7 @@ const presentationData = {
   font-size: 1.5rem;
   font-weight: normal;
   line-height: 1.5rem;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 }
 
 :deep().picto-group {

components/Logiciels/Manager/Reviews.vue

@@ -1,68 +1,10 @@
 <template>
-  <div id="Temoignages">
-    <LayoutContainer>
-      <div class="container-green">
-        <v-row>
-          <v-col cols="3">
-            <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
-              <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
-              <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">
-                <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>
-    </LayoutContainer>
-  </div>
+  <LayoutContainer id="Temoignages">
+    <CommonReviewCard :cards="cards" />
+  </LayoutContainer>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
 
 const cards = [
   {
@@ -110,100 +52,8 @@ const cards = [
 .v-container{
   padding: 0 !important;
 }
-.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;
-  margin-bottom: 2rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
+:deep().reviewer-name {
   color: #e34461;
-  margin-top: 5rem;
-}
-
-.reviewer-status {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
 }
 
-.review-description {
-  text-align: left;
-  min-height: 150px;
-  overflow: auto;
-  font-size: 0.9rem;
-}
-
-.card-footer {
-  min-height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.reviews-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #fff;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 3rem;
-  text-align: center;
-}
-
-.card {
-  margin-left: 0.5rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 350px;
-  max-height: 350px;
-  margin-top: 2rem;
-  margin-bottom: .6rem;
-}
-
-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.container-green {
-  background-color: #0e2d32;
-}
 </style>

components/Logiciels/School/Fonctionnalites.vue

@@ -42,7 +42,7 @@ const cards = [
       "Professeurs",
       "Élèves / Familles",
     ],
-    options: ["*Disponible sur tous supports (ordinateur, tablette et smartphone)"],
+    options: ["*Disponible sur tous supports"],
   },
   {
     logo: "/images/logiciels/school/fonctionnalites/Répertoire.png",

components/Logiciels/School/Formations.vue

@@ -1,6 +1,5 @@
 <template>
-  <div id="formations">
-    <LayoutContainer>
+    <LayoutContainer id="Formations">
       <div class="container-green mt-12">
         <v-row>
           <LayoutUISubTitle
@@ -60,11 +59,11 @@
           >
             <CommonCardStat
               :chiffre="'30 > 1 500'"
-              text="élèves"
+              text="Elèves"
               backgroundColor="#c3e5e7"
             />
           </v-col>
-          <v-col cols="12" lg="3" class="dCompagnie de Cirque-flex justify-center align-center">
+          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
               :chiffre="234"
               text="Clients"
@@ -81,16 +80,15 @@
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
               :chiffre="13"
-              text="années d'expérience"
+              text="Années d'expérience"
               backgroundColor="#c3e5e7"
             />
           </v-col>
         </v-row>
       </v-container>
       <v-row />
-      <LayoutCarouselTrustCompanie :items="items" />
+      <CommonCarouselTrustCompanie :items="items" />
     </LayoutContainer>
-  </div>
 </template>
 
 <script setup>

components/Logiciels/School/MenuScroll.vue

@@ -1,138 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row >
-      <v-col
-        cols="12"
-        class="menu-container"
-        :class="{ 'sticky-menu': isSticky }"
-      >
-        <div
-          v-for="menu in menus"
-          :key="menu.label"
-          @click="navigate(menu)"
-        >
-          <v-chip
-            v-if="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, onMounted, onUnmounted, reactive } from 'vue';
-
-const refs = reactive({
-  Presentation: null,
-  Avantages: null,
-  Fonctionnalites: null,
-  Comparatif: null,
-  contact: null,
-  Temoignages: null,
-  formations: null
-});
-
-const isSticky = ref(false);
-
-const handleScroll = () => {
-  const scrollPosition = window.scrollY;
-
-  if (scrollPosition > 800) { 
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
-  });
-
-  window.addEventListener('scroll', handleScroll);
-});
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-// onUnmounted(() => {
-//   window.removeEventListener('scroll', handleScroll);
-// });
-const menus = [
-  { label: "Presentation" },
-  { label: "Avantages" },
-  { label: "Fonctionnalites" },
-  { label: "Comparatif" },
-  { label: "contact" },
-  { label: "formations" },
-  { label: "Temoignages" }
-];
-
-const activeMenu = ref(menus[0].label);
-
-const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-</script>
-
-<style scoped>
-
-.sticky-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-.menu-container {
-  z-index: 3;
-  display: flex;
-  justify-content: space-around;
-  background: white;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  line-height: 19px;
-  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: var(--Vert-100, #091D20);;
-  color: white;
-}
-
-.menu-container div:hover {
-  cursor: pointer;
-  text-decoration: underline;
-  z-index: 15;
-}
-</style>

components/Logiciels/School/Projet.vue

@@ -1,12 +1,14 @@
 <template>
-  <LayoutContainer id="contact">
-    <v-container>
-      <v-row no-gutters>
+  <LayoutContainer id="Contact">
+      <v-row >
         <v-col cols="6">
+          <!-- <div class="help-img">
+
+          </div> -->
           <v-img class="help-img" src="/images/contact/contact.jpg" />
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="5">
           <LayoutUISubTitle :titleText="` Contactez-nous `" />
 
           <LayoutUITitle :title="` Vous avez un projet ? `" />
@@ -20,20 +22,20 @@
               logiciel varie en fonction du nombre d'élèves, tout en conservant
               l'intégralité des fonctionnalités.
             </p>
+            <NuxtLink to="nous-contacter">
             <v-btn class="btn-contact"> Nous contacter </v-btn>
+            </NuxtLink>
           </div>
         </v-col>
       </v-row>
-    </v-container>
 
-    <v-container>
-      <v-row no-gutters>
-        <v-col cols="6" class="mt-12">
+      <v-row class="custom-row" >
+        <v-col cols="6" >
           <LayoutUISubTitle :titleText="` Adhérents CMF `" />
           <LayoutUITitle :title="` Bénéficiez de conditions privilégiées `" />
           <div class="ml-4">
             <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
-            <p class="contact-details">
+            <p class="contact-details mr-12">
               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
@@ -51,42 +53,43 @@
         </v-col>
         <v-col cols="6">
           <!-- <v-img class="logo-cmf" src="/images/logiciels/school/cmf_logo_orange.png" /> -->
-          <div class="logo-cmf"></div>
+          <div class="logo-cmf mt-12"></div>
         </v-col>
       </v-row>
-    </v-container>
   </LayoutContainer>
 </template>
 <script setup></script>
 
 <style scoped>
-.v-row {
-  max-width: 1800px;
-  margin: 0 auto;
+
+.custom-row {
+  width: 90%;
+  margin: auto;
 }
 
+
 .logo-cmf {
-  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
+  background-image: url("/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg");
   background-repeat: no-repeat;
   background-size: contain;
   width: 100%;
   height: 100%;
-  margin-top: 2rem;
-  margin-left: 2rem;
+}
+
+.help-img {
+
+  width: 100%;
+  height: 100%;
 }
 
 .btn-contact {
-  background: rgba(32, 147, 190, 0.4);
-  padding: 15px;
+  margin-top: 1rem;
+  height: 53px;
+  background: #64afb7;
+  border-radius: 6px;
+  color: white;
+  padding: 19px 28px;
   gap: 9px;
-  font-weight: 700;
-  font-size: 0.7rem;
-  line-height: 15px;
-  height: 2.5rem;
-  font-size: .9rem;
-  color: #fff;
-  margin-top: 2rem;
-  margin-bottom: 3rem;
 }
 
 @media (max-width: 1600px) {

components/Logiciels/School/Reviews.vue

@@ -1,75 +1,12 @@
 <template>
   <div id="Temoignages">
     <LayoutContainer>
-      <div class="container-green">
-        <v-row class="custom-row">
-          <v-col cols="3">
-            <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
-              <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
-              <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">
-                <v-container>
-                  <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>
-                </v-container>
-
-              </Slide>
-            </Carousel>
-
-          </v-col>
-        </v-row>
-      </div>
+      <CommonReviewCard :cards="cards" />
     </LayoutContainer>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify";
-const { smAndDown, mdAndDown, lgAndUp } = useDisplay();
-
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
 const cards = [
   {
     description:
@@ -103,110 +40,7 @@ const cards = [
 </script>
 
 <style scoped>
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-
-}
-.v-container{
+.v-container {
   padding: 0 !important;
 }
-.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;
-  margin-bottom: 2rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-  margin-top: 5rem;
-}
-
-.reviewer-status {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-  min-height: 200px;
-  overflow: auto;
-  font-size: 0.9rem;
-}
-
-.card-footer {
-  min-height: 100px;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.reviews-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #fff;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 3rem;
-  text-align: center;
-}
-
-.card {
-  margin-left: 0.5rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 450px;
-  max-height: 450px;
-  margin-top: 2rem;
-  margin-bottom: .6rem;
-}
-
-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.container-green {
-  background-color: #0e2d32;
-}
 </style>

components/Webinaire/Catalogue.vue

@@ -35,7 +35,7 @@
                 </div>
                 <p class="details-card">{{ course.description }}</p>
 
-                <div class="container-blue">
+                <div class="container-blue mt-6">
                   <h6 class="title-obj">Objectifs</h6>
                   <ul class="list-obj">
                     <li

components/Webinaire/FAQ.vue

@@ -8,7 +8,7 @@
       />
     </v-row>
 
-    <LayoutUITitlePage title="Tout savoir sur nos webinaire en lignes" subtitle="Les questions les plus fréquentes" />
+    <LayoutUITitlePage title="Tout savoir sur nos webinaire en ligne" subtitle="Les questions les plus fréquentes" />
     <div class="faq-container">
       <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
         <div class="question" @click="toggle(index)">
@@ -51,9 +51,10 @@ const faqItems = ref([
     answer: 'Il n\'y a pas de limite de participants lors de nos webinaires. Cependant, nous nous réservons le droit d\'annuler une session si le nombre de participants est inférieur à 3 personnes.',
   },
   {
-    question: 'J\'ai besoin d\'aide...',
-    answer: 'Notre équipe est là pour vous. <button onclick="window.location.href=\'/contact\'">Contactez-nous</button>'
-  },
+  question: 'J\'ai besoin d\'aide...',
+  answer: 'Notre équipe est là pour vous. <button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>'
+}
+
 ]);
 
 

pages/actualites/index.vue

@@ -61,7 +61,16 @@
                     class="text-decoration-none"
                   >
                     <v-card-title class="card-title">
+                      <!-- Icône étoile pour les actualités 'featured' -->
+
+                      <!-- Titre de l'actualité -->
                       {{ news.title }}
+                      <v-icon
+                        size="16"
+                        v-if="news.featured"
+                        class="fas fa-star"
+                        style="color: yellow"
+                      ></v-icon>
                     </v-card-title>
                   </NuxtLink>
 
@@ -164,17 +173,32 @@ const {
 } = useLazyAsyncData("files", async () => {
   const response = await apiRequestService.get(baseUrl, query.value);
   const collection = response["hydra:member"];
-
   const currentDate = new Date();
 
-  const filteredNews = collection.filter((item) => {
+  // Séparer les actualités en fonction de la propriété 'featured'
+  const featuredNews = collection
+    .filter((item) => item.featured)
+    .sort((a, b) => new Date(b.startPublication) - new Date(a.startPublication))
+    .slice(0, 3); // Prendre les trois dernières actualités 'featured'
+
+  const regularNews = collection.filter((item) => {
+    const startPublicationDate = new Date(item.startPublication);
     const endPublicationDate = new Date(item.endPublication);
-    return item.type === "ENTREPRISE" && endPublicationDate >= currentDate;
+
+    return (
+      !item.featured &&
+      item.type === "ENTREPRISE" &&
+      endPublicationDate >= currentDate &&
+      startPublicationDate <= currentDate
+    );
   });
 
-  totalItems.value = filteredNews.length;
-  console.log(filteredNews);
-  return filteredNews;
+  // Combinez les actualités 'featured' et les autres actualités
+  const combinedNews = [...featuredNews, ...regularNews];
+
+  totalItems.value = combinedNews.length;
+  console.log(combinedNews);
+  return combinedNews;
 });
 
 watch(page, () => {

pages/formations.vue

@@ -2,7 +2,7 @@
   <LayoutNavigation />
 
   <FormationBanner />
-  <FormationMenuScroll />
+  <CommonMenuScroll :menus="menus" class="mb-6" />
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
     <CommonStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
@@ -16,19 +16,24 @@
   <FormationParticipation />
   <FormationReviews />
   <LayoutFAQ />
-  <LayoutFooterSolutionsFooter id="layout-footer"/>
+  <LayoutFooterSolutionsFooter id="layout-footer" />
   <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { useRouter } from 'vue-router';
 
-const router = useRouter();
+const menus = ref([
+  { id: "Presentation", label: "Présentation", element: null },
+  { id: "Catalogue", label: "Catalogue", element: null },
+  { id: "Financement", label: "Financement", element: null },
+  { id: "Certification", label: "Certification", element: null },
+  { id: "Inscription", label: "Inscription", element: null },
+  { id: "Temoignages", label: "Temoignages", element: null }
+]).value;
 
 const shouldShowStickyMenu = ref(true);
 
-
 const squaresData = [
   {
     id: 1,
@@ -41,8 +46,7 @@ const squaresData = [
     id: 4,
     bgColor: "darkblue-square",
     iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler"
-
+    text: "Nous Appeler",
   },
 ];
 
@@ -80,4 +84,3 @@ onMounted(() => {
   }
 }
 </style>
-

pages/nous-contacter.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
   <ContactBanner />
-  <LayoutPrefooter />
+  <LayoutFooterPrefooter />
   <LayoutFooter />
 </template>
 

pages/nous-rejoindre/[id].vue

@@ -55,7 +55,7 @@
           <v-row class="custom-row">
             <h4 class="detail-job mt-6 ml-12">
               Date de parution :
-              <span class="bold">{{ job.startPublication }} </span>
+              <span class="bold">{{ formatDate(job.startPublication) }}</span>
             </h4></v-row
           >
         </v-col>
@@ -119,6 +119,14 @@ const jobID = route.params.id;
 const pending = ref(true);
 const config = useRuntimeConfig();
 
+const formatDate = (date: string) => {
+  const dateObject = new Date(date);
+  const day = dateObject.getDate();
+  const month = dateObject.getMonth() + 1;
+  const year = dateObject.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+
 onMounted(async () => {
   try {
     job.value = await apiRequestService.get(
@@ -393,11 +401,10 @@ const getImageUrl = (attachment: string) => {
 .back-button {
   text-decoration: none;
   color: #000000;
-  font-family: Barlow;
+  font-family: "Barlow";
   font-size: 0.9rem;
   font-style: normal;
   font-weight: 700;
-  line-height: 15px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
 }

pages/nous-rejoindre/index.vue

@@ -33,6 +33,8 @@ const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;
 const page: Ref<number> = ref(1);
 const itemsPerPage: Ref<number> = ref(10);
 const { t } = useI18n();
+
+
 const {
   data: jobs = [],
   pending,

pages/opentalent_artist.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
   <LogicielsArtistBanner />
-  <LogicielsArtistMenuScroll class="mb-6" />
+  <CommonMenuScroll :menus="menus" class="mb-6" />
 
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
     <CommonStickyMenu
@@ -23,6 +23,15 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
+const menus = ref([
+  { id: "Presentation", label: "Présentation", element: null },
+  { id: "Avantages", label: "Avantages", element: null },
+  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
+  { id: "Comparatif", label: "Comparatif", element: null },
+  { id: "Abonnement", label: "Abonnement", element: null },
+  { id: "Webinaires", label: "Wébinaires", element: null },
+  { id: "Temoignages", label: "Témoignages", element: null },
+]).value;
 
 const shouldShowStickyMenu = ref(true);
 

pages/opentalent_manager.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
   <LogicielsManagerBanner />
-  <LogicielsManagerMenuScroll />
+  <CommonMenuScroll :menus="menus" class="mb-6" />
 
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
     <CommonStickyMenu
@@ -22,7 +22,13 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-
+const menus = ref([
+  { id: "Presentation", label: "Présentation", element: null },
+  { id: "Avantages", label: "Avantages", element: null },
+  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
+  { id: "Formations", label: "Formations", element: null },
+  { id: "Temoignages", label: "Témoignages", element: null },
+]).value;
 const shouldShowStickyMenu = ref(true);
 
 const squaresData = [

pages/opentalent_school.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
   <LogicielsSchoolBanner />
-  <LogicielsSchoolMenuScroll  />
+  <CommonMenuScroll :menus="menus" class="mb-6" />
 
   <div v-if="shouldShowStickyMenu" id="sticky-menu" class="mt-6">
     <CommonStickyMenu
@@ -22,10 +22,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 
 const shouldShowStickyMenu = ref(true);
-
+const menus = ref([
+  { id: "Presentation", label: "Présentation", element: null },
+  { id: "Avantages", label: "Avantages", element: null },
+  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
+  { id: "Comparatif", label: "Comparatif", element: null },
+  { id: "Contact", label: "Contact", element: null },
+  { id: "Formations", label: "Formations", element: null },
+  { id: "Temoignages", label: "Temoignages", element: null },
+]).value;
 const squaresData = [
   {
     id: 1,

pages/poc.vue

@@ -1,103 +1,424 @@
 <template>
-  <LayoutContainer>
-    <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">
-        <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"> Nous contacter </v-btn>
+  <div id="Catalogue">
+    <LayoutContainer>
+      <div class="grey-container">
+        <v-row class="custom-row">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Des webinaires pour tous'"
+          />
+        </v-row>
+
+        <v-row class="custom-row">
+          <LayoutUITitlePage
+            title="SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE"
+            subtitle="Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité. Découvrez comment nos outils peuvent transformer votre quotidien : "
+          />
+        </v-row>
+
+        <v-row
+          style="
+            padding: 2rem;
+            max-width: 90%;
+            margin-left: auto;
+            margin-right: auto;
+          "
+          class="custom-row"
+        >
+          <v-col v-for="(course, index) in courses" :key="index" cols="4">
+            <v-card class="mb-4">
+              <v-card-text>
+                <div class="title-card-container d-flex align-center">
+                  <v-img class="logo-img mr-2" :src="course.imageUrl"></v-img>
+                  <h4 class="card-title">{{ course.title }}</h4>
+                </div>
+                <p class="details-card">{{ course.description }}</p>
+
+                <div class="container-blue mt-6">
+                  <h6 class="title-obj">Objectifs</h6>
+                  <ul class="list-obj">
+                    <li
+                      v-for="(objective, objIndex) in course.objectives"
+                      :key="objIndex"
+                    >
+                      {{ objective }}
+                    </li>
+                  </ul>
+                </div>
+
+                <div class="container-blue">
+                  <h6 class="title-obj">Programme</h6>
+                  <v-row>
+                    <v-col
+                      v-for="column in course.additionalObjectives"
+                      :key="column.id"
+                      cols="6"
+                    >
+                      <ul class="list-obj">
+                        <li
+                          v-for="(objective, objIndex) in column.objectives"
+                          :key="objIndex"
+                        >
+                          {{ objective }}
+                        </li>
+                      </ul>
+                    </v-col>
+                  </v-row>
+                </div>
+                <v-chip class="badge-time">
+                  <span>Durée : {{ course.duration }}</span></v-chip
+                >
+                <v-chip class="badge-time">
+                  <span>{{ course.price }}</span></v-chip
+                >
+
+                <v-chip class="chip-download" @click="toggleDetails(course)">
+                  Inscrivez-vous
+                </v-chip>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+
+      <div v-if="course.showDetails" class="container-inscription">
+        <div class="container-green">
+          <LayoutUISubTitle
+            :titleColor="'#fff'"
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Inscrivez vous'"
+          />
+          <h3 class="title-inscription text-center mt-4">
+            Vous y êtes presque !
+          </h3>
+          <iframe
+          :src="webinaireCalendars[course.title]"
+          width="700"
+          height="700"
+        ></iframe>
+          <v-row>
+            <v-col cols="12">
+              <v-btn @click="toggleDetails(course)">Fermer</v-btn>
+            </v-col>
+          </v-row>
         </div>
-      </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>
+      </div>
+    </LayoutContainer>
+  </div>
 </template>
-<script setup></script>
 
+<script setup>
+import { ref } from "vue";
+
+
+const currentWebinaire = ref(null);
+const webinaireCalendars = {
+  "Webinaire Artist":
+    "https://widget.weezevent.com/ticket/E920851/?code=62708&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+  "Webinaire School":
+    "https://widget.weezevent.com/ticket/E963899/?code=47365&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+  "Webinaire Manager":
+    "https://widget.weezevent.com/ticket/E923624/?code=4857&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+};
+
+const showModal = (webinaireTitle) => {
+  currentWebinaire.value = webinaireTitle.trim();
+};
+
+const closeModal = () => {
+  currentWebinaire.value = null;
+};
+const downloadPdf = (pdfUrl) => {
+  window.open(pdfUrl, "_blank");
+};
+const courses = [
+  {
+    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.. ",
+    objectives: [
+      "Découvrir le logiciel Opentalent Artist",
+      "Présentation des principales fonctionnalités",
+      "Quelles sont les différences entre les versions Standard & Premium ?",
+      "Qu'est ce que l'Agenda culturel et l'annuaire ? ",
+    ],
+    duration: "1H30",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: [
+          "Accès et interface",
+          "Configuration",
+          "Répertoire",
+          "Agenda",
+        ],
+      },
+      {
+        id: 2,
+        objectives: [
+          "Parc matériel",
+          "Rapport d’activité",
+          "Site internet",
+          "Communication",
+        ],
+      },
+    ],
+    price: "Gratuit",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
+  },
+  {
+    // number: "02",
+    title: "Webinaire School",
+    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: [
+      "Découvrir le logiciel Opentalent School",
+      "Comprendre l'écosystème de l'outil",
+      "Présentation des principales fonctionnalités",
+      "Identifier les avantages de cet outil pour votre structure",
+    ],
+    duration: "1h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: [
+          "Accès et interface",
+          "Configuration",
+          "Répertoire",
+          "Agenda",
+        ],
+      },
+      {
+        id: 2,
+        objectives: [
+          "Parc matériel",
+          "Rapport d’activité",
+          "Site internet",
+          "Communication",
+        ],
+      },
+    ],
+    price: "Gratuit",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
+  },
+  {
+    title: "Webinaire Manager",
+    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: [
+      "Configurer l'appel de cotisation",
+      "Suivre l'appel de cotisation",
+      "Gérer votre site internet (débutants)",
+      "Gérer votre site internet (confirmés)",
+    ],
+    duration: "1H30",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: [
+          "Mieux connaitre votre logiciel",
+          "Optimiser votre temps administratif",
+        ],
+      },
+      {
+        id: 2,
+        objectives: [
+          "Communiquer avec votre réseau",
+          "Promouvoir votre organisation",
+        ],
+      },
+    ],
+    price: "Gratuit",
+    downloadLink:
+      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
+  },
+];
+courses.forEach(course => course.showDetails = false);
+const toggleDetails = (course) => {
+  course.showDetails = !course.showDetails;
+};
+
+</script>
 <style scoped>
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
 
-: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;
+.grey-container {
+  background-color: #f8f8f8;
+}
+.chip-download {
+  border-radius: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.btn-contact {
-  background: rgba(32, 147, 190, 0.4);
-  border-radius: 6px;
-  color: #fff;
+.badge-time {
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-top: 2rem;
-  margin-bottom: 3rem;
+.badge-time span {
+  color: var(--Vert-90, #0e2d32);
 }
 
-.contact-details {
+.list-obj {
+  margin-top: 0.5rem;
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 300;
+  font-size: 14px;
+  line-height: 18px;
+
+  color: #000000;
+}
+
+.title-obj {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
   font-size: 16px;
   line-height: 20px;
+  color: #0e2d32;
+}
+
+.container-blue {
+  justify-content: space-between;
+  align-items: center;
+  background: #c3e5e7;
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 1rem;
+  padding-left: 1.5rem;
+  height: 11rem;
+}
+
+.details-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
   color: #091d20;
-  width: 40rem;
-  text-align: justify;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  height: 5rem;
+}
+
+.title-card-container {
+  border-bottom: 1px solid #0e2d32;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.subtitle {
-  font-weight: 400;
-  font-size: 34px;
-  line-height: 38px;
-  color: #071b1f;
+.card-title {
+  font-weight: 600;
+  font-size: 1.2rem;
+  margin-bottom: 0.8rem;
+}
+
+.logo-img {
+  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;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+: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;
 }
 
-.help-img {
+.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: 90%;
-  object-fit: cover;
-  object-position: center;
+  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>

pages/qui-sommes-nous.vue

@@ -1,13 +1,14 @@
 <template>
   <LayoutNavigation />
+
+  <AboutBanner />
+  <CommonMenuScroll :menus="menus" class="mb-6" />
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
     <CommonStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
   </div>
-  <AboutBanner />
-  <AboutMenuScroll />
   <AboutHistoire />
   <AboutValeurs />
   <AboutLogiciels />
@@ -21,6 +22,16 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
+
+const menus = ref([
+  { id: "Qui-sommes-nous", label: "Qui sommes-nous", element: null },
+  { id: "valeurs", label: "Nos valeurs", element: null },
+  { id: "software", label: "Nos logiciels", element: null },
+  { id: "agenda", label: "L'agenda opentalent", element: null },
+  { id: "story", label: "Notre Histoire", element: null },
+  { id: "team", label: "Notre équipe", element: null },
+  { id: "faq", label: "Aide", element: null },
+]).value;
 const shouldShowStickyMenu = ref(true);
 const squaresData = [
   {

pages/stick.vue

@@ -1,138 +1,40 @@
 <template>
-  <LayoutNavigation />
-  <LogicielsSchoolBanner />
-
-  <LogicielsSchoolMenuScroll class="sticky-scroll" />
-
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <v-row class="outil-row">
-      <v-col cols="3">
-        <div class="container-square">
-          <v-row class="blue-square">
-            <div>
-              <v-icon class="fa-regular fa-comments icon" />
-              <p class="text-square">Nous contacter</p>
-            </div>
-          </v-row>
-
-          <v-row class="blue-square">
-            <div>
-              <v-icon class="fa-regular fa-circle-info icon" />
-              <p class="text-square">Demander une demo</p>
-            </div>
-          </v-row>
-
-          <v-row class="blue-square">
-            <div>
-              <v-icon class="fa-brands fa-readme icon" />
-              <p class="text-square">Brochure</p>
-            </div>
-          </v-row>
-
-          <v-row class="darkblue-square">
-            <div>
-              <v-icon class="fa-solid fa-phone icon" />
-              <p class="text-square">Nous Appeler</p>
-            </div>
-          </v-row>
-        </div>
-      </v-col>
-    </v-row>
-  </div>
-
-  <LogicielsSchoolOutil />
-  <LogicielsSchoolAvantages />
-  <LogicielsSchoolFonctionnalites />
-  <LogicielsSchoolPremium />
-  <LogicielsSchoolProjet />
-  <LogicielsSchoolAccompagnement />
-  <LogicielsSchoolReviews />
-  <LogicielsSchoolAgenda />
-  <LayoutFAQ />
-  <LogicielsSchoolSolutions />
-  <LayoutFooter id="layout-footer" />
+  <CommonReviewCard
+    :cards="cards"
+  />
 </template>
 
-<script setup>
-import { ref, onMounted } from "vue";
-
-const shouldShowStickyMenu = ref(true);
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
+<script>
+
+const cards = [
+  {
+    description:
+      "C'est un logiciel simple d'utilisation après la formation. Pensé pour la musique, il s'adapte rès bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+    name: "Patrice CATHELIN ",
+    status: "Directeur administratif & pédagogique ",
+    structure: "Conservatoire de Musique & de Danse de Sens (78)",
+  },
+  {
+    description:
+      "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
+    name: "Karine GIRAUD",
+    status: "Secrétaire administrative",
+    structure: "Association Musicale Sainte Cécile de Lagord (17)",
+  },
+  {
+    description:
+      "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré..",
+    name: "Laurent BEL",
+    status: "Directeur administratif & pédagogique",
+    structure: " École de Musique EPIC Musique en 4 Rivières (74)",
+  },
+  {
+    description:
+      "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien..",
+    name: "Philippe BORY",
+    status: "Personnel administratif",
+    structure: "École d'Arts de Saint-Michel-sur-Orge (91)",
+  },
+];
 
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
 </script>
-
-<style scoped>
-
-.container-square {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.blue-square,
-.darkblue-square {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Barlow";
-  width: 10rem;
-  height: 7rem;
-  margin-left: 14rem;
-  padding: 1rem;
-}
-
-.blue-square {
-  background: rgba(32, 147, 190);
-}
-
-.darkblue-square {
-  background: #0e2d32;
-}
-
-.text-square {
-  margin: 0.5rem 2rem;
-}
-
-.icon {
-  margin-right: 1rem;
-}
-
-.icon-logiciel {
-  color: rgba(32, 147, 190);
-  margin-right: 1rem;
-}
-
-.outil-row {
-  margin: 5rem 0;
-}
-
-#sticky-menu {
-  position: sticky;
-  top: 10rem;
-  z-index: 10;
-  margin-left: 89rem;
-  margin-bottom: -40rem;
-}
-</style>