refacto et amelio artist + school

components/Layout/UI/Banner.vue

@@ -123,10 +123,9 @@ const props = defineProps({
 }
 
 .logo-image {
-  width: 90%;
-  height: auto;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
+  width: 100%;
+  height: 50%;
+  margin-top: 2.5rem;
 }
 
 .banner-container {
@@ -136,8 +135,9 @@ const props = defineProps({
 
 .cover-image {
   width: 100%;
-  height: 29rem;
+  height: 33rem;
   object-fit: cover;
+  object-position: center 20%; 
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);

components/Layout/UI/OutilPresentation.vue

@@ -0,0 +1,347 @@
+<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/StickyMenu.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineProps } from "vue";
+import { ref, defineProps } from "vue";
 
 const props = defineProps({
   shouldShowStickyMenu: Boolean,
@@ -42,7 +42,7 @@ const squares = ref(props.squaresData);
   letter-spacing: 0.2em;
   text-transform: uppercase;
 }
-
+.yellow-square,
 .blue-square,
 .darkblue-square {
   display: flex;
@@ -55,6 +55,11 @@ const squares = ref(props.squaresData);
   padding: 1rem;
 }
 
+.yellow-square {
+  background: #f9d648;
+  color: #0e2d32;
+}
+
 .blue-square {
   background: rgba(32, 147, 190);
 }

components/Logiciels/Artist/Abonnement.vue

@@ -0,0 +1,239 @@
+<template>
+  <div id="Abonnement">
+    <LayoutContainer>
+      <v-row class="mt-12">
+        <v-col cols="4">
+          <div class="title-container mt-3">
+            <v-icon size="6" class="fa-solid fa-circle icon-title" />
+            <h4 class="subtitle">S'abonner dès maintenant</h4>
+
+          </div>
+          <div class="profile-circle"></div>
+
+          <div class="subscription-info">
+            <p class="mt-3 mb-6">Pour vous abonner au logiciel, téléchargez et remplissez le formulaire avant de nous le transmettre</p>
+            <a href="/lien-vers-le-formulaire" class="download-button">Télécharger le formulaire d'abonnement</a>
+          </div>
+          <div class="subscription-steps">
+            <ol>
+              <li  class="mt-6">Téléchargez le formulaire</li>
+              <li>Complétez le formulaire</li>
+              <li>Joignez le règlement par chèque avec le formulaire à <br> <br> 
+                2iOPENservice <br>
+                217 rue Raoul Follereau <br>
+                74300 CLUSES</li><br>
+              <li>Après réception de votre formulaire d'adhésion et de votre règlement, nous vous ouvrons le service choisi. Vous recevrez alors un mail avec votre identifiant de connexion, votre mot de passe, ainsi que l'URL de votre site internet.</li>
+            </ol>
+          </div>
+        </v-col>
+
+        <v-col cols="8">
+          <h5 class="title">
+            Opentalent Artist, la solution que vous attendiez...
+          </h5>
+          <p class="solution">
+            Que vous soyez une petite ou une structure plus conséquente, notre
+            offre s'adapte à toutes les tailles : le prix de l’abonnement au
+            logiciel varie en fonction du nombre d'élèves, tout en conservant
+            l'intégralité des fonctionnalités.
+          </p>
+          <h3 class="cmf">
+            Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
+          </h3>
+          <div class="border-row">
+            <v-img
+              class="logo-cmf"
+              src="/images/logiciels/school/cmf_logo_orange.png"
+            />
+            <div class="cmf-container">
+
+              <p class="cmf-text">
+                Attention si vous êtes adhérent à la Confédération Musicale de
+                France (CMF), vous bénéficiez gratuitement, dans le cadre de
+                votre adhésion, de la version Opentalent Artist Standard, et de
+                conditions privilégiées pour la version Artist Premium.
+                Contactez nous ou contactez votre fédération pour obtenir vos
+                codes d'accès.
+              </p>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.subscription-steps ol {
+  list-style-type: decimal;
+  padding-left: 2rem;
+  color: #000;
+/* Body Large - Light */
+font-family: Barlow;
+font-size: 16px;
+font-style: normal;
+font-weight: 300;
+line-height: 20px; /* 125% */ 
+margin-left: 3rem;
+width: 20rem;
+}
+.profile-circle {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background-color: #000;
+  border-radius: 50%;
+  margin-left: 11rem;
+  top: 3rem
+
+}
+.subscription-info {
+  margin-left: 4rem;
+  background: var(--Jaune-Artist-20, rgba(250, 194, 10, 0.20));
+  border-radius: 10px;
+  height: 15rem;
+  width: 20rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--Vert-100, #091D20);
+
+text-align: center;
+font-family: Barlow;
+font-size: 1rem;
+font-style: normal;
+font-weight: 300;
+line-height: 18px; 
+}
+
+
+
+.download-button {
+  background-color: #000;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+/* Style du rond noir */
+.black-circle {
+  width: 90px;
+  height: 90px;
+  background-color: #000;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: -1.5rem;
+  margin-left: -2rem;
+}
+.solution {
+  width: 45rem;
+}
+
+.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: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+  width: 45rem;
+}
+.border-col {
+  border-top: 1px solid #e5e5e5;
+  border-right: 1px solid #e5e5e5;
+  height: 8rem;
+}
+.border-row {
+  border: 1px solid #e5e5e5;
+  margin-right: 25rem;
+  margin-bottom: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cmf-container {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.logo-cmf {
+  width: 8rem;
+  height: 10rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
+  margin-right: 2rem;
+  border-right: 1px solid #e5e5e5;
+}
+
+.cmf-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.3rem;
+  color: #091d20;
+  width: 35rem;
+}
+.cmf {
+  margin-top: 3rem;
+  margin-bottom: 2rem;
+  color: #071b1f;
+  width: 40rem;
+  font-family: Barlow;
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 38px;
+}
+.contact-details {
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 20rem;
+  font-family: "Barlow";
+  font-style: normal;
+}
+.icon-title {
+  margin-right: 1rem;
+  color: #fac20a;
+}
+.title {
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  font-family: "Barlow";
+  font-style: normal;
+}
+</style>

components/Logiciels/Artist/Avantages.vue

@@ -1,66 +1,70 @@
 <template>
   <div id="Avantages">
     <LayoutContainer>
-      <v-row>
-        <div class="d-flex justify-center align-center">
-          <v-icon
-            size="10"
-            class="fa-solid fa-circle icon-title"
-          />
-          <h5 class="subtitle-avantage">
-            Découvrez les avantages de la solution
-          </h5>
+      <v-row class="mt-12">
+        <div class="title-container">
+          <v-icon size="6" class="fa-solid fa-circle icon-title" />
+          <h4 class="subtitle">Découvrez les avantages de la solution</h4>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">
-          Des avantages concrets
-        </h3>
+        <h3 class="title">Des avantages concrets</h3>
       </v-row>
 
       <v-row class="row">
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">
-              Une gestion collaborative
-            </h4>
-            <span class="number-card">03</span>
+            <h4 class="description-card">Un gain de temps</h4>
+            <span class="number-card">01</span>
           </div>
 
-          <hr>
+          <hr />
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
           </p>
+          <div class="image-container">
+            <v-img src="/images/logiciels/school/screen3.png" />
+            <v-chip class="chip-card">
+              <p class="cmf">Membre CMF</p>
+            </v-chip>
+          </div>
         </v-col>
         <v-col cols="4">
           <div class="title-card">
-            <h4>Une gestion collaborative</h4>
-            <span class="number-card">03</span>
+            <h4>Une activité structurée</h4>
+            <span class="number-card">02</span>
           </div>
 
-          <hr>
+          <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.
+            Des espaces dédiés et des outils spécifiques à vos besoins pour une
+            gestion optimisée et une lecture simplifiée.
           </p>
-          <p>
+          <div class="image-container">
+            <v-img src="/images/logiciels/school/screen3.png" />
             <v-chip class="chip-card">
-              Membre cmf
+              <p class="cmf">Membre CMF</p>
             </v-chip>
-          </p>
-          <v-img src="/images/logiciels/school/screen3.png" />
+          </div>
         </v-col>
         <v-col cols="4">
           <div class="title-card">
             <h4>Une gestion collaborative</h4>
             <span class="number-card">03</span>
           </div>
-          <hr>
+          <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.
+            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>
       </v-row>
     </LayoutContainer>
@@ -70,6 +74,59 @@
 <script setup></script>
 
 <style scoped>
+.chip-card {
+  color: #000000;
+  position: absolute;
+  margin-left: 2rem;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 16px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.9);
+}
+
+.cmf {
+  color: #000000;
+}
+.image-container {
+  position: relative;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 25rem;
+  margin-left: 2rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #fac20a;
+}
+
 .v-chip {
   background: white;
   color: black;
@@ -90,10 +147,9 @@
   font-style: normal;
   font-weight: 500;
   font-size: 1.3rem;
-  color: #e34461;
+  color: #f9d648;
 }
 
-/** pour title-card : flex avec un espaece between */
 .title-card {
   display: flex;
   flex-direction: row;
@@ -114,25 +170,23 @@
 
 .title {
   font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
-  font-size: 2rem;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
   margin-left: 2rem;
-  margin-top: 1rem;
+  margin-top: 2rem;
 }
 
 .subtitle-avantage {
+  color: #071b1f;
   font-family: "Barlow";
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-  margin-right: 73rem;
-}
-
-.icon-title {
-  color: #fac20a;
-  font-size: 1.5rem;
-  margin-left: 2rem;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
 }
 </style>

components/Logiciels/Artist/Banner.vue

@@ -1,59 +1,23 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <div class="container-title">
-        <v-col
-          cols="4"
-          class="text-left"
-        >
-          <h1>Manager</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="logiciel"
-        >
-          <h1>Opentalent Artist</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="text-right"
-        >
-          <h1>School</h1>
-        </v-col>
-      </div>
+      <LayoutUIBannerTitle
+        :leftText="'School'"
+        :centerText="'Opentalent Artist'"
+        :rightText="'Manager'"
+      />
     </v-row>
 
     <v-row>
       <v-col cols="12">
-        <div class="banner-container">
-          <img
-            src="/images/logiciels/artist/banner.jpg"
-            alt="line"
-            class="cover-image"
-          >
-          <div class="black-square">
-            <v-row>
-              <div class="content-row">
-                <v-icon
-                  size="50"
-                  class="fa-brands fa-react icon"
-                />
-                <p class="description-square">
-                  École de musique, d'art, de danse, de cirque, conservatoires
-                  et MJC
-                </p>
-              </div>
-            </v-row>
-          </div>
-
-          <div class="white-square">
-            <img
-              src="/images/opentalent_artist_black.png"
-              alt="Logo"
-              class="logo-image"
-            >
-          </div>
-        </div>
+        <LayoutUIBanner
+          :imageSrc="'/images/logiciels/artist/banner.jpg'"
+          imageAlt="'line'"
+          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoireset MJC'"
+          :logoSrc="'/images/logo/logiciels/Artist-noir.png'"
+          :squareColor="'#fac20a'"
+          :blueSquareColor="'#FFF'"
+        />
       </v-col>
     </v-row>
   </LayoutContainer>
@@ -62,10 +26,10 @@
 <script setup></script>
 
 <style scoped>
+
 .container-title {
   display: flex;
   justify-content: space-around;
-  font-family: "Barlow";
   line-height: 16px;
   display: flex;
   align-items: center;
@@ -85,18 +49,6 @@
   margin-top: 2rem;
   margin-left: 5rem;
 }
-
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
-
 .text-right {
   margin-top: 2rem;
   font-family: "Barlow";
@@ -111,77 +63,16 @@
   margin-right: 5rem;
 }
 
-.black-square {
-  position: absolute;
-  bottom: 0rem;
-  right: 0;
-  width: 13rem;
-  height: 10rem;
-  background: #fac20a;
-}
-
-.white-square {
-  position: absolute;
-  bottom: 0rem;
-  right: 13rem;
-  width: 13rem;
-  height: 10rem;
-  background: white;
-}
 
-.description-square {
+.logiciel {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  text-align: center;
-  color: #091d20;
-  display: flex;
-  align-items: center;
+  font-size: 3rem;
+  line-height: 85px;
   text-align: center;
-  margin-top: 0.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 1rem;
-}
-
-.content-row {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-}
-
-.icon {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.logo-image {
-  width: 90%;
-  height: auto;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  height: 25rem;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
 }
 
-.cover-image {
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-  transition: transform 0.2s;
-  margin: 0 auto;
-  transform: scaleX(-1);
-  display: block;
-}
 </style>

components/Logiciels/Artist/Premium.vue → components/Logiciels/Artist/Comparatif.vue

@@ -1,84 +1,65 @@
 <template>
   <div id="Comparatif">
     <LayoutContainer>
-      <v-row>
-        <div class="d-flex justify-center align-center">
-          <v-icon
-            size="10"
-            class="fa-solid fa-circle icon-title"
-          />
-          <h5 class="subtitle">
-            Comparatif de nos solutions
-          </h5>
-        </div>
+      <v-row class="mt-12">
+        <div class="title-container mt-6">
+            <v-icon size="6" class="fa-solid fa-circle icon-title mt-6 ml-6" />
+            <h4 class="subtitle mt-6 ml-2">Comparatif de nos solutions</h4>
+          </div>
       </v-row>
       <v-row>
-        <h3 class="title">
-          Et si vous passiez à la version Premium
-        </h3>
+        <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" />
             <th class="thead">
-              <p class="standard">
-                Standard
-              </p>
-              <p class="from">
-                A partir de
-              </p>
-              <p class="price">
-                11 <span class="ttc">ttc</span>
-              </p>
-              <p class="month">
-                /mois
-              </p>
+              <p class="standard">Standard</p>
+              <p class="from">A partir de</p>
+              <p class="price">14 <span class="ttc">ttc</span></p>
+              <p class="month">/mois</p>
             </th>
             <th class="thead premium-column">
-              <p class="standard">
-                Premium
-              </p>
-              <p class="from">
-                A partir de
-              </p>
-              <p class="price">
-                18 <span class="ttc">ttc</span>
-              </p>
-              <p class="month">
-                /mois
-              </p>
+              <p class="standard">Premium</p>
+              <p class="from">A partir de</p>
+              <p class="price">18 <span class="ttc">ttc</span></p>
+              <p class="month">/mois</p>
             </th>
           </tr>
         </thead>
         <tbody class="table-body">
-          <tr
-            v-for="row in tableData"
-            :key="row.id"
-            class="table-row"
-          >
-            <td class="table-data table-data-left">
-              {{ row.column1 }}
-            </td>
+          <tr v-for="row in tableData" :key="row.id" class="table-row">
             <td class="table-data">
               {{ row.column2 }}
             </td>
             <td class="table-data-second">
               <v-icon
                 v-if="row.column3 == 'check'"
-                size="15"
+                size="18"
                 class="far fa-check-circle"
               />
+              <v-icon
+                v-else-if="row.column3 === 'cross'"
+                size="18"
+                class="far fa-times-circle"
+                color="red"
+              />
               <span v-else>{{ row.column3 }}</span>
             </td>
             <td class="table-data-second">
               <v-icon
                 v-if="row.column4 == 'check'"
-                size="15"
+                size="18"
                 class="far fa-check-circle"
               />
+              <v-icon
+                v-else-if="row.column3 === 'cross'"
+                size="18"
+                class="far fa-times-circle"
+                color="red"
+              />
               <span v-else>{{ row.column4 }}</span>
             </td>
           </tr>
@@ -92,78 +73,61 @@
 const tableData = [
   {
     id: 1,
-    column1: "Espace mémoire",
-    column2: "Stockage disponible",
-    column3: "1 Go",
-    column4: "2 Go",
+    column2: "ADMINISTRATION",
+    column3: "check",
+    column4: "check",
   },
   {
     id: 2,
-    column1: "Administration",
-    column2: "Compte Internet avec gestion des droits",
-    column3: "150",
-    column4: "300",
+    column2: "GESTION DES MEMBRES",
+    column3: "check",
+    column4: "check",
   },
   {
     id: 3,
-    column1: "",
-    column2: "Gestion des rôles",
+    column2: "EXTRANET UTILISATEURS",
     column3: "check",
     column4: "check",
   },
   {
     id: 4,
-    column1: "",
-    column2: "Gestion du bureau et du CA",
+    column2: "GESTION DU MATÉRIEL",
     column3: "check",
     column4: "check",
   },
   {
     id: 5,
-    column1: "",
-    column2: "Gestion des commissions",
+    column2: "GESTION DES ÉVÉNEMENTS",
     column3: "check",
     column4: "check",
   },
   {
     id: 6,
-    column1: "gestion des membres",
-    column2: "",
+    column2: "CARNET D'ADRESSE",
     column3: "check",
     column4: "check",
   },
   {
     id: 7,
-    column1: "",
-    column2: "Tuteurs pour les mineurs",
-    column3: "check",
+    column2: "COMMUNICATION",
+    column3: "cross",
     column4: "check",
   },
   {
     id: 8,
-    column1: "gestion des élèves",
-    column2: "Nombre d’élève maximum",
+    column2: "SITE INTERNET",
     column3: "check",
     column4: "check",
   },
   {
     id: 9,
-    column1: "",
-    column2: "Fiche élève avec gestion des tuteurs",
+    column2: "FONCTIONNALITÉ DU RÉSEAU CMF",
     column3: "check",
     column4: "check",
   },
   {
     id: 10,
-    column1: "",
-    column2: "Corus suivi",
-    column3: "check",
-    column4: "check",
-  },
-  {
-    id: 11,
-    column1: "",
-    column2: "Suivi pédagogique",
+    column2: "SAUVEGARDE",
     column3: "check",
     column4: "check",
   },
@@ -171,6 +135,27 @@ const tableData = [
 </script>
 .
 <style scoped>
+.title-container{
+  display: flex;
+  align-items: center;
+}
+
+.icon-title {
+  color: #fac20a;
+  font-size: 1.5rem;
+
+}
+.subtitle {
+  color: #0e2d32;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
 .table-data-second {
   padding-right: 5rem;
 }
@@ -236,18 +221,7 @@ const tableData = [
   text-transform: uppercase;
   color: #454545;
 }
-.icon-title {
-  color: #fac20a;
-  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;
-}
+
 
 .title {
   font-size: 1.5rem;
@@ -269,12 +243,13 @@ const tableData = [
   line-height: 34px;
 }
 .table-comparatif {
-  width: 80%;
+  width: 70%;
   margin-top: 1rem;
   margin-right: auto;
   margin-left: auto;
   border: none;
-  border-collapse: collapse;
+    border-collapse: collapse;
+    margin-bottom: 3rem;
 }
 .table-row {
   background-color: white;

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,192 +2,77 @@
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <v-row>
-          <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon-title" />
-            <h4 class="subtitle-fontionnalite">
-              Découvrez toutes les foncitonnalités de notre solution
-            </h4>
-          </div>
-        </v-row>
-
-        <v-row>
-          <h2 class="title-fonctionnalite">
+        <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
-          </h2>
-        </v-row>
-
-        <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-        </v-row>
-
+          </h4>
+        </div>
         <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
+          <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>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
+            <div class="carousel-button" @click="nextAction">
+              <i class="fas fa-chevron-right" />
             </div>
+          </div>
           </v-col>
 
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
         </v-row>
-
         <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
+          <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>
 
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
-          </v-col>
+                      <div class="card-footer">
+                        <!-- <v-card-actions class="reviewer-name">
+                          {{ card.name }}
+                        </v-card-actions>
 
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p> -->
+                        <p class="reviewer-structure">
+                          {{ card.option }}
+                        </p>
+                      </div>
+                    </v-card-item>
+                  </v-card>
+                </div>
+              </Slide>
+            </Carousel>
           </v-col>
         </v-row>
       </div>
@@ -195,63 +80,277 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+
+const functionCarousel = ref(null);
+const activeCardIndex = ref(2);
+
+const previousAction = () => {
+  const newIndex = activeCardIndex.value - 1;
+  if (newIndex >= 0) {
+    activeCardIndex.value = newIndex; 
+    functionCarousel.value.prev();
+  }
+};
+
+const nextAction = () => {
+  const newIndex = activeCardIndex.value + 1;
+  if (newIndex < cards.length) {
+    activeCardIndex.value = newIndex; 
+    functionCarousel.value.next();
+  }
+};
+
+const cards = [
+  {
+    title: "ESPACES DÉDIÉS",
+    list: ["Administration", "Membres/Adhérents"],
+  },
+  {
+    title: "RÉPERTOIRE",
+    list: [
+      "Membres",
+      "Personnel administratif ",
+      "Contacts extérieurs, partenaires & donateurs",
+    ],
+  },
+  {
+    title: "AGENDA",
+    list: [
+      "Création et gestion des événements internes et externes",
+      "Invitation aux événements",
+      "Gestion des présences ",
+    ],
+  },
+  {
+    title: "PARC MATÉRIEL ",
+    list: [
+      "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
+      "Locations et prêts de matériel",
+      "Partage de partitions",
+    ],
+  },
+  {
+    title: "COMMUNICATION",
+    list: [
+      "Édition et envoi de courriers, de mails ou de SMS*",
+      "Création de modèles de courriers, mails ou SMS",
+      "Outil de publipostage intégré pour un envoi personnalisé",
+    ],
+    option: "* en option",
+  },
+  {
+    title: "SITE INTERNET ",
+    list: [
+      "Gestion intégrée au logiciel",
+      "Mise à jour automatique des membres et événements sur votre site",
+      "Possibilité de personnalisé votre template",
+    ],
+  },
+  {
+    title: "STATISTIQUE",
+    list: [
+      "Rapport d'activité complet en fonction de vos activités",
+      "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
+      "Export des données du logiciel pour une analyse complète",
+    ],
+  },
+  {
+    title: "RÉSEAU CMF ",
+    list: [
+      "Accès au répertoire du réseau",
+      "Renouvellement de votre adhésion fédérale",
+      "Gestion de l'assurance CMF",
+    ],
+  },
+  {
+    title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
+    list: [
+      "Sur votre site internet intégré",
+      "Sur l'agenda de la CMF",
+      "Sur l'Agenda culturel Opentalent ",
+    ],
+  },
+];
+</script>
 
 <style scoped>
-.list-details {
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 2.4rem;
+  color: white;
+  width: 35rem;
+}
+.list-detail {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 0.75rem;
-  line-height: 0.9rem;
-  margin-left: 1rem;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
   margin-bottom: 1rem;
-  color: #ffffff;
+  color: #000000;
+  width: 100%;
+}
+.card-title {
+  white-space: pre-wrap;
+}
+.carousel {
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
-.title-details {
+
+.card.active-card {
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+}
+.subtitle-avantage {
   font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-bottom: 0.7rem;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: white;
 }
-.icon-details {
-  font-size: 1.5rem;
-  margin-bottom: 0.9rem;
-  color: #fac20a;
+.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 {
-  font-size: 0.8rem;
-  margin-bottom: 2rem;
   color: #fac20a;
+  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 {
+  transform: scale(1.05);
+}
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid #fff;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 4rem;
 }
 
-.subtitle-fontionnalite {
+.carousel-button i {
+  color: #fff;
+}
+.reviewer-name {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  color: rgba(32, 147, 190);
+}
+
+.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;
-  margin-left: 1rem;
-  margin-top: -1rem;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
   margin-bottom: 1rem;
-  width: 12rem;
+  color: #071b1f;
+}
+
+.review-description {
+  text-align: left;
+}
+.card-footer {
+  /** coller à droite */
+  position: absolute;
+  right: 0;
+  margin-right: 2rem;
 }
 
-.title-fonctionnalite {
+.card-text {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 500;
-  font-size: 2rem;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  height: 12rem;
+}
+.reviews-title {
+  color: #fff;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
   margin-left: 1rem;
-  margin-top: -1rem;
-  width: 25rem;
-  margin-bottom: 2rem;
+  width: 10rem;
+}
+
+.card {
+  width: 80rem;
+  min-height: 35rem;
+  max-height: 35rem;
+  border-radius: 1rem;
+}
+
+.v-card {
+  border-radius: 1rem;
+  min-height: 20rem;
+  max-height: 20rem;
+  min-width: 20rem;
+  max-width: 20rem;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
 .container-green {
   background-color: #0e2d32;
-  padding: 5rem;
-  color: #eff9fb;
 }
 </style>

components/Logiciels/Artist/Accompagnement.vue → components/Logiciels/Artist/Formations.vue

@@ -1,7 +1,7 @@
 <template>
-  <div id="Accompagnement">
+  <div id="Formations">
     <LayoutContainer>
-      <div class="container-green">
+      <div class="container-green mt-12">
         <v-row>
           <div class="d-flex justify-center align-center mt-6">
             <v-icon
@@ -14,11 +14,11 @@
           </div>
         </v-row>
 
-        <v-row>
-          <v-col cols="3">
+        <v-row class="mt-12"> 
+          <v-col cols="4">
             <v-img
               src="/images/logiciels/school/reunion.jpg"
-              class="reunion-img"
+              class="reunion-img mb-12"
             />
           </v-col>
 
@@ -26,19 +26,19 @@
             <h3 class="formation-title">
               Webinaire de découverte - Nouveaux utilisateurs
             </h3>
-            <p class="formation-details">
+            <p class="formation-details mb-6">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <v-btn class="formation-btn">
+            <v-btn class="formation-btn mt-12">
               S’incrire à une session
             </v-btn>
           </v-col>
         </v-row>
       </div>
 
-      <v-row class="card-container">
+      <v-row class="card-container mb-12">
         <v-col
           cols="3"
           class="d-flex justify-center align-center small-padding"
@@ -59,7 +59,7 @@
             <h3 class="chiffre">
               XXX
             </h3>
-            <p>utilisateurs</p>
+            <p>structures</p>
           </div>
         </v-col>
 
@@ -69,9 +69,9 @@
         >
           <div class="card">
             <h3 class="chiffre">
-              XXX
+              13
             </h3>
-            <p>utilisateurs</p>
+            <p>années d'expérience</p>
           </div>
         </v-col>
       </v-row>
@@ -187,7 +187,8 @@
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
-  margin-bottom: 20px;
+  height: auto;
+  margin-bottom: 2rem;
   color: white;
 }
 

components/Logiciels/Artist/MenuScroll.vue

@@ -1,44 +1,88 @@
 <template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <v-row>
-        <v-col
-          cols="12"
-          class="menu-container"
+  <LayoutContainer>
+    <v-row >
+      <v-col
+        cols="12"
+        class="menu-container"
+        :class="{ 'sticky-menu': isSticky }"
+      >
+        <div
+          v-for="menu in menus"
+          :key="menu.label"
+          @click="navigate(menu)"
         >
-          <div
-            v-for="menu in menus"
-            :key="menu.label"
-            @click="navigate(menu)"
+          <v-chip
+            v-if="activeMenu === menu.label"
+            class="active-menu"
           >
-            <v-chip
-              v-if="activeMenu === menu.label"
-              class="active-menu"
-            >
-              {{
-                menu.label
-              }}
-            </v-chip>
-            <span v-else>{{ menu.label }}</span>
-          </div>
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
+            {{
+              menu.label
+            }}
+          </v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+
+const refs = reactive({
+  Presentation: null,
+  Avantages: null,
+  Fonctionnalites: null,
+  Comparatif: null,
+  Abonnement: null,
+  Formations: null,
+  Temoignages: null
+});
+
+const isSticky = ref(false);
+
+const handleScroll = () => {
+  const scrollPosition = window.scrollY;
+
+  if (scrollPosition > 800) { 
+    isSticky.value = true;
+  } else {
+    isSticky.value = false;
+  }
+
+  for (const key of Object.keys(refs)) {
+    const element = refs[key];
+    if (element) {
+      const top = element.offsetTop;
+      const bottom = top + element.offsetHeight;
+      if (scrollPosition >= top && scrollPosition < bottom) {
+        activeMenu.value = key;
+        break;
+      }
+    }
+  }
+};
+
+onMounted(() => {
+  Object.keys(refs).forEach(key => {
+    refs[key] = document.getElementById(key);
+  });
+
+  window.addEventListener('scroll', handleScroll);
+});
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+});
 
 const menus = [
   { label: "Presentation" },
   { label: "Avantages" },
-  { label: "Fonctionnalites" },
+  { label: "Fonctionnalites"},
   { label: "Comparatif" },
-  { label: "Contact" },
-  { label: "Accompagnement" },
+  { label: "Abonnement" },
+  { label: "Formations" },
   { label: "Temoignages" },
-  { label: "Aide" },
 ];
 
 const activeMenu = ref(menus[0].label);
@@ -53,15 +97,24 @@ const navigate = (menu) => {
 </script>
 
 <style scoped>
+
+.sticky-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
 .menu-container {
+  z-index: 1;
   display: flex;
   justify-content: space-around;
-  padding: 1rem 10rem;
   background: white;
-  color: #bbb8b8;
+  color: #071b1f;
   font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 1rem;
+  line-height: 19px;
   display: flex;
   align-items: center;
   text-align: center;

components/Logiciels/Artist/Outil.vue

@@ -1,327 +0,0 @@
-<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-col cols="3">
-          <div class="container-square">
-            <v-row>
-              <div class="yellow-square">
-                <v-icon class="fa-regular fa-comments icon" />
-                <p class="text-square">
-                  Nous contacter
-                </p>
-              </div>
-            </v-row>
-
-            <v-row>
-              <div class="yellow-square">
-                <v-icon class="fa-regular fa-circle-info icon" />
-                <p class="text-square">
-                  Demander une demo
-                </p>
-              </div>
-            </v-row>
-          </div>
-        </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>
-</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;
-}
-
-.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;
-}
-
-.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 {
-  align-items: center;
-  font-family: "Barlow";
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-left: 5rem;
-  margin-right: 5rem;
-}
-
-.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/Artist/Presentation.vue

@@ -0,0 +1,621 @@
+<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>
+  </div>
+</template>
+
+<script setup></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;
+}
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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>
+</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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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/Artist/Projet.vue

@@ -1,227 +0,0 @@
-<template>
-  <div id="Contact">
-    <LayoutContainer>
-      <v-row>
-        <v-col cols="3">
-          <div class="d-flex justify-center align-center">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h5 class="subtitle-abo">
-              S'abonner dès maintenant
-            </h5>
-          </div>
-        </v-col>
-
-        <v-col cols="0">
-          <h5 class="subtitle">
-            Opentalent Artist, la solution que vous attendiez...
-          </h5>
-          <p>
-            Que vous soyez une petite ou une structure plus conséquente, notre
-            offre s'adapte à toutes les tailles : le prix de l’abonnement au
-            logiciel varie en fonction du nombre d'élèves, tout en conservant
-            l'intégralité des fonctionnalités.
-          </p>
-          <h3>
-            Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
-          </h3>
-        </v-col>
-      </v-row>
-
-      <v-row class="border-row">
-        <v-col cols="2">
-          <v-img
-            class="logo-cmf"
-            src="/images/logiciels/school/cmf_logo_orange.png"
-          />
-        </v-col>
-        <v-col cols="10">
-          <div class="cmf-container">
-            <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
-            <p>
-              Si votre établissement d’enseignement artistique est adhérent à la
-              Confédération Musicale de France (CMF), vous bénéficiez
-              gratuitement, dans le cadre de votre adhésion, de la version
-              Opentalent Artist standard et de conditions priviliégiés pour la
-              version Opentalent School. Contactez nous direcetement ou
-              contactez votre fédération pour obtenir vos codes d’accès.
-            </p>
-          </div>
-        </v-col>
-      </v-row>
-
-      <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>
-
-<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;
-  margin-right: 28rem;
-  margin-bottom: 3rem;
-}
-.cmf-container {
-  margin-left: 3rem;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-  width: 30rem;
-}
-
-.logo-cmf {
-  width: 10rem;
-  height: 10rem;
-  margin-top: 3rem;
-  margin-bottom: 4rem;
-  margin-left: 3rem;
-}
-
-.project-container {
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-}
-
-.btn-contact {
-  background: #f4aa2a;
-  border-radius: 6px;
-  color: #fff;
-
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-top: 2rem;
-  margin-bottom: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-}
-
-.contact-details {
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  color: #091d20;
-  width: 20rem;
-  font-family: "Barlow";
-  font-style: normal;
-}
-.contact {
-  margin-bottom: 0.5rem;
-}
-
-.icon-title {
-  margin-right: 1rem;
-  color: #fac20a;
-}
-.title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-style: normal;
-}
-.subtitle-abo {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.9rem;
-}
-.subtitle {
-  font-weight: 400;
-  font-size: 34px;
-  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;
-}
-</style>

components/Logiciels/Artist/Reviews.vue

@@ -142,7 +142,7 @@ const cards = [
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
-  color: #e34461;
+  color: #f9d648;
 }
 
 .reviewer-status {

components/Logiciels/School/Avantages.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Avantages">
     <LayoutContainer>
-      <v-row>
+      <v-row class="mt-12">
         <div class="d-flex justify-center align-center mt-2">
           <v-icon
             size="6"
@@ -148,15 +148,15 @@
 }
 
 .subtitle-avantage {
-  color: #071B1F;
-font-family: Barlow;
-margin-left: 1rem;
-font-size: 1rem;
-font-style: normal;
-font-weight: 600;
-line-height: 15px; 
-letter-spacing: 1.8px;
-text-transform: uppercase;
+  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 {

components/Logiciels/School/Banner.vue

@@ -14,7 +14,7 @@
           :imageSrc="'/images/solutions/school.jpg'"
           imageAlt="'line'"
           :squareText="'École de musique, d\'art, de danse, de cirque, conservatoireset MJC'"
-          :logoSrc="'/images/logo_school_white.png'"
+          :logoSrc="'/images/logo/logiciels/School-Blanc.png'"
         />
       </v-col>
     </v-row>

components/Logiciels/School/Premium.vue → components/Logiciels/School/Comparatif.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Comparatif">
     <LayoutContainer>
-      <v-row>
+      <v-row class="mt-12">
         <div class="d-flex justify-center align-center">
           <v-icon
             size="6"
@@ -64,13 +64,12 @@
       <td class="table-data-second">
         <v-icon
           v-if="row.column2 === 'check'"
-          size="15"
+          size="18"
           class="far fa-check-circle"
-          color="green"
         />
         <v-icon
           v-else-if="row.column2 === 'cross'"
-          size="15"
+          size="18"
           class="far fa-times-circle"
           color="red"
         />
@@ -79,13 +78,12 @@
       <td class="table-data-second">
         <v-icon
           v-if="row.column3 === 'check'"
-          size="15"
+          size="18"
           class="far fa-check-circle"
-          color="green"
         />
         <v-icon
           v-else-if="row.column3 === 'cross'"
-          size="15"
+          size="18"
           class="far fa-times-circle"
           color="red"
         />

components/Logiciels/School/Fonctionnalites.vue

@@ -1,268 +1,30 @@
-<!-- <template>
-  <div id="Fonctionnalites">
-    <LayoutContainer>
-      <div class="container-green">
-        <v-row>
-          <div class="d-flex justify-center align-center">
-            <v-icon size="10" class="fa-solid fa-circle icon-title" />
-            <h4 class="subtitle-fontionnalite">
-              Découvrez toutes les fonctionnalités de notre solution
-            </h4>
-          </div>
-        </v-row>
-
-        <v-row>
-          <h2 class="title-fonctionnalite">
-            Des fonctionnalités adaptées à vos besoins
-          </h2>
-        </v-row>
-
-        <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">ESPACES DÉDIÉS :</h6>
-              <ul class="list-details">
-                <li class="li-details">Administration</li>
-                <li class="li-details">Professeurs</li>
-                <li class="li-details">Élèves/Familles</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">RÉPERTOIRE</h6>
-              <ul class="list-details">
-                <li class="li-details">Élèves et responsable légaux</li>
-                <li class="li-details">Personnel administratif et professeurs</li>
-                <li class="li-details">Contacts extérieurs, partenaires & donateurs</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">PRÉINSCRIPTION EN LIGNE</h6>
-              <ul class="list-details">
-                <li class="li-details">Parametrage personnalisé des formulaires & mails automatiques</li>
-                <li class="li-details">Gestion des réinscriptions et des nouvelles inscriptions</li>
-                <li class="li-details">Gestion des quotas et du suivi des préinscription en ligne</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">AGENDA :</h6>
-              <ul class="list-details">
-                <li class="li-details">Création et gestion des cours, examens, événements et prestations pédagogiques</li>
-                <li class="li-details">Planning interactif avec un contrôle de cohérence</li>
-                <li class="li-details">Gestion des présences et absences</li>
-              </ul>
-            </div>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">PARC MATÉRIEL :  </h6>
-              <ul class="list-details">
-                <li class="li-details">Gestion de votre parc matériel (instruments, costumes, accessoires..)</li>
-                <li class="li-details">Locations et prêts de matériel</li>
-                <li class="li-details">Planification de la maintenance et entretien de matériel</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">SUIVI PÉDAGOGIQUE : </h6>
-              <ul class="list-details">
-                <li class="li-details">Gestion du cursus pédagogique (critères personnalisables)</li>
-                <li class="li-details">Création des examens et envoi des convocations</li>
-                <li class="li-details">Édition des bulletins de notes</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">FACTURATION :</h6>
-              <ul class="list-details">
-                <li class="li-details">Facturation automatisée selon différents critères </li>
-                <li class="li-details">Suivi des règlements et gestion des relances</li>
-                <li class="li-details">En options : de nombreux moyens de paiement</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">COMMUNICATION :</h6>
-              <ul class="list-details">
-                <li class="li-details">Édition et envoi de courriers, de mails ou de SMS*(*en option)</li>
-                <li class="li-details">Création de modèles de courriers, mails ou SMS</li>
-                <li class="li-details">Outil de publipostage intégré pour un envoi personnalisé</li>
-              </ul>
-            </div>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">SITE INTERNET : </h6>
-              <ul class="list-details">
-                <li class="li-details">Gestion intégrée au logiciel</li>
-                <li class="li-details">Mise à jour automatique des membres et événements sur votre site</li>
-                <li class="li-details">Possibilité de personnalisé votre template</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">STATISTIQUE : </h6>
-              <ul class="list-details">
-                <li class="li-details">Rapport d'activité complet en fonction de vos activités</li>
-                <li class="li-details">Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement</li>
-                <li class="li-details">Export des données du logiciel pour une analyse complète</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">RÉSEAU CMF : </h6>
-              <ul class="list-details">
-                <li class="li-details">Accès au répertoire du réseau</li>
-                <li class="li-details">Renouvellement de votre adhésion fédérale</li>
-                <li class="li-details">Gestion de l'assurance CMF</li>
-              </ul>
-            </div>
-          </v-col>
-
-          <v-col cols="3">
-            <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS :  </h6>
-              <ul class="list-details">
-                <li class="li-details">Sur votre site internet intégré</li>
-                <li class="li-details">Sur l'agenda de la CMF</li>
-                <li class="li-details">Sur l'Agenda culturel Opentalent </li>
-              </ul>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-
-.li-details{
-  margin-bottom: 0.5rem;
-  line-height: 1.5rem;
-}
-.list-details {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-  margin-left: 1rem;
-  margin-bottom: 1rem;
-  color: #ffffff;
-  width: 14rem;
-}
-.title-details {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.5rem;
-  margin-bottom: 0.7rem;
-  width: 15rem;
-  text-transform: uppercase;
-}
-.icon-details {
-  font-size: 1.5rem;
-  margin-bottom: 0.9rem;
-  color: #c1eff0;
-}
-
-.icon-title {
-  font-size: 0.8rem;
-  margin-bottom: 2rem;
-  color: #c1eff0;
-}
-
-.subtitle-fontionnalite {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  font-family: "Barlow";
-  margin-left: 1rem;
-  margin-top: -1rem;
-  margin-bottom: 1rem;
-  width: 22rem;
-}
-
-.title-fonctionnalite {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  font-style: normal;
-  font-size: 2rem;
-  line-height: 1.9rem;
-  margin-left: 1rem;
-  margin-top: -1rem;
-  width: 25rem;
-  margin-bottom: 2rem;
-  margin-top: 1rem;
-}
-
-.container-green {
-  background-color: #0e2d32;
-  padding: 4rem;
-  color: #eff9fb;
-}
-</style> -->
-
 <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 mt-6 ml-3">
+            Des fonctionnalités adaptées à vos besoins
+          </h4>
+        </div>
         <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="previousAction">
-                <i class="fas fa-chevron-left" />
-              </div>
-              <div class="carousel-button" @click="nextAction">
-                <i class="fas fa-chevron-right" />
-              </div>
+            <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">
@@ -271,8 +33,6 @@
               :items-to-show="5"
               :items-to-scroll="1"
               class="carousel"
-              :center-mode="true"
-              :center-on-init="true"
             >
               <Slide
                 v-for="(card, index) in cards"
@@ -305,7 +65,7 @@
                           {{ card.status }}
                         </p> -->
                         <p class="reviewer-structure">
-                          {{ card.option  }}
+                          {{ card.option }}
                         </p>
                       </div>
                     </v-card-item>
@@ -325,24 +85,23 @@ 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();
-    functionCarousel.value.goTo(activeCardIndex.value); 
   }
 };
 
 const nextAction = () => {
   const newIndex = activeCardIndex.value + 1;
   if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex;
+    activeCardIndex.value = newIndex; 
     functionCarousel.value.next();
-    functionCarousel.value.goTo(activeCardIndex.value); 
   }
 };
 
@@ -406,7 +165,7 @@ const cards = [
       "Création de modèles de courriers, mails ou SMS",
       "Outil de publipostage intégré pour un envoi personnalisé",
     ],
-    option : "* en option"
+    option: "* en option",
   },
   {
     title: "SITE INTERNET ",
@@ -444,6 +203,15 @@ const cards = [
 </script>
 
 <style scoped>
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 2.4rem;
+  color: white;
+  width: 35rem;
+}
 .list-detail {
   font-family: "Barlow";
   font-style: normal;
@@ -465,17 +233,44 @@ 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; 
+  transition: transform 0.3s;
   min-width: 20%;
   max-width: 20%;
 }
 
 .card.active-card {
-  transform: scale(1.15); 
+  transform: scale(1.05);
 }
 .carousel-button {
   display: flex;
@@ -487,7 +282,7 @@ const cards = [
   border: 2px solid #fff;
   cursor: pointer;
   margin-right: 1rem;
-  margin-top: 4rem;
+  margin-top: 1rem;
 }
 
 .carousel-button i {
@@ -532,7 +327,7 @@ const cards = [
 }
 .card-footer {
   /** coller à droite */
-  position: absolute;  
+  position: absolute;
   right: 0;
   margin-right: 2rem;
 }
@@ -546,18 +341,16 @@ const cards = [
   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 {

components/Logiciels/School/Accompagnement.vue → components/Logiciels/School/Formations.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="formations">
     <LayoutContainer>
-      <div class="container-green">
+      <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" />

components/Logiciels/School/MenuScroll.vue

@@ -51,7 +51,6 @@ const handleScroll = () => {
     isSticky.value = false;
   }
 
-  // Mettez à jour le menu actif en fonction de la position du défilement
   for (const key of Object.keys(refs)) {
     const element = refs[key];
     if (element) {
@@ -117,7 +116,7 @@ const navigate = (menu) => {
   display: flex;
   justify-content: space-around;
   background: white;
-  color: #bbb8b8;
+  color: #071b1f;
   font-family: "Barlow";
   font-size: 1rem;
   line-height: 19px;

components/Logiciels/School/Outil.vue → components/Logiciels/School/Presentation.vue

@@ -266,9 +266,10 @@
   line-height: 40px;
   color: #ffffff;
   font-style: italic;
-  margin-top: 20rem;
+  margin-top: 27rem;
   margin-left: 2rem;
 }
+
 .subtitle-logiciel {
   display: flex;
   align-items: center;
@@ -289,7 +290,7 @@
 .container-green {
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
-  height: 45rem;
+  height: 40rem;
 }
 
 .picto-container {

pages/opentalent_artist.vue

@@ -2,18 +2,72 @@
   <LayoutNavigation />
   <LogicielsArtistBanner />
   <LogicielsArtistMenuScroll />
-  <LogicielsArtistOutil />
+
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+    </div>
+  <LogicielsArtistPresentation/>
   <LogicielsArtistAvantages />
   <LogicielsArtistFonctionnalites />
-  <LogicielsArtistPremium />
-  <LogicielsArtistProjet />
-  <LogicielsArtistAccompagnement />
+  <LogicielsArtistComparatif />
+  <LogicielsArtistAbonnement/>
+  <LogicielsArtistFormations />
   <LogicielsArtistReviews />
-  <LayoutFAQ />
+  <LayoutFAQ id="layout-footer"/>
   <LayoutUISolutionsFooter id="layout-footer" />
-  <LayoutFooter />
+  <LayoutFooter id="layout-footer"/>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+
+const shouldShowStickyMenu = ref(true);
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "yellow-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+  },
+  {
+    id: 2,
+    bgColor: "yellow-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+  }
+];
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;
+  right: 0;
+  margin-bottom: -25rem;
+  margin-left: 13rem;
+}
+</style>
 
-<style scoped></style>

pages/opentalent_school.vue

@@ -1,19 +1,20 @@
 <template>
   <LayoutNavigation />
   <LogicielsSchoolBanner />
+  <LogicielsSchoolMenuScroll class="sticky-scroll" />
+
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <LogicielsSchoolMenuScroll class="sticky-scroll" />
     <LayoutUIStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
   </div>
-  <LogicielsSchoolOutil />
+  <LogicielsSchoolPresentation />
   <LogicielsSchoolAvantages />
   <LogicielsSchoolFonctionnalites />
-  <LogicielsSchoolPremium />
+  <LogicielsSchoolComparatif />
   <LogicielsSchoolProjet />
-  <LogicielsSchoolAccompagnement />
+  <LogicielsSchoolFormations />
   <LogicielsSchoolReviews />
   <LayoutFAQ id="layout-footer" />
   <LayoutUISolutionsFooter id="layout-footer" />