gros refacto

assets/css/main.css

@@ -1,29 +1,13 @@
-h1, h2, h3, h4, h5, h6, p{
+h1, h2, h3, h4, h5, h6, p, .btn-contact, td{
   font-family: "Barlow";
   font-style: normal;
 }
-
-
-/* BUTTON */
-.btn-artist {
-  background: rgba(250, 194, 10, 0.4);
+.table-row {
+  background-color: white;
+  text-align: center;
+  height: 3rem;
 }
 
-.btn-manager {
-  background: rgba(216, 5, 11, 0.4);
-
-}
-
-.btn-school, .btn-artist, .btn-manager{
-  border-radius: 0.5rem;
-  margin-left: 2vw;
-  padding: 25px;
-  gap: 9px;
-  font-weight: 700;
-  font-size: .9rem;
-  line-height: 15px;
-  width: 10rem;
-  height: 4rem;
-  font-family: "Barlow";
-  font-style: normal;
+.table-data-left {
+  text-align: left;
 }

components/Home/Reviews.vue

@@ -255,8 +255,6 @@ const items = ref([
 }
 
 .title{
-  font-family: "Barlow";
-  font-style: normal;
   font-size: 2rem;
   line-height: 42px;
   text-align: center;
@@ -264,7 +262,6 @@ const items = ref([
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 25rem;
 }
 
 .icon-title {

components/Layout/Card/StatCard.vue

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,270 @@
+<template>
+  <div id="Fonctionnalites">
+    <LayoutContainer>
+      <div class="container-green" v-if="!mdAndDown">
+
+        <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"
+              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>
+              </Slide>
+            </Carousel>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Carousel, Slide } from 'vue3-carousel';
+import 'vue3-carousel/dist/carousel.css';
+import { useDisplay } from 'vuetify/lib/framework.mjs';
+
+const props = defineProps({
+  cards: Array,
+  itemsToScroll: {
+    type: Number,
+    default: 1,
+  },
+  itemsToShow: {
+    type: Number,
+    default: 5,
+  },
+});
+
+
+const { width, mdAndDown } = useDisplay();
+const functionCarousel = ref(null);
+const activeCardIndex = ref(0);
+
+const itemsToShow = computed(() => {
+  if (width.value >= 1280 && width.value <= 1920) { 
+    return 3; 
+  } else if (width.value > 1920) {
+    return 6; 
+  }
+  return props.itemsToShow; 
+});
+
+const nextAction = () => {
+  functionCarousel.value.next();
+};
+
+const previousAction = () => {
+  functionCarousel.value.prev();
+};
+
+</script>
+<style scoped>
+.v-card-title-container {
+  display: flex;
+  flex-direction: row;
+}
+.logo-fonctionnalite {
+  width: 5rem;
+  height: 5rem;
+}
+
+.list-detail {
+  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-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: white;
+}
+.subtitle {
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.icon-title {
+  color: rgba(32, 147, 190, 0.6);
+  margin-right: 0.5rem;
+}
+.card {
+  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-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;
+  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-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 {
+  min-height: 35rem;
+  max-height: 35rem;
+  border-radius: 1rem;
+}
+
+.v-card {
+  border-radius: 1rem;
+  min-height: 25rem;
+  max-width: 20rem;
+  min-width: 20rem;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  margin-right: 2rem;
+}
+
+.container-green {
+  background-color: #0e2d32;
+}
+</style>

components/Logiciels/School/Caroussel.vue → components/Layout/Carousel/TrustCompanie.vue

@@ -4,6 +4,9 @@
       <h2 class="title">
         Plus de 5 000 structures nous font confiance
       </h2>
+
+      </v-row>
+      <v-row justify="center">
       <div class="d-flex justify-center align-center">
         <div
           class="carousel-button"
@@ -22,7 +25,7 @@
 
     <Carousel
       ref="carousel"
-      class="carrousel elevation-6"
+      class="carrousel elevation-6 mb-12"
       :items-to-show="4"
       :items-to-scroll="2"
     >
@@ -100,19 +103,15 @@ const items = ref([
 }
 
 .title {
-  font-family: "Barlow";
   margin-bottom: 2rem;
   font-style: normal;
   text-align: center;
   color: black;
-  margin-left: 30rem;
-  margin-right: 30rem;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
   text-align: center;
   color: #0e2d32;
+  width: 50%;
 }
 </style>

components/Layout/FAQ.vue

@@ -6,20 +6,18 @@
         <v-row>
           <v-col cols="6">
             <div class="container-left">
-              <div class="container-title">
-                <v-icon size="6" class="fa-solid fa-circle icon-title " />
-                <h5 class="subtitle-faq">
-                  Vous voulez tirer le meilleur de notre logiciel ?
-                </h5>
-              </div>
+              <LayoutUISubTitle
+                title-color="#fff"
+                :iconSize="6"
+                :iconClasses="iconClasses"
+                :titleText="' Vous voulez tirer le meilleur de notre logiciel ?  '"
+              />
               <h3 class="title-faq">
                 Quelle que soit votre demande, notre équipe est à vos côtés pour
                 vous guider
               </h3>
 
-              <v-btn class="btn-faq">
-                Consulter notre FAQ
-              </v-btn>
+              <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
             </div>
           </v-col>
 
@@ -88,11 +86,11 @@
   color: #fff;
   margin-right: 0.7rem;
   margin-left: 2rem;
-  z-index: 2;
+  z-index: 1;
   color: rgba(32, 147, 190);
 }
 .btn-faq-tuto {
-  z-index: 2;
+  z-index: 1;
 
   width: 20rem;
   height: 5.5rem;
@@ -123,7 +121,7 @@
   margin-right: 25rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  z-index: 2;
+  z-index: 1;
 }
 .btn-faq {
   width: 14rem;
@@ -135,7 +133,7 @@
   font-style: normal;
   font-weight: 500;
   font-size: 0.8rem;
-  z-index: 2;
+  z-index: 1;
 
   text-transform: none !important;
   line-height: 1rem;

components/Layout/Table/Comparatif.vue

@@ -0,0 +1,196 @@
+<template>
+  <LayoutContainer>
+    <div>
+      <table class="table-comparatif">
+        <thead>
+          <tr>
+            <th class="thead" />
+            <th class="thead">
+              <p class="standard" :style="{ color: color }">Standard</p>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ standardPrice }} <span class="ttc">ttc</span>
+              </p>
+              <p class="month">/mois</p>
+            </th>
+            <th class="thead premium-column">
+              <p class="standard" :style="{ color: color }">Premium</p>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ premiumPrice }} <span class="ttc">ttc</span>
+              </p>
+              <p class="month">/mois</p>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="table-body">
+          <tr
+            v-for="(row, index) in tableData"
+            :key="row.id"
+            class="table-row"
+            :style="{
+              backgroundColor: index % 2 !== 0 ? stripeColor : 'white',
+            }"
+          >
+            <td class="table-data-left">{{ row.column1 }}</td>
+            <td class="table-data-second">
+              <v-icon
+                v-if="row.column2 === 'check'"
+                size="18"
+                class="far fa-check-circle"
+              />
+              <v-icon
+                v-else-if="row.column2 === 'cross'"
+                size="18"
+                class="far fa-times-circle"
+                color="red"
+              />
+              <span v-else>{{ row.column2 }}</span>
+            </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>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  standardPrice: {
+    type: String,
+    default: "32,90€",
+  },
+  premiumPrice: {
+    type: String,
+    default: "46,20€",
+  },
+  color: {
+    type: String,
+    default: "#0e2d32", 
+  },
+  stripeColor: {
+    type: String,
+    default: "rgba(32, 147, 190, 0.2)", 
+  },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+<style scoped>
+.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 {
+  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;
+}
+.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;
+}
+
+.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;
+}
+
+
+.table-body .table-row:nth-child(odd) {
+  background-color: rgba(190, 32, 77, 0.2);
+}
+
+</style>

components/Layout/UI/AvantageCard.vue

@@ -0,0 +1,165 @@
+<template>
+  <LayoutContainer>
+    <div class="advantage-card">
+      <div class="title-card">
+        <h4 class="description-card">{{ title }}</h4>
+        <span class="number-card" :style="{ color: dynamicNumberColor }">{{ number }}</span>
+      </div>
+
+      <hr />
+      <p class="details-card">
+        {{ description }}
+      </p>
+      <div class="image-container">
+        <v-img :src="image" />
+        <v-chip class="chip-card" v-if="isMemberCMF">
+          <p class="cmf">Membre CMF</p>
+        </v-chip>
+      </div>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { defineProps, useRoute } from 'vue-router';
+
+const props = defineProps({
+  title: String,
+  number: String,
+  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
+});
+</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;
+  color: #0e2d32;
+}
+.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;
+  margin-bottom: 1rem;
+}
+.number-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #7fcdd2;
+}
+
+.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";
+  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;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+  margin-left: 1rem;
+}
+
+.icon-title {
+  color: rgba(32, 147, 190, 0.6);
+  font-size: 1.5rem;
+  margin-left: 2rem;
+}
+
+.image-container {
+  position: relative;
+}
+
+.chip-card {
+  color: #000000;
+  position: absolute;
+  margin-left: 2rem;
+  top: 0;
+  left: 0;
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+
+  font-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;
+}
+</style>

components/Layout/UI/BannerTitle.vue

@@ -38,36 +38,32 @@ const props = defineProps({
 }
 
 .text-left {
-  font-family: "Barlow";
-  font-style: normal;
+  position: absolute;
   font-weight: 600;
   font-size: 3rem;
   line-height: 85px;
-  color: #000000;
-  opacity: 0.1;
+  opacity: 0.08;
   margin-top: 2rem;
-  margin-left: 2rem; 
+  left:-2rem;
 }
 .text-right {
+  position: absolute;
+  right: -2rem;
   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: 2rem; 
+  opacity: 0.08;
 }
 
 .logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  font-size: 2.5rem;
+  line-height: 77px;
   color: #000000;
+  text-align: center;
 }
 </style>

components/Layout/UI/ContainerVideo.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="Presentation">
+    <LayoutContainer>
+      <v-row class="container-green mt-12">
+        <v-row>
+          <v-col cols="6">
+            <p class="citation-school">
+              {{ currentCitation }}
+            </p>
+          </v-col>
+        </v-row>
+
+        <v-col cols="6">
+          <div class="subtitle-logiciel">
+            <v-icon :size="10" class="fa-solid fa-circle icon-logiciel" :style="{color: iconColor}" />
+            <h6>{{ currentSubtitle }}</h6>
+          </div>
+          <v-img src="/images/logiciels/school/screen2.png" class="screen-img-3" />
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const currentCitation = computed(() => {
+  switch (route.path) {
+    case '/opentalent_school':
+      return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
+    case '/opentalent_artist':
+      return "Le logiciel de gestion et communication au service de votre passion";
+    default:
+      return "Citation par défaut";
+  }
+});
+
+const currentSubtitle = computed(() => {
+  switch (route.path) {
+    case '/opentalent_school':
+      return "Logiciel Opentalent School";
+    case '/opentalent_artist':
+      return "LOGICIEL OPENTALENT ARTIST STANDARD";
+    default:
+      return "Sous-titre par défaut";
+  }
+});
+
+const iconColor = computed(() => {
+  if (route.path === '/opentalent_school') {
+    return 'rgba(32, 147, 190, 0.6)'; 
+  }
+  else if ( route.path === '/opentalent_artist')
+  return '#fac20a';
+});
+</script>
+
+
+<style scoped>
+
+
+.citation-school {
+  font-style: italic;
+  font-weight: 300;
+  font-size: 2rem;
+  width: 38rem;
+  line-height: 40px;
+  color: #ffffff;
+  font-style: italic;
+  margin-top: 27rem;
+  margin-left: 2rem;
+}
+.subtitle-logiciel {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #ffffff;
+  margin-left: 5rem;
+  margin-right: 15rem;
+  margin-top: 4rem;
+  top: 10rem;
+}
+
+.icon-logiciel {
+  margin-right: 1rem;
+}
+.container-green {
+  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
+    rgba(7, 27, 31, 0.3);
+  height: 40rem;
+}
+
+
+
+</style>

components/Layout/UI/OutilPresentation.vue

@@ -1,347 +0,0 @@
-<template>
-  <div class="custom-presentation">
-    <LayoutContainer>
-      <v-row class="outil-row">
-        <v-col cols="4">
-          <div class="title">
-            <v-icon size="6" :class="iconColorClass" />
-            <h4 class="presentation-title">{{ presentationTitle }}</h4>
-          </div>
-          <v-img :src="screenImage" class="screen-img" />
-
-          <div class="rectangle-4">
-            <div class="black-circle">
-              <div class="content-flex">
-                <v-img :src="logoImage" class="logo-manager" />
-                <div class="pricing-details">
-                  <p class="pricing-small-text">{{ pricingSmallText }}</p>
-                  <p class="pricing-big-text">{{ pricingAmount }} <span class="smaller-text">{{ pricingFrequency }}</span></p>
-                  <p class="pricing-small-text">{{ pricingPayable }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="5">
-          <h2 class="outil-title">{{ toolTitle }}</h2>
-          <ul class="outil-ul">
-            <li class="outil-list">{{ toolFeature1 }}</li>
-            <li class="outil-list">{{ toolFeature2 }}</li>
-            <li class="outil-list">{{ toolFeature3 }}</li>
-            <li class="outil-list">{{ toolFeature4 }}</li>
-          </ul>
-        </v-col>
-
-        <v-row class="row-caracteristiques">
-          <v-col cols="4" />
-
-          <v-col cols="6">
-            <h2>{{ uniqueFeaturesTitle }}</h2>
-            <div class="picto-container">
-              <div class="picto-group" v-for="(feature, index) in uniqueFeatures" :key="index">
-                <v-img class="picto-img" :src="feature.image" />
-                <p class="picto-text">{{ feature.text }}</p>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="2" />
-        </v-row>
-      </v-row>
-
-      <v-row class="container-green">
-        <v-row>
-          <v-col cols="6">
-            <p class="citation-school">{{ citationText }}</p>
-          </v-col>
-        </v-row>
-
-        <v-col cols="6">
-          <div class="subtitle-logiciel">
-            <v-icon size="10" :class="iconLogicielColorClass" />
-            <h6>{{ logicielTitle }}</h6>
-          </div>
-
-          <v-img :src="logicielImage" class="screen2-img" />
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  presentationTitle: String,
-  iconColorClass: String,
-  screenImage: String,
-  logoImage: String,
-  pricingSmallText: String,
-  pricingAmount: String,
-  pricingFrequency: String,
-  pricingPayable: String,
-  toolTitle: String,
-  toolFeature1: String,
-  toolFeature2: String,
-  toolFeature3: String,
-  toolFeature4: String,
-  uniqueFeaturesTitle: String,
-  uniqueFeatures: Array,
-  citationText: String,
-  iconLogicielColorClass: String,
-  logicielTitle: String,
-  logicielImage: String,
-});
-</script>
-
-
-<script setup>
-import { ref, defineProps } from 'vue';
-
-const props = defineProps({
-  presentationTitle: String,
-  screenImageSrc: String,
-  logoSrc: String,
-  pricingSmallText: String,
-  pricingBigText: String,
-  pricingSmallTextSuffix: String,
-  pricingSmallTextPayable: String,
-  toolTitle: String,
-  toolList: Array,
-  featuresTitle: String,
-  featuresList: Array,
-  citationText: String,
-  logicielTitle: String,
-  secondScreenImageSrc: String,
-  containerStyle: Object,
-  titleClass: String,
-  iconClass: String,
-  outilTitleClass: String,
-  outilListClass: String,
-  featuresTitleClass: String,
-  pictoTextClass: String,
-  citationStyle: Object,
-  logicielIconClass: String,
-  logicielTitleClass: String,
-  pictoImages: Array,
-});
-</script>
-
-<style scoped>
-.row-caracteristiques {
-  margin-top: -10rem;
-}
-.pricing-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: black;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 7rem;
-  margin-top: -2.5rem;
-  width: 10rem;
-}
-
-.pricing-small-text {
-  font-size: 0.6em;
-}
-
-.pricing-big-text {
-  font-size: 1.6em;
-  font-weight: bold;
-}
-
-.smaller-text {
-  font-size: 0.6em;
-}
-.presentation-title {
-  color: #071b1f;
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
-
-.devis {
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 9rem;
-  margin-top: -1rem;
-  width: 7rem;
-}
-
-.logo-manager {
-  top: 1rem;
-  margin-left: 0.3rem;
-  margin-right: 0.5rem;
-  z-index: 1;
-}
-.rectangle-4 {
-  width: 18rem;
-  height: 6rem;
-  background: rgba(32, 147, 190, 0.2);
-  border-radius: 3rem;
-  margin-left: 5rem;
-  margin-top: 2rem;
-}
-.picto-text {
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  margin-right: 2rem;
-  margin-left: 2rem;
-}
-.picto-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-left: -15rem;
-}
-
-.picto-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.icon-title {
-  margin-right: 0.7rem;
-  color: rgba(32, 147, 190, 0.6);
-}
-
-.text-square {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 0.9rem;
-  text-align: center;
-}
-
-.icon {
-  margin-top: 1rem;
-}
-
-.container-square {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.outil-title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
-
-.outil-ul {
-  font-family: "Barlow";
-  margin-left: 1rem;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.citation-school {
-  font-style: italic;
-  font-weight: 300;
-  font-size: 2rem;
-  width: 38rem;
-  line-height: 40px;
-  color: #ffffff;
-  font-style: italic;
-  margin-top: 20rem;
-  margin-left: 2rem;
-}
-.subtitle-logiciel {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 5rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
-
-.icon-logiciel {
-  color: rgba(32, 147, 190, 0.6);
-  margin-right: 1rem;
-}
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
-    rgba(7, 27, 31, 0.3);
-  height: 45rem;
-}
-
-.picto-container {
-  display: flex;
-  justify-content: flex-start;
-  padding: 0 2rem;
-}
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
-
-.title {
-  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;
-}
-
-.screen-img {
-  width: 20rem;
-  height: 15rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.outil-row {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
-.darkblue-square {
-  font-family: "Barlow";
-  width: 10rem;
-  height: 7rem;
-  background: #0e2d32;
-  margin-left: 14rem;
-}
-.blue-square {
-  font-family: "Barlow";
-  margin-left: 14rem;
-  width: 10rem;
-  height: 7rem;
-  background: rgba(32, 147, 190, 0.6);
-}
-</style>

components/Layout/UI/Presentation.vue

@@ -0,0 +1,278 @@
+<template>
+  <div id="Presentation">
+    <LayoutContainer>
+      <v-row class="mt-12">
+        <v-col cols="6" md="4">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconColor="iconColor"
+            :titleText="titleText"
+
+          />
+          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
+
+          <div :style="{ backgroundColor: backgroundColor }" class="rectangle-4">
+          <div :style="{ backgroundColor: circleColor }" class="black-circle">
+            <div class="content-flex">
+              <v-img
+                :src="logoSrc"
+                class="logo-manager"
+              />
+              <div class="pricing-details">
+                <p class="pricing-small-text">{{ pricingFromText }}</p>
+                <p class="pricing-big-text">
+                  {{ pricingAmount }} <span class="smaller-text">{{ pricingPeriodText }}</span>
+                </p>
+                <p class="pricing-small-text">{{ pricingAnnouncementText }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        </v-col>
+
+        <v-col cols="6" md="7" v-if="!mdAndDown">
+          <LayoutUITitle :title="presentationText.toolTitle" />
+          <ul class="outil-ul ml-12">
+            <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">
+              <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>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+const props = defineProps({
+  pictoImages: {
+    type: Array,
+    default: () => []
+  },
+  pictoColor: {
+    type: String,
+    default: '#000000'
+  },
+  presentationText: {
+    type: Object,
+    default: () => ({
+      toolTitle: 'Default Title',
+      toolList: [],
+      characteristicsTitle: 'Default Characteristics Title'
+    })
+  },
+  // Ajouter de nouvelles props ici
+  logoSrc: {
+    type: String,
+    default: '/images/logo_school_white.png' 
+  },
+  pricingFromText: {
+    type: String,
+    default: 'à partir de' 
+  },
+  pricingAmount: {
+    type: String,
+    default: '32,90€' 
+  },
+  pricingPeriodText: {
+    type: String,
+    default: '/mois'
+  },
+  pricingAnnouncementText: {
+    type: String,
+    default: 'payable annuellement' 
+  },
+  backgroundColor: {
+    type: String,
+    default: 'rgba(32, 147, 190, 0.2)'
+  },
+  circleColor: {
+    type: String,
+    default: '#091d20'
+  }
+});
+const titleText = ref(''); // Use a ref to hold the title text
+const iconColor = ref(''); // Use a ref to hold the icon class
+
+// 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
+  } 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
+  }
+});
+</script>
+
+<style scoped>
+.pricing-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: black;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 7rem;
+  margin-top: -1.5rem;
+  width: 10rem;
+}
+
+.pricing-small-text {
+  font-size: 0.6em;
+}
+
+.pricing-big-text {
+  font-size: 1.6em;
+  font-weight: bold;
+}
+
+.smaller-text {
+  font-size: 0.6em;
+}
+.presentation-title {
+  color: #071b1f;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.black-circle {
+  border-radius: 3rem;
+  background: #091d20;
+  width: 7rem;
+  height: 6rem;
+}
+
+.devis {
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 9rem;
+  margin-top: -1rem;
+  width: 7rem;
+}
+
+.logo-manager {
+  top: 1.2rem;
+  z-index: 1;
+}
+.rectangle-4 {
+  width: 18rem;
+  height: 6rem;
+  background: rgba(32, 147, 190, 0.2);
+  border-radius: 3rem;
+  margin-left: 5rem;
+  margin-top: 2rem;
+}
+.picto-text {
+  font-weight: 300;
+  font-size: 0.9rem;
+  margin-top: -3rem;
+  text-align: center;
+  margin-right: 2rem;
+  margin-left: 2rem;
+}
+.picto-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.picto-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /** on colle */
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: rgba(32, 147, 190, 0.6);
+}
+
+.text-square {
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-top: 0.9rem;
+  text-align: center;
+}
+
+.icon {
+  margin-top: 1rem;
+}
+.outil-title {
+  font-weight: 600;
+  font-size: 2.2rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.outil-ul {
+  font-family: "Barlow";
+  margin-left: 1rem;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.icon-logiciel {
+  color: rgba(32, 147, 190, 0.6);
+  margin-right: 1rem;
+}
+.container-green {
+  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
+    rgba(7, 27, 31, 0.3);
+  height: 40rem;
+}
+
+.picto-container {
+  display: flex;
+  flex-direction: row;
+}
+.picto-img {
+  width: 14rem;
+  height: 14rem;
+}
+
+.title {
+  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;
+}
+
+.screen-img {
+  margin-top: 2rem;
+  margin-left: 3rem;
+}
+</style>
+

components/Layout/UI/SubTitle.vue

@@ -0,0 +1,53 @@
+<template>
+  <LayoutContainer>
+  <div class="subtitle">
+    <v-icon :size="iconSize" :style="{ color: iconColor }" :class="iconClasses" />
+    <h4 class="presentation-title" :style="{ color: titleColor }">{{ titleText }}</h4>  </div>
+</LayoutContainer>
+</template>
+
+<script setup>
+const props = defineProps({
+  iconSize: {
+    type: [String, Number],
+    default: 6,
+  },
+  iconClasses: {
+    type: String,
+    default: 'fa-solid fa-circle icon-title',
+  },
+  titleText: {
+    type: String,
+    default: 'default title',
+  },
+  iconColor: { 
+    type: String,
+    default: 'rgba(32, 147, 190, 0.6)', 
+  },
+  titleColor: { 
+    type: String,
+    default: '#071b1f', 
+  },
+});
+</script>
+
+<style scoped>
+.subtitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 3rem;
+}
+
+.presentation-title {
+  color: #071b1f;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+</style>

components/Layout/UI/Title.vue

@@ -0,0 +1,32 @@
+<template>
+  <LayoutContainer>
+    <div>
+      <h2 class="title" :style="{ color: titleColor }">{{ title }}</h2>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  title: String,
+  titleColor: {
+    type: String,
+    default: "#000", // Default color is black, but it's overridden by passed props
+  },
+});
+</script>
+
+<style scoped>
+.title {
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: inherit;
+  margin-left: 2rem;
+
+  line-height: 2.4rem;
+  width: 35rem;
+}
+</style>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,29 +2,28 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <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">
-            Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
-          </h4>
-        </div>
-        <div class="title-container">
-          <h4 class="title mt-6 ml-3">
-            Des fonctionnalités adaptées à vos besoins
-          </h4>
-        </div>
+        <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 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>
-            <div class="carousel-button" @click="nextAction">
-              <i class="fas fa-chevron-right" />
-            </div>
-          </div>
           </v-col>
-
         </v-row>
         <v-row>
           <v-col cols="12">
@@ -57,13 +56,6 @@
                       </v-card-text>
 
                       <div class="card-footer">
-                        <!-- <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p> -->
                         <p class="reviewer-structure">
                           {{ card.option }}
                         </p>
@@ -85,14 +77,13 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 
-
 const functionCarousel = ref(null);
 const activeCardIndex = ref(2);
 
 const previousAction = () => {
   const newIndex = activeCardIndex.value - 1;
   if (newIndex >= 0) {
-    activeCardIndex.value = newIndex; 
+    activeCardIndex.value = newIndex;
     functionCarousel.value.prev();
   }
 };
@@ -100,7 +91,7 @@ const previousAction = () => {
 const nextAction = () => {
   const newIndex = activeCardIndex.value + 1;
   if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex; 
+    activeCardIndex.value = newIndex;
     functionCarousel.value.next();
   }
 };
@@ -180,7 +171,6 @@ const cards = [
 
 <style scoped>
 .title {
-  font-family: "Barlow";
   font-weight: 600;
   font-size: 3rem;
   line-height: 2.4rem;
@@ -188,8 +178,6 @@ const cards = [
   width: 35rem;
 }
 .list-detail {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.2rem;
   line-height: 1.2rem;
@@ -213,7 +201,6 @@ const cards = [
   align-items: center;
 }
 .subtitle-avantage {
-  font-family: "Barlow";
   font-weight: 600;
   font-size: 3rem;
   line-height: 18px;
@@ -221,9 +208,7 @@ const cards = [
 }
 .subtitle {
   color: white;
-  font-family: "Barlow";
   font-size: 1rem;
-  font-style: normal;
   font-weight: 600;
   line-height: 15px;
   letter-spacing: 1.8px;
@@ -235,12 +220,8 @@ const cards = [
   margin-right: 0.5rem;
 }
 .card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   transition: transform 0.3s;
-  min-width: 20%;
-  max-width: 20%;
 }
 
 .card.active-card {
@@ -263,8 +244,6 @@ const cards = [
   color: #fff;
 }
 .reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
@@ -272,9 +251,6 @@ const cards = [
 }
 
 .reviewer-status {
-  font-family: "Barlow";
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -285,8 +261,6 @@ const cards = [
 }
 
 .reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 0.8rem;
   line-height: 14px;
@@ -300,15 +274,12 @@ const cards = [
   text-align: left;
 }
 .card-footer {
-  /** coller à droite */
   position: absolute;
   right: 0;
   margin-right: 2rem;
 }
 
 .card-text {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1rem;
@@ -316,9 +287,7 @@ const cards = [
 }
 .reviews-title {
   color: #fff;
-  font-family: "Barlow";
   font-size: 1rem;
-  font-style: normal;
   font-weight: 600;
   line-height: 15px;
   letter-spacing: 1.8px;
@@ -338,6 +307,8 @@ const cards = [
   border-radius: 1rem;
   min-height: 25rem;
   max-height: 25rem;
+  min-width: 90%;
+  max-width: 90%;
 }
 
 .card-container {

components/Logiciels/Artist/Presentation.vue

@@ -1,625 +1,39 @@
-<template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <v-row class="outil-row">
-        <v-col cols="4">
-          <div class="title-container">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle">Présentation d'opentalent artist</h4>
-          </div>
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
-
-          <div class="rectangle-4">
-            <div class="black-circle">
-              <div class="content-flex">
-                <v-img
-                  src="/images/logo/logiciels/Artist-Blanc.png"
-                  class="logo-manager"
-                />
-                <div class="pricing-details">
-                  <p class="pricing-small-text">à partir de</p>
-                  <p class="pricing-big-text">
-                    15€ <span class="smaller-text">/mois</span>
-                  </p>
-                  <p class="pricing-small-text">payable annuellement</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="5">
-          <h2 class="title">Un outil complet en ligne</h2>
-          <ul class="outil-ul">
-            <li class="outil-list">
-              Logiciel de gestion et de communication en ligne
-            </li>
-            <li class="outil-list">
-              Destiné aux structures culturelles (tout statut juridique)
-            </li>
-            <li class="outil-list">
-              Gestion complète (membres, événements, planning, matériel,...)
-            </li>
-            <li class="outil-list">Une solution simple d'utilisation, intuitive et collaborative </li>
-          </ul>
-        </v-col>
-
-        <v-row class="row-caracteristiques">
-          <v-col cols="4" />
-
-          <v-col cols="6">
-            <h2>Des caractéristiques uniques & dédiées</h2>
-            <div class="picto-container">
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto1.png"
-                />
-                <p class="picto-text">
-                  Logiciel de gestion & communication full web
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto2.png"
-                />
-                <p class="picto-text">Site internet intégré & simple d'usage</p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto3.png"
-                />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
-              </div>
 
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto4.png"
-                />
-                <p class="picto-text">Communiquez en réseau</p>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="2" />
-        </v-row>
-      </v-row>
-
-      <v-row class="container-green">
-        <v-row>
-          <v-col cols="6">
-            <p class="citation-school">
-              “ Pour les petits comme pour les grands établissements
-              d’enseignement artistique.“
-            </p>
-          </v-col>
-        </v-row>
-
-        <v-col cols="6">
-          <div class="subtitle-logiciel">
-            <v-icon size="10" class="fa-solid fa-circle icon-logiciel" />
-            <h6>Logiciel Opentalent</h6>
-          </div>
-
-          <v-img
-            src="/images/logiciels/school/screen2.png"
-            class="screen2-img"
-          />
-        </v-col>
-      </v-row>
-    </LayoutContainer>
+<template>
+  <div>
+    <LayoutUIPresentation
+      :pictoImages="pictoData"
+      :presentationText="presentationData"
+      :logoSrc="'images/logo/logiciels/Artist-Blanc.png'"
+      :pricingAmount="'15€'"
+      :backgroundColor="'rgba(250, 194, 10, 0.2)'"
+    />
   </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-
-
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 25rem;
-  margin-left: 2rem;
-}
-
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
-
-.row-caracteristiques {
-  margin-top: -10rem;
-}
-.pricing-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: black;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 7rem;
-  margin-top: -2.5rem;
-  width: 10rem;
-}
-
-.pricing-small-text {
-  font-size: 0.6em;
-}
-
-.pricing-big-text {
-  font-size: 1.6em;
-  font-weight: bold;
-}
-
-.smaller-text {
-  font-size: 0.6em;
-}
-
-
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
-
-.devis {
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 9rem;
-  margin-top: -1rem;
-  width: 7rem;
-}
-
-.logo-manager {
-  top: 1.5rem;
-  width: 110%;
-}
-.rectangle-4 {
-  width: 18rem;
-  height: 6rem;
-  background: rgba(250, 194, 10, 0.2);
-  border-radius: 3rem;
-  margin-left: 5rem;
-  margin-top: 2rem;
-}
-.picto-text {
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  margin-right: 2rem;
-  margin-left: 2rem;
-}
-.picto-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-left: -15rem;
-}
-
-.picto-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
-.icon-title {
-  margin-right: 0.7rem;
-  color: #fac20a;
-}
-
-
-.container-square {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-
-.outil-ul {
-  font-family: "Barlow";
-  margin-left: 1rem;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.citation-school {
-  font-style: italic;
-  font-weight: 300;
-  font-size: 2rem;
-  width: 38rem;
-  line-height: 40px;
-  color: #ffffff;
-  font-style: italic;
-  margin-top: 27rem;
-  margin-left: 2rem;
-}
-.subtitle-logiciel {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 5rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
-
-.icon-logiciel {
-  color: #fac20a;
-  margin-right: 1rem;
-}
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
-    rgba(7, 27, 31, 0.3);
-  height: 40rem;
-}
-
-.picto-container {
-  display: flex;
-  justify-content: flex-start;
-  padding: 0 2rem;
-}
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
-
-.screen-img {
-  width: 20rem;
-  height: 15rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.outil-row {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
-
-</style>
-
-
-<!-- <template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <v-row class="outil-row">
-        <v-col cols="4">
-          <div class="title">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h4>Présentation d'opentalent artist</h4>
-          </div>
-          <v-img
-            src="/images/logiciels/school/screen.jpg"
-            class="screen-img"
-          />
-
-          <div class="rectangle-4">
-            <div class="black-circle">
-              <div class="content-flex">
-                <v-img
-                  src="/images/OpenTalent_LogoNoir_Jaune_white.png"
-                  class="logo-artist"
-                />
-                <p class="devis">
-                  Sur devis
-                </p>
-              </div>
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="5">
-          <h2 class="outil-title">
-            Un outil complet en ligne
-          </h2>
-          <ul class="outil-ul">
-            <li class="outil-list">
-              Logiciel de gestion et communication en ligne
-            </li>
-            <li class="outil-list">
-              Destiné aux établissements d'enseignement artistique
-            </li>
-            <li class="outil-list">
-              Gestion quotidienne et en temps réel (suivi pédagogique,
-              facturation, encaissement…)
-            </li>
-            <li class="outil-list">
-              Pilotage complet de votre structure
-            </li>
-          </ul>
-        </v-col>
-        <v-row>
-          <v-col cols="4" />
-
-          <v-col cols="5">
-            <h2>Des caractéristiques uniques & dédiées</h2>
-            <div class="picto-container">
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto1.png"
-                />
-                <p class="picto-text">
-                  Logiciel de gestion & communication full web
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto2.png"
-                />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto3.png"
-                />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/artist/picto4.png"
-                />
-                <p class="picto-text">
-                  Communiquez en réseau
-                </p>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="2" />
-        </v-row>
-      </v-row>
-
-      <v-row class="container-green">
-        <v-row>
-          <v-col cols="6">
-            <p class="citation-school">
-              “ Pour les petits comme pour les grands établissements
-              d’enseignement artistique.“
-            </p>
-          </v-col>
-        </v-row>
-
-        <v-col cols="6">
-          <h6 class="subtitle-logiciel">
-            Logiciel Opentalent
-          </h6>
-          <v-img
-            src="/images/logiciels/school/screen2.png"
-            class="screen2-img"
-          />
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
+  <LayoutUIContainerVideo
+      image-url="/images/logiciels/school/screen2.png"
+    />
 </template>
 
-<script setup></script>
-
-<style scoped>
-.devis {
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 9rem;
-  margin-top: -1rem;
-  width: 7rem;
-}
-
-.icon-title {
-  margin-right: 1.5rem;
-  color: #fac20a;
-}
-.text-square {
-  font-family: "Barlow";
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 0.9rem;
-  text-align: center;
-}
-
-.icon {
-  margin-top: 2rem;
-}
-
-.container-square {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.outil-title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
-
-.outil-ul {
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.logo-artist {
-  top: 1rem;
-  margin-left: 0.3rem;
-  margin-right: 0.5rem;
-  z-index: 1;
-}
-.citation-school {
-  font-family: "Barlow";
-  font-style: italic;
-  font-weight: 300;
-  font-size: 2rem;
-  width: 38rem;
-  line-height: 40px;
-  color: #ffffff;
-  font-style: italic;
-  margin-top: 20rem;
-  margin-left: 2rem;
-}
-.subtitle-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #ffffff;
-  margin-left: 5rem;
-  margin-right: 15rem;
-  margin-top: 4rem;
-  top: 10rem;
-}
-.screen2-img {
-  width: 50rem;
-  height: 40rem;
-  bottom: 4rem;
-}
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
-    rgba(7, 27, 31, 0.3);
-  height: 35rem;
-}
-.title-picto-container {
-  align-items: start;
-}
-
-.picto-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-left: -15rem;
-}
+<script setup>
 
-.rectangle-4 {
-  width: 18rem;
-  height: 6rem;
-  background: rgba(250, 194, 10, 0.2);
-  border-radius: 3rem;
-  margin-left: 5rem;
-  margin-top: 2rem;
-}
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
+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' }
+];
 
-.picto-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.picto-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  margin-right: 2rem;
-  margin-left: 2rem;
-}
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
-.title {
-  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;
-}
+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>
 
-.screen-img {
-  width: 20rem;
-  height: 15rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.outil-row {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
 
-.yellow-square {
-  margin-left: 14rem;
-  width: 10rem;
-  height: 7rem;
-  background: #fac20a;
-  color: #091d20;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-}
-</style> -->

components/Logiciels/School/Avantages.vue

@@ -2,193 +2,58 @@
   <div id="Avantages">
     <LayoutContainer>
       <v-row class="mt-12">
-        <div class="d-flex justify-center align-center mt-2">
-          <v-icon
-            size="6"
-            class="fa-solid fa-circle icon-title"
+     
+
+        <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Découvrez les avantages de la solution'"
           />
-          <h4 class="subtitle-avantage">
-            Découvrez les avantages de la solution
-          </h4>
-        </div>
-      </v-row>
-      <v-row>
-        <h2 class="title">
-          Des avantages concrets
-        </h2>
       </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 class="description-card">
-              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" />
-        </div>
-          
-        </v-col>
-        <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">
-            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"
+            :numberColor="card.numberColor"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
-
-<style scoped>
-.description-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1rem;
-  color: #0e2d32;
-}
-.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;
-  margin-bottom: 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";
-  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;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-}
-
-.icon-title {
-  color: rgba(32, 147, 190, 0.6);
-  font-size: 1.5rem;
-  margin-left: 2rem;
-}
-
-.image-container {
-  position: relative;
-}
-
-.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;
-}
-</style>
+<script setup>
+import { ref } from 'vue';
+
+// Exemple de données pour les cartes
+const cards = ref([
+  {
+    title: 'Un gain de temps',
+    number: '01',
+    description: 'Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.',
+    image: '/images/logiciels/school/screen3.png',
+    isMemberCMF: true,
+  },
+  {
+    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,
+  },
+  {
+    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,
+  },
+]);
+
+</script>

components/Logiciels/School/Comparatif.vue

@@ -1,97 +1,22 @@
 <template>
   <div id="Comparatif">
     <LayoutContainer>
-      <v-row class="mt-12">
-        <div class="d-flex justify-center align-center">
-          <v-icon
-            size="6"
-            class="fa-solid fa-circle icon-title"
-          />
-          <h5 class="subtitle">
-            Comparatif de nos solutions
-          </h5>
-        </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">
-                32,90€ <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">
-                46,20€ <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.column1 }}
-      </td>
-      <td class="table-data-second">
-        <v-icon
-          v-if="row.column2 === 'check'"
-          size="18"
-          class="far fa-check-circle"
-        />
-        <v-icon
-          v-else-if="row.column2 === 'cross'"
-          size="18"
-          class="far fa-times-circle"
-          color="red"
+      <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="' Comparatif de nos solutions'"
         />
-        <span v-else>{{ row.column2 }}</span>
-      </td>
-      <td class="table-data-second">
-        <v-icon
-          v-if="row.column3 === 'check'"
-          size="18"
-          class="far fa-check-circle"
+        <LayoutUITitle
+          title="Et si vous passiez à la version Premium "
         />
-        <v-icon
-          v-else-if="row.column3 === 'cross'"
-          size="18"
-          class="far fa-times-circle"
-          color="red"
-        />
-        <span v-else>{{ row.column3 }}</span>
-      </td>
-    </tr>
-  </tbody>
-      </table>
+
+        <LayoutTableComparatif
+        :standardPrice="'32,90€'"
+        :premiumPrice="'46,20€'"
+        :color="'#0e2d32'"
+        :stripeColor="'rgba(32, 147, 190, 0.2)'"
+        :tableData="tableData"
+      />
     </LayoutContainer>
   </div>
 </template>
@@ -202,126 +127,3 @@ const tableData = [
   },
 ];
 </script>
-.
-<style scoped>
-.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;
-}
-.icon-title {
-  color: rgba(32, 147, 190, 0.6);
-  font-size: 1.5rem;
-  margin-left: 3rem;
-}
-.subtitle {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-font-size: 1rem;
-font-style: normal;
-font-weight: 600;
-line-height: 15px; 
-letter-spacing: 1.8px;
-text-transform: uppercase;
-}
-
-.title {
-  font-size: 3rem;
-  font-weight: 600;
-  margin-left: 3rem;
-  width: 27rem;
-  font-family: "Barlow";
-  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;
-}
-.table-row {
-  background-color: white;
-  text-align: center;
-  height: 3rem;
-}
-
-.table-body .table-row:nth-child(odd) {
-  background-color: rgba(32, 147, 190, 0.2);
-}
-
-</style>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,78 +1,24 @@
 <template>
   <div id="Fonctionnalites">
     <LayoutContainer>
-      <div class="container-green">
-        <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">
-            Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
-          </h4>
-        </div>
-        <div class="title-container">
-          <h4 class="title ml-6 mt-6">
-            Des fonctionnalités adaptées à vos besoins
-          </h4>
-        </div>
+      <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">
-            <div class="d-flex justify-center align-center">
-            <div class="carousel-button" @click="previousAction">
-              <i class="fas fa-chevron-left" @click="previousAction"/>
-            </div>
-            <div class="carousel-button" @click="nextAction">
-              <i class="fas fa-chevron-right" @click="nextAction"/>
-            </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">
-                        <!-- <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p> -->
-                        <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>
@@ -82,35 +28,31 @@
 
 <script setup>
 import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
 
-const functionCarousel = ref(null);
-const activeCardIndex = ref(2);
 
-const previousAction = () => {
-  const newIndex = activeCardIndex.value - 1;
-  if (newIndex >= 0) {
-    activeCardIndex.value = newIndex; 
-    functionCarousel.value.prev();
-  }
-};
-
-const nextAction = () => {
-  const newIndex = activeCardIndex.value + 1;
-  if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex; 
-    functionCarousel.value.next();
+const { 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",
@@ -119,6 +61,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Pré-inscription.png",
     title: "PRÉINSCRIPTION EN LIGNE",
     list: [
       "Parametrage personnalisé des formulaires & mails automatiques",
@@ -127,6 +70,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
     title: "AGENDA",
     list: [
       "Création et gestion des cours, examens, événements et prestations pédagogiques",
@@ -135,6 +79,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Parc-matériel.png",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -143,6 +88,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Suivi-pédagogique.png",
+
     title: "SUIVI PÉDAGOGIQUE",
     list: [
       "Gestion du cursus pédagogique (critères personnalisables)",
@@ -151,6 +98,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Facture.png",
+
     title: "FACTURATION",
     list: [
       "Facturation automatisée selon différents critères",
@@ -159,6 +108,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Communication.png",
+
     title: "COMMUNICATION",
     list: [
       "Édition et envoi de courriers, de mails ou de SMS*",
@@ -168,6 +119,8 @@ const cards = [
     option: "* en option",
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/internet.png",
+
     title: "SITE INTERNET ",
     list: [
       "Gestion intégrée au logiciel",
@@ -176,6 +129,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Statistiques.png",
+
     title: "STATISTIQUE",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
@@ -184,6 +139,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
+
     title: "RÉSEAU CMF ",
     list: [
       "Accès au répertoire du réseau",
@@ -192,6 +149,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Promotion.png",
+
     title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
     list: [
       "Sur votre site internet intégré",
@@ -203,15 +162,15 @@ const cards = [
 </script>
 
 <style scoped>
-
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 2.4rem;
-  color: white;
-  width: 35rem;
+.v-card-title-container {
+  display: flex;
+  flex-direction: row;
 }
+.logo-fonctionnalite {
+  width: 5rem;
+  height: 5rem;
+}
+
 .list-detail {
   font-family: "Barlow";
   font-style: normal;
@@ -224,6 +183,7 @@ const cards = [
 }
 .card-title {
   white-space: pre-wrap;
+  font-size: 1.1rem;
 }
 .carousel {
   margin-left: 2rem;
@@ -233,40 +193,13 @@ const cards = [
 .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: 20%;
-  max-width: 20%;
+  min-width: 30%;
+  max-width: 30%;
 }
 
 .card.active-card {
@@ -285,49 +218,10 @@ const cards = [
   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 {
-  /** coller à droite */
   position: absolute;
   right: 0;
   margin-right: 2rem;
@@ -341,21 +235,7 @@ const cards = [
   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;
-}
-
 .card {
-  width: 80rem;
   min-height: 35rem;
   max-height: 35rem;
   border-radius: 1rem;
@@ -364,15 +244,8 @@ const cards = [
 .v-card {
   border-radius: 1rem;
   min-height: 25rem;
-  max-height: 25rem;
-}
-
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
+  max-width: 20rem;
+  min-width: 20rem;
 }
 
 .container-green {

components/Logiciels/School/Formations.vue

@@ -3,131 +3,57 @@
     <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">Nos accompagnements sur-mesure</h5>
-          </div>
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Nos accompagnements sur-mesure'"
+            title-color="#fff"
+          />
         </v-row>
-
-        <v-row>
-          <v-col cols="6">
-            <div class="image-wrapper">
-              <v-img
-                src="/images/logiciels/school/reunion.jpg"
-                class="reunion-img1"
-              />
-              <div class="image-overlay1"></div>
-            </div>
-          </v-col>
-          <v-col cols="6">
-            <div class="image-wrapper">
-              <v-img
-                src="/images/logiciels/school/reunion.jpg"
-                class="reunion-img1"
-              />
-              <div class="image-overlay2"></div>
-            </div>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="6">
-            <div class="col-details">
-              <h4 class="session-title">2 sessions disponibles</h4>
-              <h3 class="formation-title">
-                Formation prise en main du logiciel - En ligne
-              </h3>
-              <p class="formation-details">
-                Parce qu’on sait qu’appréhender un nouvel outil peut-être
-                fastidieux et que vous n’avez pas de temps à perdre,...
-              </p>
-              <br />
-              <!-- <p class="formation-details mb-6">
-                Lors de votre souscription, nous vous invitons à choisir des
-                dates de formation qui se déroulera sous 2 jours non
-                consécutifs. En effet, ce sont des journées riches
-                d’informations et nous mettons un point d’honneur à vous laisser
-                digérer cette première journée, vous familiariser davantage avec
-                vos nouvelles connaissances avant de passer à la seconde.
-                Destinée aux nouveaux utilisateurs, elle est obligatoire lors de
-                l'acquisition du logiciel. Elle est également utile lors d'un
-                changement de personnel dans la structure.
-              </p> -->
+        <v-row class="mb-6">
+          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
+            <div class="image-wrapper mb-6">
+              <v-img :src="formation.image" class="reunion-img1" />
+              <div :class="formation.overlayClass"></div>
             </div>
-
-            <v-btn class="formation-btn"> S’incrire à une formation </v-btn>
-          </v-col>
-
-          <v-col cols="6">
             <div class="col-details">
-              <h4 class="session-title">10 sessions disponibles</h4>
-              <h3 class="formation-title">
-                Webinaire - Apprendre à piloter son activité
-              </h3>
-              <p class="formation-details">
-                Des explications précises sur certains modules du logiciel
-                Opentalent School, c'est possible pour aller encore plus loin...
-              </p>
+              <h4 class="session-title">
+                {{ formation.sessions }} sessions disponibles
+              </h4>
+              <h3 class="formation-title">{{ formation.title }}</h3>
+              <p class="formation-details">{{ formation.description }}</p>
               <br />
-              <!-- <p class="formation-details mb-6">
-                Lors de votre souscription, nous vous invitons à choisir des
-                dates de formation qui se déroulera sous 2 jours non
-                consécutifs. En effet, ce sont des journées riches
-                d’informations et nous mettons un point d’honneur à vous laisser
-                digérer cette première journée, vous familiariser davantage avec
-                vos nouvelles connaissances avant de passer à la seconde.
-                Destinée aux nouveaux utilisateurs, elle est obligatoire lors de
-                l'acquisition du logiciel. Elle est également utile lors d'un
-                changement de personnel dans la structure.
-              </p> -->
+              <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
             </div>
-            <v-btn class="formation-btn"> S'inscrire au webinaire</v-btn>
           </v-col>
         </v-row>
       </div>
-      <v-row >
-        <v-col cols="2">
-          <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">QUELQUES CHIFFRES</h5>
-          </div>
-        </v-row>
-        </v-col>
-      </v-row>
-      <v-row class="card-container">
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center small-padding"
-        >
-          <div class="card">
-            <h3 class="chiffre">30 &lt;1500</h3>
-            <p>elèves</p>
-          </div>
-        </v-col>
-
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <div class="card">
-            <h3 class="chiffre">234</h3>
-            <p>Clients</p>
-          </div>
-        </v-col>
-
-        <v-col cols="3" class="d-flex justify-center align-center">
-          <div class="card">
-            <h3 class="chiffre">20304</h3>
-            <p>Utilisateurs</p>
-          </div>
-        </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ériences</p>
-          </div>
+      <v-row>
+        <v-col cols="4">
+          <v-row>
+            <LayoutUISubTitle
+          :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>
         <LogicielsSchoolCaroussel />
       </v-row>
@@ -137,91 +63,43 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const formations = ref([
+  {
+    id: 1,
+    image: "/images/logiciels/school/reunion.jpg",
+    overlayClass: "image-overlay1",
+    sessions: "2",
+    title: "Formation prise en main du logiciel - En ligne",
+    description:
+      "Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux et que vous n’avez pas de temps à perdre,...",
+    buttonText: "S’incrire à une formation",
+  },
+  {
+    id: 2,
+    image: "/images/logiciels/school/reunion.jpg",
+    overlayClass: "image-overlay2",
+    sessions: "10",
+    title: "Webinaire - Apprendre à piloter son activité",
+    description:
+      "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
+    buttonText: "S'inscrire au webinaire",
+  },
+]);
+</script>
 
 <style scoped>
-
-.title {
-  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;
-}
-.presentation-title {
-  color: #071b1f;
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
 .col-details {
   margin-right: 6rem;
-}
-.image-wrapper {
-  position: relative;
-}
-.image-overlay1 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80%;
-  height: 100%;
-  background-color: rgba(32, 147, 190, 0.17);
   margin-left: 5rem;
-}
-.carousel-button i {
-  color: black;
-}
 
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid black;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 1rem;
-}
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  text-align: center;
-  color: #0e2d32;
-  width: 30rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 2rem;
 }
-.chiffre {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 50px;
-  line-height: 68px;
-  text-align: center;
-  color: #091d20;
-  margin-bottom: 0.5rem;
+.image-wrapper {
+  position: relative;
 }
 .formation-btn {
   width: 30rem;
   height: 4rem;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 18px;
@@ -229,37 +107,27 @@
   color: #eff9fb;
   border: 1px solid #eff9fb;
   border-radius: 0.5rem;
-  margin-left: 7rem;
   text-transform: none;
 }
 .formation-details {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.2rem;
   line-height: 1.5rem;
   color: #eff9fb;
-  margin-left: 7rem;
 }
 .formation-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.8rem;
   line-height: 26px;
   color: #ffffff;
-  margin-left: 7rem;
   margin-bottom: 3rem;
 }
 
 .session-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.8rem;
   line-height: 26px;
   color: #ffffff;
-  margin-left: 7rem;
   margin-bottom: 3rem;
 }
 .reunion-img1 {
@@ -267,42 +135,6 @@
   margin-left: 5rem;
   height: 100%;
 }
-
-.image-overlay2 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80%;
-  height: 100%;
-  background-color: rgba(32, 147, 190, 0.17);
-  width: 80%;
-  margin-left: 5rem;
-  height: 100%;
-}
-
-.reunion-img2 {
-  width: 80%;
-  margin-right: 5rem;
-  height: 100%;
-}
-.subtitle {
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-bottom: 1rem;
-}
-
-.icon-title {
-  color: rgba(32, 147, 190, 0.6);
-  font-size: 1.5rem;
-  margin-right: 0.5rem;
-  margin-left: 5rem;
-  margin-bottom: 1rem;
-}
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
@@ -311,24 +143,8 @@
 }
 
 .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;
-  width: 36rem;
-  height: 15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  margin-left: 10rem;
+  margin-right: 0rem;
 }
 </style>

components/Logiciels/School/MenuScroll.vue

@@ -134,5 +134,6 @@ const navigate = (menu) => {
 .menu-container div:hover {
   cursor: pointer;
   text-decoration: underline;
+  z-index: 15;
 }
 </style>

components/Logiciels/School/Presentation.vue

@@ -1,254 +1,55 @@
 <template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <v-row class="outil-row">
-        <v-col cols="4">
-          <div class="title">
-            <v-icon size="6" class="fa-solid fa-circle icon-title" />
-            <h4 class="presentation-title">Présentation d'opentalent school</h4>
-          </div>
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
-
-          <div class="rectangle-4">
-            <div class="black-circle">
-              <div class="content-flex">
-                <v-img
-                  src="/images/logo_school_white.png"
-                  class="logo-manager"
-                />
-                <div class="pricing-details">
-                  <p class="pricing-small-text">à partir de</p>
-                  <p class="pricing-big-text">
-                    32,90€ <span class="smaller-text">/mois</span>
-                  </p>
-                  <p class="pricing-small-text">payable annuellement</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="5">
-          <h2 class="outil-title">Un outil complet en ligne</h2>
-          <ul class="outil-ul">
-            <li class="outil-list">
-              Logiciel de gestion et communication en ligne
-            </li>
-            <li class="outil-list">
-              Destiné aux établissements d'enseignement artistique
-            </li>
-            <li class="outil-list">
-              Gestion quotidienne et en temps réel (suivi pédagogique,
-              facturation, encaissement…)
-            </li>
-            <li class="outil-list">Pilotage complet de votre structure</li>
-          </ul>
-        </v-col>
-
-        <v-row class="row-caracteristiques">
-          <v-col cols="4" />
-
-          <v-col cols="6">
-            <h2>Des caractéristiques uniques & dédiées</h2>
-            <div class="picto-container">
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/school/picto1.png"
-                />
-                <p class="picto-text">
-                  Logiciel de gestion & communication full web
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/school/picto2.png"
-                />
-                <p class="picto-text">Site internet intégré & simple d'usage</p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/school/picto3.png"
-                />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
-              </div>
-
-              <div class="picto-group">
-                <v-img
-                  class="picto-img"
-                  src="/images/logiciels/school/picto4.png"
-                />
-                <p class="picto-text">Communiquez en réseau</p>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="2" />
-        </v-row>
-      </v-row>
-
-      <v-row class="container-green">
-        <v-row>
-          <v-col cols="6">
-            <p class="citation-school">
-              “ Pour les petits comme pour les grands établissements
-              d’enseignement artistique.“
-            </p>
-          </v-col>
-        </v-row>
-
-        <v-col cols="6">
-          <div class="subtitle-logiciel">
-            <v-icon size="10" class="fa-solid fa-circle icon-logiciel" />
-            <h6>Logiciel Opentalent</h6>
-          </div>
-
-          <v-img
-            src="/images/logiciels/school/screen2.png"
-            class="screen2-img"
-          />
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
+  <LayoutContainer>
+    <div id="Presentation">
+      <LayoutUIPresentation
+        :pictoImages="pictoData"
+        :presentationText="presentationData"
+        :logoSrc="'images/logo/logiciels/School-Blanc.png'"
+      />
+    </div>
+
+    <LayoutUIContainerVideo
+      image-url="/images/logiciels/school/screen2.png"
+    />
+  </LayoutContainer>
 </template>
 
-<script setup></script>
+<script setup>
+const pictoData = [
+  {
+    src: "/images/logiciels/school/picto1.png",
+    text: "Logiciel de gestion et communication full web",
+  },
+  {
+    src: "/images/logiciels/school/picto2.png",
+    text: "Site web intégré & simple d'usage",
+  },
+  {
+    src: "/images/logiciels/school/picto3.png",
+    text: "Boostez votre visibilité & communication",
+  },
+  { src: "/images/logiciels/school/picto4.png", text: "Communiquez en réseau" },
+];
+
+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>
 
 <style scoped>
-.row-caracteristiques {
-  margin-top: -10rem;
-}
-.pricing-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: black;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 7rem;
-  margin-top: -2.5rem;
-  width: 10rem;
-}
-
-.pricing-small-text {
-  font-size: 0.6em;
-}
-
-.pricing-big-text {
-  font-size: 1.6em;
-  font-weight: bold;
-}
-
-.smaller-text {
-  font-size: 0.6em;
-}
-.presentation-title {
-  color: #071b1f;
-  font-family: Barlow;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
-
-.devis {
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 9rem;
-  margin-top: -1rem;
-  width: 7rem;
-}
-
-.logo-manager {
-  top: 1rem;
-  margin-left: 0.3rem;
-  margin-right: 0.5rem;
-  z-index: 1;
-}
-.rectangle-4 {
-  width: 18rem;
-  height: 6rem;
-  background: rgba(32, 147, 190, 0.2);
-  border-radius: 3rem;
-  margin-left: 5rem;
-  margin-top: 2rem;
-}
-.picto-text {
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  margin-right: 2rem;
-  margin-left: 2rem;
-}
-.picto-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-left: -15rem;
-}
-
-.picto-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.icon-title {
-  margin-right: 0.7rem;
-  color: rgba(32, 147, 190, 0.6);
-}
-
-.text-square {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 0.9rem;
-  text-align: center;
-}
-
-.icon {
-  margin-top: 1rem;
+.container-green {
+  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%), rgba(7, 27, 31, 0.3);
+  height: 40rem;
 }
 
-.container-square {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  color: white;
-  font-weight: 500;
-  font-size: 0.7rem;
-  line-height: 15px;
-  text-align: center;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
 
-.outil-title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
 
 .outil-ul {
   font-family: "Barlow";
@@ -269,7 +70,6 @@
   margin-top: 27rem;
   margin-left: 2rem;
 }
-
 .subtitle-logiciel {
   display: flex;
   align-items: center;
@@ -284,58 +84,10 @@
 }
 
 .icon-logiciel {
-  color: rgba(32, 147, 190, 0.6);
+  color: #fac20a;
   margin-right: 1rem;
 }
-.container-green {
-  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
-    rgba(7, 27, 31, 0.3);
-  height: 40rem;
-}
 
-.picto-container {
-  display: flex;
-  justify-content: flex-start;
-  padding: 0 2rem;
-}
-.picto-img {
-  width: 14rem;
-  height: 14rem;
-}
 
-.title {
-  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;
-}
 
-.screen-img {
-  width: 20rem;
-  height: 15rem;
-  margin-top: 2rem;
-  margin-left: 5rem;
-}
-.outil-row {
-  margin-bottom: 5rem;
-}
-.darkblue-square {
-  font-family: "Barlow";
-  width: 10rem;
-  height: 7rem;
-  background: #0e2d32;
-  margin-left: 14rem;
-}
-.blue-square {
-  font-family: "Barlow";
-  margin-left: 14rem;
-  width: 10rem;
-  height: 7rem;
-  background: rgba(32, 147, 190, 0.6);
-}
 </style>

components/Logiciels/School/Projet.vue

@@ -1,27 +1,25 @@
 <template>
   <div id="contact">
     <LayoutContainer>
-      <v-row>
-        <div class="project-container" />
-        <v-col cols="6">
-          <div class="contact-container">
-            <div class="d-flex justify-center align-center">
-              <v-icon
-                size="6"
-                class="fa-solid fa-circle icon-title"
-              />
-              <h5 class="contact">
-                Contactez-nous
-              </h5>
-            </div>
+      <v-row class="mt-12 ml-12 mr-12 mb-12">
+        <v-col cols="5" class="ml-12">
+
+            <LayoutUISubTitle
+          :iconSize="6"
+          :iconClasses="iconClasses"
+          :titleText="' Contactez-nous '"
+        />
+
             <v-img
               src="/images/logiciels/school/femme-casque.jpg"
               class="femme-casque"
             />
-          </div>
+
+
         </v-col>
-        <v-col cols="6">
-          <div class="project-container">
+
+
+        <v-col cols="6" class="mt-12">
             <h5 class="title">
               Vous avez un projet ?
             </h5>
@@ -39,7 +37,7 @@
             <v-btn class="btn-contact">
               Nous contacter
             </v-btn>
-          </div>
+
         </v-col>
       </v-row>
 
@@ -65,51 +63,6 @@
         </v-col>
       </v-row>
 
-      <!-- <v-row>
-        <v-col
-          cols="4"
-          class="border-col"
-        >
-          <div class="d-flex justify-center align-center">
-            <v-icon
-              size="35"
-              class="fa-brands fa-react icon"
-            />
-          </div>
-          <p class="d-flex justify-center align-center details">
-            Paiement Sécurisé
-          </p>
-        </v-col>
-        <v-col
-          cols="4"
-          class="border-col"
-        >
-          <div class="d-flex justify-center align-center">
-            <v-icon
-              size="35"
-              class="fa-brands fa-react icon"
-            />
-          </div>
-          <p class="d-flex justify-center align-center details">
-            Service clef en main
-          </p>
-        </v-col>
-
-        <v-col
-          cols="4"
-          class="border-col"
-        >
-          <div class="d-flex justify-center align-center">
-            <v-icon
-              size="35"
-              class="fa-brands fa-react icon"
-            />
-          </div>
-          <p class="d-flex justify-center align-center details">
-            Soutien pour votre activité
-          </p>
-        </v-col>
-      </v-row> -->
     </LayoutContainer>
   </div>
 </template>
@@ -117,23 +70,6 @@
 <script setup></script>
 
 <style scoped>
-.details {
-  color: var(--vert-100, #091d20);
-  margin-right: auto;
-  margin-left: auto;
-  width: 8rem;
-  text-align: center;
-  margin-top: 0.7rem;
-  font-size: 1rem;
-  font-family: "Barlow";
-  font-weight: 300;
-  line-height: 14px;
-}
-.border-col {
-  border-top: 1px solid #e5e5e5;
-  border-right: 1px solid #e5e5e5;
-  height: 8rem;
-}
 .border-row {
   border: 1px solid #e5e5e5;
   margin-left: 10rem;
@@ -155,13 +91,8 @@
   margin-left: 3rem;
 }
 
-.project-container {
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-}
-
 .btn-contact {
-  background: #f4aa2a;
+  background: rgba(32, 147, 190, 0.4);;
   border-radius: 6px;
   color: #fff;
 
@@ -172,8 +103,6 @@
   text-transform: uppercase;
   margin-top: 2rem;
   margin-bottom: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
 }
 
 .contact-details {
@@ -182,28 +111,8 @@
   line-height: 20px;
   color: #091d20;
   width: 20rem;
-  font-family: "Barlow";
-  font-style: normal;
-}
-.contact {
-  margin-bottom: 0.5rem;
-  color: #071B1F;
-font-family: Barlow;
-font-size: 1rem;
-font-style: normal;
-font-weight: 600;
-line-height: 15px; 
-letter-spacing: 1.8px;
-text-transform: uppercase;
-}
-
-.icon-title {
-  margin-bottom: 0.5rem;
-  margin-right: 1rem;
-  color: rgba(32, 147, 190, 0.6);
 }
 .title {
-  font-family: "Barlow";
   font-weight: 600;
   font-size: 3rem;
   line-height: 18px;
@@ -217,27 +126,10 @@ text-transform: uppercase;
   line-height: 38px;
   color: #071b1f;
   margin-bottom: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
 }
 
-.contact-container {
-  margin-left: 5rem;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-top: 4rem;
-  margin-bottom: 2rem;
-}
 
-.icon {
-  margin-top: 1rem;
-  color: #0e2d32;
-}
 .femme-casque {
-  width: 18rem;
-  margin-left: 15rem;
+  width: 20rem;
 }
 </style>

components/Logiciels/School/Reviews.vue

@@ -3,9 +3,9 @@
     <LayoutContainer>
       <div class="container-green">
         <v-row>
-          <v-col cols="4">
+          <v-col cols="3">
             <h3 class="reviews-title">
-              C'est eux qui en parlent le mieux
+              Ce sont eux qui en parlent le mieux
             </h3>
             <div class="d-flex justify-center align-center">
               <div
@@ -23,7 +23,7 @@
             </div>
           </v-col>
 
-          <v-col cols="8">
+          <v-col cols="9">
             <Carousel
               ref="carousel"
               :items-to-show="3"
@@ -181,27 +181,15 @@ const cards = [
   margin-top: 3rem;
 }
 
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  height: 12rem;
-}
 .reviews-title {
   font-size: 2rem;
   font-weight: 700;
   color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
-  margin-left: 3rem;
-  margin-right: 3rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
   margin-top: 5rem;
   text-align: center;
 }

pages/artist.vue

@@ -0,0 +1,7 @@
+<template>
+  <LayoutUIContainerVideo
+    citation-text="Custom citation text here."
+    subtitle="Custom Subtitle Here"
+    image-url="/images/logiciels/school/screen2.png"
+  />
+</template>

pages/opentalent_artist.vue

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

pages/opentalent_school.vue

@@ -15,7 +15,7 @@
   <LogicielsSchoolComparatif />
   <LogicielsSchoolProjet />
   <LogicielsSchoolFormations />
-  <LogicielsSchoolReviews />
+  <LayoutCarouselTrustCompanie />
   <LayoutFAQ id="layout-footer" />
   <LayoutUISolutionsFooter id="layout-footer" />
   <LayoutFooter id="layout-footer" />
@@ -74,9 +74,9 @@ 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/poc.vue → pages/school.vue

@@ -1,71 +1,24 @@
 <template>
-  <div id="Temoignages">
+  <div id="Fonctionnalites">
     <LayoutContainer>
-      <div class="container-green">
+      <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">
-            <h3 class="reviews-title">
-              Découvrez toutes les fonctionnalités de notre solution
-            </h3>
-            <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div class="carousel-button" @click="goNext">
-                <i class="fas fa-chevron-right" />
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <Carousel
-              ref="carousel"
-              :items-to-show="5"
-              :items-to-scroll="1"
-              class="carousel"
-              :center-mode="true"
-              :center-on-init="true"
-            >
-              <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">
-                        <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p>
-                        <p class="reviewer-structure">
-                          {{ card.structure }}
-                        </p>
-                      </div> -->
-                    </v-card-item>
-                  </v-card>
-                </div>
-              </Slide>
-            </Carousel>
+            <LayoutCarouselFonctionnalite
+              :cards="cards"
+              :functionCarousel="functionCarousel"
+              :itemsToShow="itemsToShow"
+            />
           </v-col>
         </v-row>
       </div>
@@ -75,36 +28,31 @@
 
 <script setup>
 import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
-const carousel = ref(null);
-const activeCardIndex = ref(2);
 
-const goPrevious = () => {
-  const newIndex = activeCardIndex.value - 1;
-  if (newIndex >= 0) {
-    activeCardIndex.value = newIndex;
-    carousel.value.prev();
-    carousel.value.goTo(activeCardIndex.value); // Centre la nouvelle carte active
-  }
-};
 
-const goNext = () => {
-  const newIndex = activeCardIndex.value + 1;
-  if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex;
-    carousel.value.next();
-    carousel.value.goTo(activeCardIndex.value); // Centre la nouvelle carte active
+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: ["Espace élève", "Espace professeur", "Espace administrateur"],
+    list: ["Administration", "Professeurs", "Élèves/Familles"],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
+
     title: "RÉPERTOIRE",
     list: [
       "Élèves et responsable légaux",
@@ -113,6 +61,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Pré-inscription.png",
     title: "PRÉINSCRIPTION EN LIGNE",
     list: [
       "Parametrage personnalisé des formulaires & mails automatiques",
@@ -121,6 +70,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
     title: "AGENDA",
     list: [
       "Création et gestion des cours, examens, événements et prestations pédagogiques",
@@ -129,6 +79,7 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Parc-matériel.png",
     title: "PARC MATÉRIEL ",
     list: [
       "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
@@ -137,6 +88,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Suivi-pédagogique.png",
+
     title: "SUIVI PÉDAGOGIQUE",
     list: [
       "Gestion du cursus pédagogique (critères personnalisables)",
@@ -145,6 +98,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Facture.png",
+
     title: "FACTURATION",
     list: [
       "Facturation automatisée selon différents critères",
@@ -153,14 +108,19 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Communication.png",
+
     title: "COMMUNICATION",
     list: [
-      "Édition et envoi de courriers, de mails ou de SMS*(*en option)",
+      "É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",
@@ -169,6 +129,8 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Statistiques.png",
+
     title: "STATISTIQUE",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
@@ -177,10 +139,18 @@ const cards = [
     ],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Agenda.png",
+
     title: "RÉSEAU CMF ",
-    list: ["Espace élève", "Espace professeur", "Espace administrateur"],
+    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é",
@@ -192,6 +162,15 @@ const cards = [
 </script>
 
 <style scoped>
+.v-card-title-container {
+  display: flex;
+  flex-direction: row;
+}
+.logo-fonctionnalite {
+  width: 5rem;
+  height: 5rem;
+}
+
 .list-detail {
   font-family: "Barlow";
   font-style: normal;
@@ -204,45 +183,70 @@ const cards = [
 }
 .card-title {
   white-space: pre-wrap;
+  font-size: 1.1rem;
 }
 .carousel {
   margin-left: 2rem;
   margin-right: 2rem;
-
 }
 
 .card.active-card {
-  /* Supprimez les anciennes propriétés width et border */
 }
 
+.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;
-  /* Les styles de carte par défaut */
-  transition: transform 0.3s; /* Ajoutez une transition pour un effet de zoom fluide */
-  min-width: 20%;
-  max-width: 20%;
+  transition: transform 0.3s;
+  min-width: 30%;
+  max-width: 30%;
 }
 
 .card.active-card {
-  transform: scale(1.15); /* Agrandit la carte active de 10% */
+  transform: scale(1.05);
 }
 .carousel-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 4rem;
+  height: 4rem;
   background-color: transparent;
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-top: 1rem;
 }
 
 .carousel-button i {
   color: #fff;
+  cursor: pointer;
 }
 .reviewer-name {
   font-family: "Barlow";
@@ -282,11 +286,9 @@ const cards = [
   text-align: left;
 }
 .card-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-left: 5.5rem;
-  margin-top: 3rem;
+  position: absolute;
+  right: 0;
+  margin-right: 2rem;
 }
 
 .card-text {
@@ -295,27 +297,22 @@ const cards = [
   font-weight: 300;
   font-size: 1rem;
   line-height: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
   height: 12rem;
 }
 .reviews-title {
-  font-size: 2rem;
-  font-weight: 700;
   color: #fff;
   font-family: "Barlow";
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 3rem;
-  margin-right: 3rem;
-  margin-top: 5rem;
-  text-align: center;
+  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;
@@ -323,10 +320,9 @@ const cards = [
 
 .v-card {
   border-radius: 1rem;
-  min-height: 20rem;
-  max-height: 20rem;
-  min-width: 20rem;
+  min-height: 25rem;
   max-width: 20rem;
+  min-width: 20rem;
 }
 
 .card-container {

yarn.lock

@@ -4283,9 +4283,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449:
-  version "1.0.30001460"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001460.tgz#31d2e26f0a2309860ed3eff154e03890d9d851a7"
-  integrity sha512-Bud7abqjvEjipUkpLs4D7gR0l8hBYBHoa+tGtKJHvT2AYzLp1z7EmVkUT4ERpVUfca8S2HGIVs883D8pUH1ZzQ==
+  version "1.0.30001561"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz"
+  integrity sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==
 
 caseless@~0.12.0:
   version "0.12.0"