page webinaire

components/About/Banner.vue

@@ -1,10 +1,7 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <LayoutUIBannerTitle
-        :centerText="'Qui sommes nous ?'"
-      />
-    </v-row>
+      <LayoutUITitlePage title="Qui sommes nous ?" />
+
 
     <v-row>
       <v-col cols="12">

components/About/Equipe.vue

@@ -0,0 +1,115 @@
+<template>
+  <LayoutContainer>
+    <v-row class="mt-12">
+      <LayoutUISubTitle
+        :iconSize="6"
+        :iconClasses="iconClasses"
+        :titleText="'notre équipe'"
+      />
+    </v-row>
+    <LayoutUITitle title="Une équipe spécialisée et passionnée" />
+    <h4 class="details ml-12 mt-6 mb-12">
+      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 class="ml-12 mr-12">
+      <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>
+      </v-col>
+    </v-row>
+
+    <v-row class="ml-12 mr-12"> 
+      <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>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+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.' },
+
+]);
+
+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' }
+]);
+</script>
+
+<style scoped>
+
+.v-card {
+  max-width: 284px;
+  border: none !important; 
+  box-shadow: none !important; 
+  background-color: transparent !important;
+}
+
+.details {
+  color: var(--Vert-100, #091D20);
+  font-family: Barlow;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 20px;
+  width: 30rem;
+}
+
+.v-card {
+  max-width: 284px;
+  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; 
+}
+
+.name{
+  color: #112528;
+/* 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; 
+}
+
+</style>

components/About/FAQ.vue

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

components/Formation/Banner.vue

@@ -1,15 +1,6 @@
 <template>
   <LayoutContainer>
-    <div class="container-title">
-      <v-col cols="12">
-        <h1 class="formation">Formation</h1>
-        <h4 class="subtitle-formation">
-          Prise en main ou piqûre de rappel,
-          <br />
-          on est toujours à vos côtés.
-        </h4>
-      </v-col>
-    </div>
+    <LayoutUITitlePage title="Formation" subtitle="Prise en main ou piqûre de rappel,on est toujours à vos côtés. " />
     <v-row>
       <v-col cols="12" style="position: relative">
         <img
@@ -53,16 +44,12 @@
   font-weight: 300;
   line-height: 40px;
 }
-.subtitle-formation {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 30px;
-  line-height: 35px;
-  text-align: center;
-  color: #000000;
-  margin-left: 34rem;
-  margin-right: 34rem;
+
+:deep().subtitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: .1rem;
+  margin-bottom: 1rem;
 }
 
 .formation {
@@ -75,11 +62,6 @@
   color: #000000;
   margin-bottom: 1rem;
 }
-.container-title {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-}
 
 .menu-container {
   display: flex;

components/Home/Caroussel.vue

@@ -1,8 +1,7 @@
 <template>
   <LayoutContainer>
 
-    <h1 class="title text-center"> LOGICIELS CULTURELS </h1>
-    <h2 class="subtitle text-center">UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</h2>
+    <LayoutUITitlePage title="LOGICIELS CULTURELS" subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE" />
     <!-- <v-carousel
       ref="carousel"
       v-model="activeIndex"

components/JoinUs/Banner.vue

@@ -1,10 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col cols="12" class="title">
-        <h1 class="text-center">Nous rejoindre</h1>
-      </v-col>
-    </v-row>
+    <LayoutUITitlePage title="Nous rejoindre ?" />
 
     <v-row>
       <v-col cols="12">

components/Layout/Card/Stat.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card" :style="{ backgroundColor: props.backgroundColor }">
+    <h3 class="chiffre">
+      {{ props.chiffre }}
+    </h3>
+    <p>{{ props.text }}</p>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  chiffre: {
+    type: [String, Number],
+    default: 'XXX',
+  },
+  text: {
+    type: String,
+    default: 'Texte par défaut',
+  },
+  backgroundColor: {
+    type: String,
+    default: '#fac20a', // Couleur de fond par défaut de la carte
+  },
+});
+</script>
+
+<style scoped>
+.card {
+  border-radius: 10px;
+  width: 36rem;
+  height: 15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.chiffre {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 60px;
+  line-height: 68px;
+  text-align: center;
+  color: #091d20;
+  margin-bottom: 0.5rem;
+}
+</style>

components/Layout/Card/StatCard.vue

@@ -1,63 +0,0 @@
-<template>
-  <LayoutContainer> 
-  <v-row class="card-container">
-    <v-col cols="3" class="d-flex justify-center align-center small-padding">
-      <div class="card" :style="{ backgroundColor: backgroundColor }">
-        <h3 class="chiffre">{{ chiffre }}</h3>
-        <p>{{ label }}</p>
-      </div>
-    </v-col>
-  </v-row>
-</LayoutContainer> 
-</template>
-
-<script setup>
-import { ref, defineProps } from 'vue';
-
-const props = defineProps({
-  chiffre: String,
-  label: String,
-  backgroundColor: {
-    type: String,
-    default: '#c3e5e7' 
-  }
-});
-
-const backgroundColor = ref(props.backgroundColor);
-</script>
-
-<style scoped>
-
-.chiffre {
-  font-weight: 600;
-  font-size: 50px;
-  line-height: 68px;
-  text-align: center;
-  color: #091d20;
-  margin-bottom: 0.5rem;
-}
-
-
-.card-container {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-left: 5rem;
-  margin-right: 5rem;
-}
-.card {
-  background: #c3e5e7;
-  border-radius: 10px;
-  padding-left: 5rem;
-  padding-right: 5rem;
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  max-width: 15rem;
-  width: 36rem;
-  height: 15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-</style>

components/Layout/Carousel/Fonctionnalite.vue

@@ -1,65 +1,55 @@
 <template>
   <div id="Fonctionnalites">
     <LayoutContainer>
-      <div class="container-green" v-if="!mdAndDown">
-
+      <div class="container-green">
+        <LayoutUISubTitle
+          title-color="#fff"
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
+        />
+        <LayoutUITitle
+          title="Des fonctionnalités adaptées à vos besoins"
+          title-color="#fff"
+        />
         <v-row>
           <v-col cols="12">
             <div class="d-flex justify-center align-center">
               <div class="carousel-button" @click="previousAction">
-                <i class="fas fa-chevron-left" />
+                <i class="fas fa-chevron-left"></i>
               </div>
               <div class="carousel-button" @click="nextAction">
-                <i class="fas fa-chevron-right" />
+                <i class="fas fa-chevron-right"></i>
               </div>
             </div>
           </v-col>
         </v-row>
         <v-row>
           <v-col cols="12">
-            <Carousel
-              ref="functionCarousel"
-              class="carousel"
-              items-to-show="5"
-              items-to-scroll="1"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                :class="{
-                  card: true,
-                  'active-card': index === activeCardIndex,
-                }"
-              >
-                <v-card>
-                  <v-row>
-                    <v-img
-                      :src="card.logo"
-                      alt=""
-                      class="justify-center logo-fonctionnalite mt-4 mb-4"
-                    />
-                  </v-row>
-
-                  <v-card-title>
-                    <h4 class="card-title">{{ card.title }}</h4>
-                  </v-card-title>
-
-                  <v-card-item>
-                    <v-card-text class="review-description">
-                      <ul>
-                        <li class="list-detail" v-for="item in card.list" :key="item">
-                          {{ item }}
-                        </li>
-                      </ul>
-                    </v-card-text>
-
-                    <div class="card-footer">
-                      <p class="reviewer-structure">
-                        {{ card.option }}
-                      </p>
-                    </div>
-                  </v-card-item>
-                </v-card>
+            <Carousel ref="functionCarousel" :items-to-show="5" :items-to-scroll="1" class="carousel">
+              <Slide v-for="(card, index) in cards" :key="index" :class="{ card: true, 'active-card': index === activeCardIndex }">
+                <div class="card-container">
+                  <v-card>
+                    <v-img :src="card.logo" :alt="card.title" class="mx-auto card-img" />
+                    <v-card-title>
+                      <h5 class="card-title">{{ card.title }}</h5>
+                    </v-card-title>
+                    <v-card-item>
+                      <v-card-text class="review-description">
+                        <ul>
+                          <li class="list-detail" v-for="item in card.list" :key="item">
+                            {{ item }}
+                          </li>
+                        </ul>
+                      </v-card-text>
+                      <div class="card-footer">
+                        <p class="reviewer-structure">
+                          {{ card.option }}
+                        </p>
+                      </div>
+                    </v-card-item>
+                  </v-card>
+                </div>
               </Slide>
             </Carousel>
           </v-col>
@@ -87,7 +77,6 @@ const props = defineProps({
   },
 });
 
-
 const { width, mdAndDown } = useDisplay();
 const functionCarousel = ref(null);
 const activeCardIndex = ref(0);
@@ -110,27 +99,26 @@ const previousAction = () => {
 };
 
 </script>
+
 <style scoped>
-.v-card-title-container {
-  display: flex;
-  flex-direction: row;
-}
-.logo-fonctionnalite {
+
+.card-img{
   width: 5rem;
-  height: 5rem;
+  height: 3rem;
+  margin-top: 1rem;
 }
-
 .list-detail {
   font-weight: 300;
-  font-size: 1.2rem;
+  font-size: .9rem;
   line-height: 1.2rem;
   margin-bottom: 1rem;
   color: #000000;
-  width: 100%;
+  word-break: none ;
+  
 }
 .card-title {
   white-space: pre-wrap;
-  font-size: 1.1rem;
+
 }
 .carousel {
   margin-left: 2rem;
@@ -160,14 +148,12 @@ const previousAction = () => {
 }
 
 .icon-title {
-  color: rgba(32, 147, 190, 0.6);
+  color: #fac20a;
   margin-right: 0.5rem;
 }
 .card {
   font-weight: 300;
   transition: transform 0.3s;
-  min-width: 30%;
-  max-width: 30%;
 }
 
 .card.active-card {
@@ -177,34 +163,17 @@ const previousAction = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 4rem;
-  height: 4rem;
+  width: 40px;
+  height: 40px;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 1rem;
+  margin-top: 4rem;
 }
 
 .carousel-button i {
   color: #fff;
-  cursor: pointer;
-}
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-}
-
-.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 {
@@ -226,24 +195,8 @@ const previousAction = () => {
   margin-right: 2rem;
 }
 
-.card-text {
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  height: 12rem;
-}
-.reviews-title {
-  color: #fff;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-  width: 10rem;
-}
-
 .card {
+  width: 80rem;
   min-height: 35rem;
   max-height: 35rem;
   border-radius: 1rem;
@@ -252,8 +205,10 @@ const previousAction = () => {
 .v-card {
   border-radius: 1rem;
   min-height: 25rem;
-  max-width: 20rem;
-  min-width: 20rem;
+  max-height: 25rem;
+  min-width: 90%;
+  max-width: 90%;
+  
 }
 
 .card-container {

components/Layout/UI/AvantageCard.vue

@@ -10,6 +10,9 @@
       <p class="details-card">
         {{ description }}
       </p>
+      <ul class="dynamic-list ml-2">
+        <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
+      </ul>
       <div class="image-container">
         <v-img :src="image" />
         <v-chip class="chip-card" v-if="isMemberCMF">
@@ -21,8 +24,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { defineProps, useRoute } from 'vue-router';
+import { defineProps } from "vue";
 
 const props = defineProps({
   title: String,
@@ -30,37 +32,18 @@ const props = defineProps({
   description: String,
   image: String,
   isMemberCMF: Boolean,
-});
-
-const route = useRoute();
-
-// Compute the numberColor based on the current route
-const dynamicNumberColor = computed(() => {
-  // Check if the current route path includes 'artist' or 'school'
-  if (route.path.includes('opentalent_artist')) {
-    // Set to yellow color for artist page
-    return '#fac20a'; // Replace with your exact color value
-  } else if (route.path.includes('opentalent_school')) {
-    // Set to blue color for school page
-    return 'rgba(32, 147, 190, 0.6)'; // Replace with your exact color value
-  }
-  // You can add a default color if needed
-  return '#000'; // Default color
+  dynamicNumberColor: String,
+  listItems: Array
 });
 </script>
 
 <style scoped>
 .number-card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.3rem;
-  color: #7fcdd2;
 }
 
 .description-card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.5rem;
   line-height: 1rem;
@@ -73,9 +56,15 @@ const dynamicNumberColor = computed(() => {
   margin-bottom: 1rem;
 }
 
+.dynamic-list {
+  font-weight: normal;
+  font-size: .8rem;
+  color: #091d20;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .details-card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: normal;
   font-size: 1rem;
   color: #091d20;
@@ -83,8 +72,6 @@ const dynamicNumberColor = computed(() => {
   margin-bottom: 1rem;
 }
 .number-card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.3rem;
   color: #7fcdd2;
@@ -95,8 +82,6 @@ const dynamicNumberColor = computed(() => {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 1.3rem;
   margin-bottom: 1rem;
@@ -108,20 +93,8 @@ const dynamicNumberColor = computed(() => {
   margin-right: 2rem;
 }
 
-.title {
-  font-family: "Barlow";
-  margin-top: 2rem;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-  margin-left: 2rem;
-}
-
 .subtitle-avantage {
   color: #071b1f;
-  font-family: "Barlow";
   font-size: 1rem;
   font-style: normal;
   font-weight: 600;
@@ -131,11 +104,6 @@ const dynamicNumberColor = computed(() => {
   margin-left: 1rem;
 }
 
-.icon-title {
-  color: rgba(32, 147, 190, 0.6);
-  font-size: 1.5rem;
-  margin-left: 2rem;
-}
 
 .image-container {
   position: relative;
@@ -150,13 +118,9 @@ const dynamicNumberColor = computed(() => {
   color: white;
   border: 1px solid #0e2d32;
   border-radius: 3rem;
-
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1rem;
   line-height: 16px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.9);
 }
 
 .cmf {

components/Layout/UI/Banner.vue

@@ -11,7 +11,7 @@
           <div class="black-square" :style="{ backgroundColor: squareColor }">
             <v-row>
               <div class="content-row">
-                <v-icon size="50" class="fa-brands fa-react icon" />
+                <v-icon size="50"  class="fa-brands fa-react icon "  />
                 <p class="description-square" :style="{ color: textColor }">
                   {{ squareText }}
                 </p>
@@ -135,7 +135,7 @@ const props = defineProps({
 
 .cover-image {
   width: 100%;
-  height: 33rem;
+  height: 30rem;
   object-fit: cover;
   object-position: center 20%; 
   transition: transform 0.2s;

components/Layout/UI/Presentation.vue

@@ -2,7 +2,7 @@
   <div id="Presentation">
     <LayoutContainer>
       <v-row class="mt-12">
-        <v-col cols="6" md="4">
+        <v-col cols="4">
           <LayoutUISubTitle
             :iconSize="6"
             :iconColor="iconColor"
@@ -30,23 +30,29 @@
         </div>
         </v-col>
 
-        <v-col cols="6" md="7" v-if="!mdAndDown">
+        <v-col cols="6"  v-if="!mdAndDown">
           <LayoutUITitle :title="presentationText.toolTitle" />
-          <ul class="outil-ul ml-12">
+          <ul class="outil-ul ml-12 mt-6">
             <li class="outil-list" v-for="item in presentationText.toolList" :key="item">
               {{ item }}
             </li>
           </ul>
-          <div>
-            <h2 class="mt-12 ml-12">{{ presentationText.characteristicsTitle }}</h2>
-            <div class="picto-container ml-12 mr-12">
+
+        </v-col>
+      </v-row>
+
+      <v-row class="row-custom">
+        <v-col cols="4" />
+        <v-col  cols="6">
+          <h2 class="mt-12 ml-12">{{ presentationText.characteristicsTitle }}</h2>
+            <div class="picto-container">
               <div class="picto-group" v-for="picto in pictoImages" :key="picto.text">
                 <v-img :src="picto.src" class="picto-img" />
                 <p class="picto-text" :style="{ color: pictoColor }">{{ picto.text }}</p>
               </div>
             </div>
-          </div>
         </v-col>
+
       </v-row>
     </LayoutContainer>
   </div>
@@ -102,25 +108,27 @@ const props = defineProps({
     default: '#091d20'
   }
 });
-const titleText = ref(''); // Use a ref to hold the title text
-const iconColor = ref(''); // Use a ref to hold the icon class
+const titleText = ref(''); 
+const iconColor = ref(''); 
 
-// Access the current route
 const route = useRoute();
 
-// A computed function to set titleText and iconClasses based on route
 onMounted(() => {
   if (route.path.includes('opentalent_artist')) {
     titleText.value = "Présentation d'Opentalent Artist";
-    iconColor.value = '#fac20a'; // replace 'icon-yellow' with actual class if different
+    iconColor.value = '#fac20a'; 
   } else if (route.path.includes('opentalent_school')) {
     titleText.value = "Présentation d'Opentalent School";
-    iconColor.value = 'rgba(32, 147, 190, 0.6)'; // replace 'icon-blue' with actual class if different
+    iconColor.value = 'rgba(32, 147, 190, 0.6)'; 
   }
 });
 </script>
 
 <style scoped>
+
+.row-custom {
+  margin-top: -18rem;
+}
 .pricing-details {
   display: flex;
   flex-direction: column;
@@ -203,7 +211,6 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  /** on colle */
   margin-left: 1rem;
   margin-right: 1rem;
 }

components/Layout/UI/TitlePage.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1 class="title text-center">{{ title }}</h1>
+    <h2 v-if="subtitle" class="subtitle text-center">{{ subtitle }}</h2>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  title: String,
+  subtitle: String,
+});
+</script>
+
+<style scoped>
+
+.text-center {
+  text-align: center;
+}
+
+.title {
+  font-size: 4rem;
+  line-height: 3.5rem;
+  letter-spacing: .3rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+}
+
+
+.subtitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: .5rem;
+  margin-bottom: 8rem;
+}
+</style>

components/Logiciels/Artist/Abonnement.vue

@@ -3,11 +3,12 @@
     <LayoutContainer>
       <v-row class="mt-12">
         <v-col cols="4">
-          <div class="title-container mt-3">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle">S'abonner dès maintenant</h4>
-
-          </div>
+          <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'S\'abonner dès maintenant'"
+          :iconColor="'#fac20a'"
+        />
           <div class="profile-circle"></div>
 
           <div class="subscription-info">

components/Logiciels/Artist/Avantages.vue

@@ -2,191 +2,66 @@
   <div id="Avantages">
     <LayoutContainer>
       <v-row class="mt-12">
-        <div class="title-container">
-          <v-icon size="6" class="fa-solid fa-circle icon-title" />
-          <h4 class="subtitle">Découvrez les avantages de la solution</h4>
-        </div>
-      </v-row>
-      <v-row>
-        <h3 class="title">Des avantages concrets</h3>
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Découvrez les avantages de la solution'"
+          :iconColor="'#fac20a'"
+        />
       </v-row>
+      <LayoutUITitle title="Des avantages concrets" />
 
       <v-row class="row">
-        <v-col cols="4">
-          <div class="title-card">
-            <h4 class="description-card">Un gain de temps</h4>
-            <span class="number-card">01</span>
-          </div>
-
-          <hr />
-          <p class="details-card">
-            Centralisez toutes vos informations sur un seul et même outil et ne
-            perdez plus de temps avec des fichiers sur diverses applications.
-          </p>
-          <div class="image-container">
-            <v-img src="/images/logiciels/school/screen3.png" />
-            <v-chip class="chip-card">
-              <p class="cmf">Membre CMF</p>
-            </v-chip>
-          </div>
-        </v-col>
-        <v-col cols="4">
-          <div class="title-card">
-            <h4>Une activité structurée</h4>
-            <span class="number-card">02</span>
-          </div>
-
-          <hr />
-          <p class="details-card">
-            Des espaces dédiés et des outils spécifiques à vos besoins pour une
-            gestion optimisée et une lecture simplifiée.
-          </p>
-          <div class="image-container">
-            <v-img src="/images/logiciels/school/screen3.png" />
-            <v-chip class="chip-card">
-              <p class="cmf">Membre CMF</p>
-            </v-chip>
-          </div>
-        </v-col>
-        <v-col cols="4">
-          <div class="title-card">
-            <h4>Une gestion collaborative</h4>
-            <span class="number-card">03</span>
-          </div>
-          <hr />
-          <p class="details-card">
-            Grâce à des comptes dédiés, personnalisés et autonomes, permettez à
-            vos membres de mettre à jour leurs informations et d'interagir dans
-            leur agenda.
-          </p>
-          <div class="image-container">
-            <v-img src="/images/logiciels/school/screen3.png" />
-            <v-chip class="chip-card">
-              <p class="cmf">Membre CMF</p>
-            </v-chip>
-          </div>
+        <v-col cols="4" v-for="(card, index) in cards" :key="index">
+          <LayoutUIAvantageCard
+            :title="card.title"
+            :number="card.number"
+            :description="card.description"
+            :image="card.image"
+            :isMemberCMF="card.isMemberCMF"
+            :dynamicNumberColor="'#fac20a'"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
-
-<style scoped>
-.chip-card {
-  color: #000000;
-  position: absolute;
-  margin-left: 2rem;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 16px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.9);
-}
-
-.cmf {
-  color: #000000;
-}
-.image-container {
-  position: relative;
-}
-
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 25rem;
-  margin-left: 2rem;
-}
-
-.icon-title {
-  margin-right: 0.7rem;
-  color: #fac20a;
-}
-
-.v-chip {
-  background: white;
-  color: black;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: normal;
-  font-size: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-}
-.number-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #f9d648;
-}
+<script setup>
+import { ref } from "vue";
 
-.title-card {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-}
+const cards = ref([
+  {
+    title: "Un gain de temps",
+    number: "01",
+    description:
+      "Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.",
+    image: "/images/logiciels/school/screen3.png",
+    isMemberCMF: true,
+    numberColor: "#f9d648",
+  },
+  {
+    title: "Une activité structurée",
+    number: "02",
+    description:
+      "Des espaces dédiés et des outils spécifiques à vos besoins pour une gestion optimisée et une lecture simplifiée.",
+    image: "/images/logiciels/school/screen3.png",
+    isMemberCMF: false,
+    numberColor: "#f9d648",
+  },
+  {
+    title: "Une gestion collaborative",
+    number: "03",
+    description:
+      "Grâce à des comptes dédiés, personnalisés et autonomes, permettez à vos membres de mettre à jour leurs informations et d'interagir dans leur agenda.",
+    image: "/images/logiciels/school/screen3.png",
+    isMemberCMF: true,
+    numberColor: "#f9d648",
+  },
+]);
+</script>
 
-.row {
-  margin-top: 2rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
+<style>
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-  margin-left: 2rem;
-  margin-top: 2rem;
-}
 
-.subtitle-avantage {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
 </style>

components/Logiciels/Artist/Banner.vue

@@ -27,52 +27,4 @@
 
 <style scoped>
 
-.container-title {
-  display: flex;
-  justify-content: space-around;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.text-left {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  color: #000000;
-  opacity: 0.1;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.text-right {
-  margin-top: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  text-align: right;
-  opacity: 0.1;
-  margin-right: 5rem;
-}
-
-
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
-
 </style>

components/Logiciels/Artist/Comparatif.vue

@@ -1,70 +1,22 @@
 <template>
   <div id="Comparatif">
     <LayoutContainer>
-      <v-row class="mt-12">
-        <div class="title-container mt-6">
-            <v-icon size="6" class="fa-solid fa-circle icon-title mt-6 ml-6" />
-            <h4 class="subtitle mt-6 ml-2">Comparatif de nos solutions</h4>
-          </div>
-      </v-row>
-      <v-row>
-        <h3 class="title">Et si vous passiez à la version Premium</h3>
-      </v-row>
-
-      <table class="table-comparatif">
-        <thead>
-          <tr>
-            <th class="thead" />
-            <th class="thead">
-              <p class="standard">Standard</p>
-              <p class="from">A partir de</p>
-              <p class="price">14 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
-            </th>
-            <th class="thead premium-column">
-              <p class="standard">Premium</p>
-              <p class="from">A partir de</p>
-              <p class="price">18 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="table-body">
-          <tr v-for="row in tableData" :key="row.id" class="table-row">
-            <td class="table-data">
-              {{ row.column2 }}
-            </td>
-            <td class="table-data-second">
-              <v-icon
-                v-if="row.column3 == 'check'"
-                size="18"
-                class="far fa-check-circle"
-              />
-              <v-icon
-                v-else-if="row.column3 === 'cross'"
-                size="18"
-                class="far fa-times-circle"
-                color="red"
-              />
-              <span v-else>{{ row.column3 }}</span>
-            </td>
-            <td class="table-data-second">
-              <v-icon
-                v-if="row.column4 == 'check'"
-                size="18"
-                class="far fa-check-circle"
-              />
-              <v-icon
-                v-else-if="row.column3 === 'cross'"
-                size="18"
-                class="far fa-times-circle"
-                color="red"
-              />
-              <span v-else>{{ row.column4 }}</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Comparatif de nos solutions'"
+          :iconColor="'#fac20a'"
+        />
+        <LayoutUITitle
+          title="Et si vous passiez à la version Premium"
+        />
+        <LayoutTableComparatif
+        :standardPrice="'14€'"
+        :premiumPrice="'18€'"
+        :color="'#0e2d32'"
+        :stripeColor="'#fac20a33'"
+        :tableData="tableData"
+      />
     </LayoutContainer>
   </div>
 </template>
@@ -73,191 +25,105 @@
 const tableData = [
   {
     id: 1,
-    column2: "ADMINISTRATION",
+    column1: "GESTION DU RÉPERTOIRE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 2,
-    column2: "GESTION DES MEMBRES",
+    column1: "AGENDA",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 3,
-    column2: "EXTRANET UTILISATEURS",
+    column1: "SUIVI PÉDAGOGIQUE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 4,
-    column2: "GESTION DU MATÉRIEL",
+    column1: "GESTION DU PARC MATÉRIEL",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 5,
-    column2: "GESTION DES ÉVÉNEMENTS",
+    column1: "COMMUNICATION",
+    column2: "check",
+    column3: "check",
+  },
+  {
+    id: 6,
+    column1: "SMS",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 6,
-    column2: "CARNET D'ADRESSE",
+    column1: "NOM DE DOMAINE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 7,
-    column2: "COMMUNICATION",
-    column3: "cross",
-    column4: "check",
+    column1: "SITE INTERNET",
+    column2: "check",
+    column3: "check",
   },
   {
     id: 8,
-    column2: "SITE INTERNET",
+    column1: "STATISTIQUES",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 9,
-    column2: "FONCTIONNALITÉ DU RÉSEAU CMF",
+    column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 10,
-    column2: "SAUVEGARDE",
+    column1: "SAUVEGARDE",
+    column2: "check",
     column3: "check",
-    column4: "check",
+  },
+  {
+    id: 11,
+    column1: "EXTRANET UTILISATEURS",
+    column2: "cross",
+    column3: "Option",
+  },
+  {
+    id: 12,
+    column1: "PRÉINSCRIPTION EN LIGNE",
+    column2: "cross",
+    column3: "Option",
+  },
+  {
+    id: 13,
+    column1: "GRILLES D'ÉVALUATION",
+    column2: "check",
+    column3: "Option",
+  },
+  {
+    id: 14,
+    column1: "GESTION DES RÈGLEMENTS",
+    column2: "Option",
+    column3: "Option",
+  },
+  {
+    id: 15,
+    column1: "ESPACE DE STOCKAGE",
+    column2: "500 Mo",
+    column3: "1 Go",
+  },
+  {
+    id: 16,
+    column1: "PAGE DU SITE INTERNET",
+    column2: "restreint",
+    column3: "illimités",
   },
 ];
 </script>
-.
-<style scoped>
-.title-container{
-  display: flex;
-  align-items: center;
-}
-
-.icon-title {
-  color: #fac20a;
-  font-size: 1.5rem;
-
-}
-.subtitle {
-  color: #0e2d32;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.table-data-second {
-  padding-right: 5rem;
-}
-.standard {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #0e2d32;
-  padding-right: 5rem;
-  margin-bottom: 1rem;
-}
-
-.from,
-.ttc {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 12px;
-  line-height: 14px;
-  text-align: center;
-  color: #454545;
-  padding-right: 5rem;
-}
-
-.ttc {
-  text-transform: uppercase;
-}
-
-.price,
-.month {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 34px;
-  text-align: center;
-  color: #454545;
-}
-
-.month {
-  padding-right: 5rem;
-}
-
-.table-data-left {
-  width: 15rem;
-  padding-right: 2rem;
-}
-.table-data {
-  text-align: left;
-  padding-left: 20px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #454545;
-}
-
-
-.title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-left: 3rem;
-  width: 27rem;
-  font-family: "Barlow";
-  font-size: 2.5rem;
-  margin-top: 2rem;
-}
-
-.thead {
-  background-color: #fff;
-  height: 8rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 34px;
-}
-.table-comparatif {
-  width: 70%;
-  margin-top: 1rem;
-  margin-right: auto;
-  margin-left: auto;
-  border: none;
-    border-collapse: collapse;
-    margin-bottom: 3rem;
-}
-.table-row {
-  background-color: white;
-  text-align: center;
-  height: 3rem;
-}
-
-.table-body .table-row:nth-child(even) {
-  background-color: #fac20a33;
-}
-</style>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,71 +2,17 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <LayoutUISubTitle
-          title-color="#fff"
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
-          :iconColor="'#fac20a'"
-        />
-        <LayoutUITitle
-          title="Des fonctionnalités adaptées à vos besoins"
-          title-color="#fff"
-        />
-        <v-row>
-          <v-col cols="12">
-            <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="previousAction">
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div class="carousel-button" @click="nextAction">
-                <i class="fas fa-chevron-right" />
-              </div>
-            </div>
-          </v-col>
-        </v-row>
+
         <v-row>
           <v-col cols="12">
-            <Carousel
-              ref="functionCarousel"
-              :items-to-show="5"
-              :items-to-scroll="1"
-              class="carousel"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                :class="{
-                  card: true,
-                  'active-card': index === activeCardIndex,
-                }"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-card-title>
-                      <h1 class="card-title">{{ card.title }}</h1>
-                    </v-card-title>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        <ul>
-                          <li class="list-detail" v-for="item in card.list">
-                            {{ item }}
-                          </li>
-                        </ul>
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <p class="reviewer-structure">
-                          {{ card.option }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </div>
-              </Slide>
-            </Carousel>
+            <LayoutCarouselFonctionnalite
+              :cards="cards"
+              :functionCarousel="functionCarousel"
+              :itemsToShow="itemsToShow"
+            />
           </v-col>
         </v-row>
+ 
       </div>
     </LayoutContainer>
   </div>
@@ -98,10 +44,13 @@ const nextAction = () => {
 
 const cards = [
   {
+    logo:"images/logiciels/school/fonctionnalites/Agenda.png",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Membres/Adhérents"],
+    list: ["Administration", "Membres / Adhérents"],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
+
     title: "RÉPERTOIRE",
     list: [
       "Membres",
@@ -170,23 +119,24 @@ const cards = [
 </script>
 
 <style scoped>
-.title {
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 2.4rem;
-  color: white;
-  width: 35rem;
+
+.card-img{
+  width: 5rem;
+  height: 3rem;
+  margin-top: 1rem;
 }
 .list-detail {
   font-weight: 300;
-  font-size: 1.2rem;
+  font-size: .9rem;
   line-height: 1.2rem;
   margin-bottom: 1rem;
   color: #000000;
-  width: 100%;
+  word-break: none ;
+  
 }
 .card-title {
   white-space: pre-wrap;
+
 }
 .carousel {
   margin-left: 2rem;
@@ -243,22 +193,6 @@ const cards = [
 .carousel-button i {
   color: #fff;
 }
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-}
-
-.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;
@@ -279,23 +213,6 @@ const cards = [
   margin-right: 2rem;
 }
 
-.card-text {
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  height: 12rem;
-}
-.reviews-title {
-  color: #fff;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-  width: 10rem;
-}
-
 .card {
   width: 80rem;
   min-height: 35rem;
@@ -309,6 +226,7 @@ const cards = [
   max-height: 25rem;
   min-width: 90%;
   max-width: 90%;
+  
 }
 
 .card-container {

components/Logiciels/Artist/Formations.vue

@@ -3,18 +3,16 @@
     <LayoutContainer>
       <div class="container-green mt-12">
         <v-row>
-          <div class="d-flex justify-center align-center mt-6">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h5 class="subtitle">
-              pour aller plus loin
-            </h5>
-          </div>
+          <LayoutUISubTitle
+            title-color="#fff"
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Pour aller plus loin'"
+            :iconColor="'#fac20a'"
+          />
         </v-row>
 
-        <v-row class="mt-12"> 
+        <v-row class="mt-12">
           <v-col cols="4">
             <v-img
               src="/images/logiciels/school/reunion.jpg"
@@ -31,9 +29,7 @@
               eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <v-btn class="formation-btn mt-12">
-              S’incrire à une session
-            </v-btn>
+            <v-btn class="formation-btn mt-12"> S’incrire à une session </v-btn>
           </v-col>
         </v-row>
       </div>
@@ -43,39 +39,30 @@
           cols="3"
           class="d-flex justify-center align-center small-padding"
         >
-          <div class="card">
-            <h3 class="chiffre">
-              XXX
-            </h3>
-            <p>utilisateurs</p>
-          </div>
+          <LayoutCardStat
+            :chiffre="XXX"
+            text="utilisateurs"
+            backgroundColor="#fac20a"
+          />
         </v-col>
-
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center"
-        >
-          <div class="card">
-            <h3 class="chiffre">
-              XXX
-            </h3>
-            <p>structures</p>
-          </div>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="XXX"
+            text="structures"
+            backgroundColor="#fac20a"
+          />
         </v-col>
-
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center"
-        >
-          <div class="card">
-            <h3 class="chiffre">
-              13
-            </h3>
-            <p>années d'expérience</p>
-          </div>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="13"
+            text="années d'expérience"
+            backgroundColor="#fac20a"
+          />
         </v-col>
       </v-row>
 
+      <v-row />
+
       <v-row>
         <LogicielsSchoolCaroussel />
       </v-row>

components/Logiciels/Artist/MenuScroll.vue

@@ -107,7 +107,7 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   background: white;

components/Logiciels/Manager/Accompagnement.vue

@@ -58,32 +58,30 @@
         </div>
       </div>
 
-      <v-row class="card-container">
-        <v-col cols="4">
-          <div class="card">
-            <h3>XXX</h3>
-            <p>Structures en réseau</p>
-          </div>
-        </v-col>
-
+      <v-row class="card-container mb-12">
         <v-col
           cols="4"
-          class="d-flex justify-center align-center"
+          class="d-flex justify-center align-center small-padding"
         >
-          <div class="card">
-            <h3>XXX</h3>
-            <p>Utilisateurs</p>
-          </div>
+          <LayoutCardStat
+            :chiffre="XXX"
+            text="Structures en réseau"
+            backgroundColor="#d8050b"
+          />
         </v-col>
-
-        <v-col
-          cols="4"
-          class="d-flex justify-center align-center"
-        >
-          <div class="card">
-            <h3>12</h3>
-            <p>années de collaboration</p>
-          </div>
+        <v-col cols="4" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="XXX"
+            text="Utilisateurs"
+            backgroundColor="#d8050b"
+          />
+        </v-col>
+        <v-col cols="4" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="XXX"
+            text="années de collaboration"
+            backgroundColor="#d8050b"
+          />
         </v-col>
       </v-row>
 

components/Logiciels/Manager/Avantages.vue

@@ -1,138 +1,83 @@
 <template>
   <div id="Avantages">
     <LayoutContainer>
-      <v-row>
-        <div class="d-flex justify-center align-center">
-          <v-icon
-            size="10"
-            class="fa-solid fa-circle icon-title"
-          />
-          <h5 class="subtitle-avantage">
-            Découvrez les avantages de la solution
-          </h5>
-        </div>
-      </v-row>
-      <v-row>
-        <h3 class="title">
-          Des avantages concrets
-        </h3>
+      <v-row class="mt-12">
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Découvrez les avantages de la solution'"
+          :iconColor="'#E34461'"
+        />
       </v-row>
+      <LayoutUITitle title="Des avantages concrets" />
 
       <v-row class="row">
-        <v-col cols="4">
-          <div class="title-card">
-            <h4 class="description-card">
-              Une gestion collaborative
-            </h4>
-            <span class="number-card">03</span>
-          </div>
-
-          <hr>
-          <p class="details-card">
-            Centralisez toutes vos informations sur un seul et même outil et ne
-            perdez plus de temps avec des fichiers sur diverses applications.
-          </p>
-        </v-col>
-        <v-col cols="4">
-          <div class="title-card">
-            <h4>Une gestion collaborative</h4>
-            <span class="number-card">03</span>
-          </div>
-
-          <hr>
-          <p class="details-card">
-            Centralisez toutes vos informations sur un seul et même outil et ne
-            perdez plus de temps avec des fichiers sur diverses applications.
-          </p>
-          <p>
-            <v-chip class="chip-card">
-              Membre cmf
-            </v-chip>
-          </p>
-          <v-img src="/images/logiciels/school/screen3.png" />
-        </v-col>
-        <v-col cols="4">
-          <div class="title-card">
-            <h4>Une gestion collaborative</h4>
-            <span class="number-card">03</span>
-          </div>
-          <hr>
-          <p class="details-card">
-            Centralisez toutes vos informations sur un seul et même outil et ne
-            perdez plus de temps avec des fichiers sur diverses applications.
-          </p>
+        <v-col cols="4" v-for="(card, index) in cards" :key="index">
+          <LayoutUIAvantageCard
+            :title="card.title"
+            :number="card.number"
+            :description="card.description"
+            :image="card.image"
+            :isMemberCMF="card.isMemberCMF"
+            :dynamicNumberColor="'#E34461'"
+            :listItems="card.listItems"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
-
-<style scoped>
-.v-chip {
-  background: white;
-  color: black;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: normal;
-  font-size: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-}
-.number-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #e34461;
-}
-
-/** pour title-card : flex avec un espaece between */
-.title-card {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-}
-
-.row {
-  margin-top: 2rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2rem;
-  margin-left: 2rem;
-  margin-top: 1rem;
-}
+<script setup>
+import { ref } from "vue";
 
-.subtitle-avantage {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-  margin-right: 73rem;
-}
+// Exemple de données pour les cartes
+const cards = ref([
+  {
+    title: "Sur - mesure",
+    number: "01",
+    description:
+      "S'adapte à tous les réseaux de type pyramidal, quelque soit le nombre de niveaux :",
+    numberColor: "#f9d648",
+    listItems: ["Fédérations", "Institutions publiques"],
+  },
+  {
+    title: "Adapté",
+    number: "02",
+    description:
+      "Chaque structure du réseau dispose de sa propre solution indépendante et connectée au réseau :",
+    numberColor: "#f9d648",
+    listItems: ["Opentalent manager", "Opentalent school", "Opentalent artist"],
+  },
+  {
+    title: "Économique",
+    number: "03",
+    description:
+      "Une solution éprouvée au niveau national, sans avoir à supporter de coûts de développement importants pour ce type de logiciel.",
+    numberColor: "#f9d648",
+  },
+  {
+    title: "De pilotage",
+    number: "04",
+    description:
+      "Pilotez votre réseau de manière quotidienne et en temps réel. Gagnez du temps avec notre solution qui génère automatiquement un rapport d'activité complet.",
+    numberColor: "#f9d648",
+  },
+  {
+    title: "En réseau",
+    number: "05",
+    description:
+      "Mise à jour automatique des coordonnées publiques entre les membres du réseau..",
+    numberColor: "#f9d648",
+  },
+  {
+    title: "Confidentiel",
+    number: "06",
+    description:
+      "Chaque structure garde son indépendance et reste entièrement maître des informations et des données qu'elle saisit..",
+    numberColor: "#f9d648",
+  },
+]);
+</script>
 
-.icon-title {
-  color: #d8050b;
-  font-size: 1.5rem;
-  margin-left: 2rem;
-}
-</style>
+<style></style>

components/Logiciels/Manager/Banner.vue

@@ -1,204 +1,37 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <div class="container-title">
-        <v-col
-          cols="4"
-          class="text-left"
-        >
-          <h1>School</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="logiciel"
-        >
-          <h1>Opentalent Manager</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="text-right"
-        >
-          <h1>Artist</h1>
-        </v-col>
-      </div>
+      <LayoutUIBannerTitle
+        :leftText="'School'"
+        :centerText="'Opentalent Manager'"
+        :rightText="'Artist'"
+      />
     </v-row>
 
     <v-row>
       <v-col cols="12">
-        <div class="banner-container">
-          <img
-            src="/images/logiciels/manager/banner-manager.png"
-            alt="line"
-            class="cover-image"
-          >
-          <div class="red-square">
-            <v-row>
-              <div class="content-row">
-                <v-icon
-                  size="50"
-                  class="fa-brands fa-react icon"
-                />
-                <p class="description-square">
-                  Fédérations, confédérations et collectivités
-                </p>
-              </div>
-            </v-row>
-          </div>
-
-          <div class="white-square">
-            <img
-              src="/images/opentalent_manager_black.jpg"
-              alt="Logo"
-              class="logo-image"
-            >
-          </div>
-        </div>
+        <LayoutUIBanner
+          :imageSrc="'/images/logiciels/manager/banner-manager.png'"
+          imageAlt="'line'"
+          :squareText="'Fédérations, confédérations et collectivités'"
+          :logoSrc="'/images/logo/logiciels/Manager-noir.png'"
+          :squareColor="'#d8050b'"
+          :blueSquareColor="'#FFF'"
+          :textColor="'#FFF'"
+        />
       </v-col>
     </v-row>
   </LayoutContainer>
 </template>
 
-<script setup>
-</script>
-
 <style scoped>
-.container-title {
-  display: flex;
-  justify-content: space-around;
-  font-family: "Barlow";
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.text-left {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  color: #000000;
-  opacity: 0.1;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
-
-.text-right {
-  margin-top: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  text-align: right;
-  opacity: 0.1;
-  margin-right: 5rem;
-}
-
-.menu-container {
-  display: flex;
-  justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #bbb8b8;
-  font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
 
-.red-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 0;
-  width: 13rem;
-  height: 10rem;
-  background: #d8050b;
-  opacity: 0.9;
-  color: white;
-}
-
-.white-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 13rem;
-  width: 13rem;
-  height: 10rem;
-  background: white;
-}
-
-.description-square {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  text-align: center;
-  color: white;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin-top: 0.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 1rem;
-}
-
-.content-row {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-}
-
-.icon {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.logo-image {
-  width: 90%;
-  height: auto;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
-}
 
-.cover-image {
+:deep().cover-image {
   width: 100%;
-  height: 27rem;
+  height: 25rem;
   object-fit: cover;
+  object-position: center 30% !important;; 
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);

components/Logiciels/Manager/MenuScroll.vue

@@ -107,7 +107,7 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   background: white;
@@ -122,7 +122,6 @@ const navigate = (menu) => {
   text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
-
 .v-chip.active-menu {
   background: black;
   color: white;

components/Logiciels/Manager/Presentation.vue

@@ -79,7 +79,7 @@
                   src="/images/logiciels/manager/picto3.png"
                 />
                 <p class="picto-text">
-                  Boostez votre visibilité & votre communication
+                  Site web intégré & simple d'usage
                 </p>
               </div>
 

components/Logiciels/School/Avantages.vue

@@ -39,6 +39,7 @@ const cards = ref([
     description: 'Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.',
     image: '/images/logiciels/school/screen3.png',
     isMemberCMF: true,
+    
   },
   {
     title: 'Une activité structurée',

components/Logiciels/School/Fonctionnalites.vue

@@ -2,16 +2,7 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green" v-if="!mdAndDown">
-        <LayoutUISubTitle
-          title-color="#fff"
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
-        />
-        <LayoutUITitle
-          title="Des fonctionnalités adaptées à vos besoins"
-          title-color="#fff"
-        />
+  
         <v-row>
           <v-col cols="12">
             <LayoutCarouselFonctionnalite

components/Logiciels/School/Formations.vue

@@ -33,27 +33,49 @@
         <v-col cols="4">
           <v-row>
             <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'QUELQUES CHIFFRES'"
-        />
+              :iconSize="6"
+              :iconClasses="iconClasses"
+              :titleText="'QUELQUES CHIFFRES'"
+            />
           </v-row>
         </v-col>
       </v-row>
-      <v-row justify="center" class="card-container">
-    <v-col cols="12" sm="6" md="3" class="my-2">
-      <LayoutCardStatCard chiffre="30 <1500" label="élèves" />
-    </v-col>
-    <v-col cols="12" sm="6" md="3" class="my-2">
-      <LayoutCardStatCard chiffre="234" label="Clients" />
-    </v-col>
-    <v-col cols="12" sm="6" md="3" class="my-2">
-      <LayoutCardStatCard chiffre="20304" label="Utilisateurs" />
-    </v-col>
-    <v-col cols="12" sm="6" md="3" class="my-2">
-      <LayoutCardStatCard chiffre="13" label="années d’expériences" />
-    </v-col>
-  </v-row>
+
+
+      <v-row class="card-container mb-12">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <LayoutCardStat
+            :chiffre="301500"
+            text="élèves"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="234"
+            text="Clients"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="20304"
+            text="Utilisateurs"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="13"
+            text="années d'expérience"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+      </v-row>
+
       <v-row>
         <LogicielsSchoolCaroussel />
       </v-row>
@@ -92,7 +114,6 @@ const formations = ref([
 .col-details {
   margin-right: 6rem;
   margin-left: 5rem;
-
 }
 .image-wrapper {
   position: relative;

components/Logiciels/School/MenuScroll.vue

@@ -110,7 +110,7 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   background: white;
@@ -125,7 +125,6 @@ const navigate = (menu) => {
   text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
-
 .v-chip.active-menu {
   background: black;
   color: white;

components/Webinaire/Banner.vue

@@ -0,0 +1,95 @@
+<template>
+  <LayoutContainer>
+    <LayoutUITitlePage title="webinaires" subtitle="Partez à la découverte de vos logiciels Opentalent. " />
+    <v-row>
+      <v-col cols="12" style="position: relative">
+        <img
+          src="/images/formation/banner.jpg"
+          alt="line"
+          class="cover-image"
+        />
+        <div class="image-text mt-12">
+          Et si vous passiez rapidement à la vitesse supérieure...
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">
+            {{ menu.label }}
+          </v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+.image-text {
+  position: absolute;
+  top: 40px;
+  left: 20px;
+  font-family: "Barlow";
+  color: white;
+  font-size: 3rem;
+  width: 30rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 40px;
+}
+
+:deep().subtitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: .1rem;
+  margin-bottom: 1rem;
+}
+
+.formation {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 90px;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-bottom: 1rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.cover-image {
+  width: 100%;
+  height: 35rem;
+  object-fit: cover;
+  object-position: center 30%;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/Webinaire/Catalogue.vue

@@ -0,0 +1,446 @@
+<template>
+  <div id="Catalogue">
+    <LayoutContainer>
+      <div class="grey-container">
+        <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="'Des webinaires pour tous'"
+        />
+        <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 no-gutters class="centered-row ml-12 mt-12">
+          <v-col v-for="(course, index) in courses" :key="index" cols="4">
+            <v-row>
+              <div class="title-card-container">
+                <span class="number-card">{{ course.number }}</span>
+                <h4 class="card-title">{{ course.title }}</h4>
+                <v-img class="logo-img" :src="course.imageUrl" />
+              </div>
+              <p class="details-card">{{ course.description }}</p>
+            </v-row>
+            <v-row>
+              <div class="container-blue">
+                <h6 class="title-obj">Objectifs</h6>
+                <ul class="list-obj">
+                  <li
+                    v-for="(objective, objIndex) in course.objectives"
+                    :key="objIndex"
+                  >
+                    {{ objective }}
+                  </li>
+                </ul>
+              </div>
+            </v-row>
+            <v-row>
+              <v-chip class="badge-time">Durée : {{ course.duration }}</v-chip>
+            </v-row>
+            <div class="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-row>
+              <v-chip class="badge-time">{{ course.price }}</v-chip>
+            </v-row>
+            <v-row>
+              <v-chip class="chip-download" @click="showModal(course.title)">
+                Inscrivez-vous
+              </v-chip>
+            </v-row>
+          </v-col>
+        </v-row>
+      </div>
+
+      <div v-if="currentWebinaire" class="calendar-modal">
+        <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[currentWebinaire]"
+            width="700"
+            height="700"
+          ></iframe>
+          <v-row>
+            <v-cols cols="12">
+              <v-btn class="close-button" @click="closeModal()">Fermer</v-btn>
+            </v-cols>
+          </v-row>
+        </div>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<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 = [
+  {
+    number: "01",
+    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/opentalent_school_black.jpg",
+    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",
+  },
+  {
+    number: "03",
+    title: "Webinaire Manager",
+    // imageUrl: "/images/opentalent_school_black.jpg",
+    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",
+  },
+];
+</script>
+
+<style scoped>
+:deep().subtitle {
+  font-size: 1.5rem;
+  font-weight: normal !important;
+  line-height: 2rem;
+  letter-spacing: .1rem;
+  margin-bottom: 1rem;
+}
+
+:deep().title {
+  font-size: 2rem;
+  line-height: 3.5rem;
+  letter-spacing: .1rem;
+  margin-top: 2rem;
+  margin-bottom: .5rem;
+  text-transform: uppercase;
+}
+.title-inscription{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 18px;
+  color: #fff;
+  margin-bottom: 2rem;
+}
+
+.close-button {
+  background-color: #e34461;
+  color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.calendar-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(14, 45, 50, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container-green {
+  background-color: #0e2d32;
+  padding: 4rem;
+}
+.grey-container {
+  background-color: #f8f8f8;
+  padding: 4rem;
+}
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
+
+.centered-row {
+  margin: auto;
+  justify-content: center;
+}
+.catalog {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  margin-bottom: 3rem;
+}
+.chip-download {
+  width: 31rem;
+  background: #e34461;
+  color: black;
+  background-color: azure;
+  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;
+}
+
+.badge-time {
+  width: 31rem;
+  background: #e34461;
+  color: black;
+  background-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;
+}
+
+.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;
+  width: 31rem;
+  height: 11rem;
+}
+
+.details-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: #091d20;
+  margin-top: 1rem;
+  width: 31rem;
+  height: 4rem;
+}
+
+.number-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #e34461;
+  margin-right: 1rem;
+}
+
+.title-card-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.2rem;
+  width: 31rem;
+  border-bottom: 1px solid #0e2d32;
+}
+
+.logo-img {
+  width: 10rem;
+  height: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 4rem;
+}
+</style>

components/Webinaire/FAQ.vue

@@ -0,0 +1,117 @@
+<template>
+  <LayoutContainer>
+    <LayoutUITitlePage title="Tout savoir sur nos webinaire en lignes" 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)">
+          <i class="fa-solid fa-circle question-icon"></i> {{ item.question }}
+        </div>
+        <div class="answer" v-if="isActive(index)" v-html="item.answer"></div>
+      </div>
+    </div>
+  </LayoutContainer>
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+
+const faqItems = ref([
+  {
+    question: 'Comment s’inscrire à un webinaire?',
+    answer: 'Pour vous inscrire à un webinaire, suivez le lien "Inscrivez-vous" correspondant au cours qui vous intéresse.',
+  },
+  {
+    question: 'Combien de temps dure nos webinaires ?',
+    answer: 'Nos webinaires durent en moyenne 1H30. Les sessions de questions/réponses peuvent parfois prolonger la durée prévue de nos webinaires.',
+  },
+  {
+    question: 'Comment se passe un webinaire ?',
+    answer: 'Inscrivez-vous à l\'un de nos webinaires en choisissant une date sur l\'agenda et renseignez vos informations. ' +
+            'Vous recevrez à la suite de votre inscription sur notre site, un email de confirmation avec un rappel de la date et de l\'horaire de participation ainsi que l\'URL de connexion pour le webinaire. ' +
+            'Un mail de relance à J-1 vous sera envoyer vous rappelant votre participation au webinaire. ' +
+            'Le jour J, cliquez sur l\'URL de connexion. Nous vous encourageons à arriver quelques minutes en avance pour vous assurer de pouvoir accéder au webinaire sans aucun problème technique. ' +
+            'Lors du début du webinaire, toutes les instructions nécessaires vous seront fournies.'
+  },
+  {
+    question: 'De quel matériel aurais-je besoin pour suivre le webinaire ?',
+    answer: 'Pour plus de confort, il est recommandé d\'être équipé d\'un outil (de préférence un ordinateur) disposant d\'un micro et de haut-parleur.',
+  },
+  {
+    question: 'Y-a-t\'il une limite de participants ?',
+    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>'
+  },
+]);
+
+
+const activeIndex = ref(-1);
+
+function toggle(index) {
+  activeIndex.value = activeIndex.value === index ? -1 : index;
+}
+
+function isActive(index) {
+  return activeIndex.value === index;
+}
+</script>
+
+
+<style scoped>
+.faq-container {
+  padding: 1rem;
+}
+
+.faq-item {
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+}
+
+.question {
+  background-color: #0E2D32; 
+  color: #fff;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.question:hover {
+  background-color: #555;
+}
+.question-icon {
+  font-size: 10px !important;
+  color: rgba(161, 225, 249, 0.6);
+  margin-right: 0.5rem;
+}
+
+.answer {
+  background-color: #C3E5E7; 
+  padding: 0.5rem 1rem;
+  border: 1px solid #ccc;
+  border-top: none; 
+  border-radius: 0 0 4px 4px;
+}
+
+:deep().subtitle {
+  font-size: 1.5rem;
+  font-weight: normal !important;
+  line-height: 2rem;
+  letter-spacing: .1rem;
+  margin-bottom: 1rem;
+}
+
+:deep().title {
+  font-size: 2rem;
+  line-height: 3.5rem;
+  letter-spacing: .1rem;
+  margin-top: 2rem;
+  margin-bottom: .5rem;
+  text-transform: uppercase;
+}
+</style>

pages/opentalent_manager.vue

@@ -68,11 +68,12 @@ onMounted(() => {
 <style scoped>
 #sticky-menu {
   position: sticky;
-  top: 25rem;
-  z-index: 10;
-  margin-bottom: -35rem;
-  margin-right: 1rem;
+  top: 20rem;
+  z-index: 1;
+  margin-bottom: -30rem;
+  float: right;
 }
 </style>
 
 
+

pages/opentalent_school.vue

@@ -16,6 +16,7 @@
   <LogicielsSchoolProjet />
   <LogicielsSchoolFormations />
   <LayoutCarouselTrustCompanie />
+  <LogicielsSchoolReviews />
   <LayoutFAQ id="layout-footer" />
   <LayoutUISolutionsFooter id="layout-footer" />
   <LayoutFooter id="layout-footer" />

pages/qui-sommes-nous.vue

@@ -6,9 +6,13 @@
   <AboutValeurs />
   <AboutLogiciels />
   <AboutAgenda />
+  <AboutEquipe />
+  <AboutFAQ />
+  <LayoutPrefooter />
   <LayoutFooter />
 </template>
 
-<script setup></script>
+<script setup>
+</script>
 
 <style scoped></style>

pages/school.vue

@@ -1,339 +1,48 @@
+
 <template>
-  <div id="Fonctionnalites">
-    <LayoutContainer>
-      <div class="container-green" v-if="!mdAndDown">
-        <LayoutUISubTitle
-          title-color="#fff"
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
-        />
-        <LayoutUITitle
-          title="Des fonctionnalités adaptées à vos besoins"
-          title-color="#fff"
-        />
-        <v-row>
-          <v-col cols="12">
-            <LayoutCarouselFonctionnalite
-              :cards="cards"
-              :functionCarousel="functionCarousel"
-              :itemsToShow="itemsToShow"
-            />
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
+  <div>
+    <LayoutUIPresentation
+      :pictoImages="pictoData"
+      :presentationText="presentationData"
+      :logoSrc="'images/logo/logiciels/Artist-Blanc.png'"
+      :pricingAmount="'15€'"
+      :backgroundColor="'rgba(250, 194, 10, 0.2)'"
+    />
   </div>
+
+  <LayoutUIContainerVideo
+      image-url="/images/logiciels/school/screen2.png"
+    />
 </template>
 
 <script setup>
-import { ref } from "vue";
-import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify/lib/framework.mjs";
-
-
-
-const { width, mdAndDown } = useDisplay();
-const functionCarousel = ref(null);
-const itemsToShow = computed(() => {
-  if (width.value >= 1280 && width.value <= 1920) { 
-    return 3; 
-  } else if (width.value > 1920) {
-    return 6; 
-  }
-  return props.itemsToShow; 
-});
-
-const cards = [
-  {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
-    title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Professeurs", "Élèves/Familles"],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
-
-    title: "RÉPERTOIRE",
-    list: [
-      "Élèves et responsable légaux",
-      "Personnel administratif et professeurs",
-      "Contacts extérieurs, partenaires & donateurs",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Pré-inscription.png",
-    title: "PRÉINSCRIPTION EN LIGNE",
-    list: [
-      "Parametrage personnalisé des formulaires & mails automatiques",
-      "Gestion des réinscriptions et des nouvelles inscriptionse",
-      "Gestion des quotas et du suivi des préinscription en ligne",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
-    title: "AGENDA",
-    list: [
-      "Création et gestion des cours, examens, événements et prestations pédagogiques",
-      "Planning interactif avec un contrôle de cohérence",
-      "Gestion des présences et absences",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Parc-matériel.png",
-    title: "PARC MATÉRIEL ",
-    list: [
-      "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
-      "Planning interactif avec un contrôle de cohérence",
-      "Gestion des présences et absences",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Suivi-pédagogique.png",
-
-    title: "SUIVI PÉDAGOGIQUE",
-    list: [
-      "Gestion du cursus pédagogique (critères personnalisables)",
-      "Création des examens et envoi des convocations",
-      "Édition des bulletins de notes",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Facture.png",
-
-    title: "FACTURATION",
-    list: [
-      "Facturation automatisée selon différents critères",
-      "Suivi des règlements et gestion des relances",
-      "n options : de nombreux moyens de paiement",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Communication.png",
-
-    title: "COMMUNICATION",
-    list: [
-      "Édition et envoi de courriers, de mails ou de SMS*",
-      "Création de modèles de courriers, mails ou SMS",
-      "Outil de publipostage intégré pour un envoi personnalisé",
-    ],
-    option: "* en option",
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/internet.png",
-
-    title: "SITE INTERNET ",
-    list: [
-      "Gestion intégrée au logiciel",
-      "Mise à jour automatique des membres et événements sur votre site",
-      "Possibilité de personnalisé votre template",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Statistiques.png",
-
-    title: "STATISTIQUE",
-    list: [
-      "Rapport d'activité complet en fonction de vos activités",
-      "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
-      "Export des données du logiciel pour une analyse complète",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
-
-    title: "RÉSEAU CMF ",
-    list: [
-      "Accès au répertoire du réseau",
-      "Renouvellement de votre adhésion fédérale",
-      "Gestion de l'assurance CMF",
-    ],
-  },
-  {
-    logo: "images/logiciels/school/fonctionnalites/Promotion.png",
 
-    title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
-    list: [
-      "Sur votre site internet intégré",
-      "Sur l'agenda de la CMF",
-      "Sur l'Agenda culturel Opentalent ",
-    ],
-  },
+const pictoData = [
+  { src: '/images/logiciels/artist/picto1.png', text: 'Logiciel de gestion et communication full web' },
+  { src: '/images/logiciels/artist/picto2.png', text: 'Site web intégré & simple d\'usage' },
+  { src: '/images/logiciels/artist/picto3.png', text: 'Boostez votre visibilité & communication' },
+  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' },
+  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' },
+  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' }
 ];
-</script>
 
-<style scoped>
-.v-card-title-container {
-  display: flex;
-  flex-direction: row;
-}
-.logo-fonctionnalite {
-  width: 5rem;
-  height: 5rem;
-}
-
-.list-detail {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000000;
-  width: 100%;
-}
-.card-title {
-  white-space: pre-wrap;
-  font-size: 1.1rem;
-}
-.carousel {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.card.active-card {
-}
-
-.title-container {
-  display: flex;
-  align-items: center;
-}
-.subtitle-avantage {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: white;
-}
-.subtitle {
-  color: white;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.icon-title {
-  color: rgba(32, 147, 190, 0.6);
-  margin-right: 0.5rem;
-}
-.card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  transition: transform 0.3s;
-  min-width: 30%;
-  max-width: 30%;
-}
-
-.card.active-card {
-  transform: scale(1.05);
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 4rem;
-  height: 4rem;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 1rem;
-}
-
-.carousel-button i {
-  color: #fff;
-  cursor: pointer;
-}
-.reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-}
-
-.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;
-}
-
-.reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-}
-.card-footer {
-  position: absolute;
-  right: 0;
-  margin-right: 2rem;
-}
-
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  height: 12rem;
-}
-.reviews-title {
-  color: #fff;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-  width: 10rem;
-}
+const presentationData = {
+  toolTitle: 'Un outil complet en ligne',
+  toolList: [
+    'Logiciel de gestion et communication en ligne',
+    'Destiné aux établissements d\'enseignement artistique',
+    'Gestion quotidienne et en temps réel',
+    'Pilotage complet de votre structure'
+  ],
+  characteristicsTitle: 'Des caractéristiques uniques & dédiées'
+};
+</script>
 
-.card {
-  min-height: 35rem;
-  max-height: 35rem;
-  border-radius: 1rem;
-}
 
-.v-card {
-  border-radius: 1rem;
-  min-height: 25rem;
-  max-width: 20rem;
-  min-width: 20rem;
-}
+<style scoped>
 
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
+:deep().row-custom {
+  margin-top: -10rem;
 }
 
-.container-green {
-  background-color: #0e2d32;
-}
-</style>
+</style>

pages/webinaires.vue

@@ -0,0 +1,12 @@
+<template>
+  <LayoutNavigation />
+  <WebinaireBanner />
+  <WebinaireCatalogue />
+  <WebinaireFAQ />
+  <LayoutPrefooter />
+  <LayoutFooter />
+</template>
+
+<script setup></script>
+
+<style scoped></style>