logiciel pages manager artist school

components/Home/EventAgenda.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer :overflow="false">
       <h2 class="title">
         Retrouvez tous vos évènements dans l'agenda et référencez vous dans
         l'annuaire
@@ -78,7 +78,7 @@
   height: 3rem;
   font-family: "Barlow";
   font-style: normal;
-  margin-left:10rem;
+  margin-left:19rem;
   margin-top:2rem;
 }
 .title {
@@ -115,6 +115,6 @@
   width: 30rem;
   height: 30rem;
   margin-bottom: -7rem;
-  border-radius: èrem;
+  border-radius: 2rem;
 }
 </style>

components/Home/Solution.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer :overflow="false">
     <p class="text-center solution-subtitle">3 solutions</p>
     <h3 class="text-center title">
       Trouvez la solution <br />
@@ -326,4 +326,5 @@
   height: 30rem;
   position: relative;
 }
+
 </style>

components/Layout/Caroussel.vue

@@ -9,8 +9,6 @@
       :hide-delimiter-background="true"
       :show-delimiters="false"
       :touch="true"
-      cycle
-      :interval="3000"
     >
       <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
@@ -71,7 +69,7 @@
 import { useDisplay } from "vuetify";
 const {lgAndUp } = useDisplay();
 
-let activeIndex = ref(0); // initialise avec le premier item affiché
+let activeIndex = ref(0); 
 
 const changeSlide = (index) => {
   activeIndex.value = index;

components/Layout/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="container">
+  <v-container class="container" :style="overflow ? 'overflow: hidden;' : ''">
     <v-row justify="center" align="center">
       <v-col cols="12" sm="12" md="12">
         <slot />
@@ -8,9 +8,22 @@
   </v-container>
 </template>
 
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  overflow: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const overflow = ref(props.overflow);
+</script>
+
 <style scoped>
-.container{
+.container {
   max-width: 1800px;
+  padding: 20px;
 }
-
-</style>
+</style>

components/Layout/Navigation.vue

@@ -1,7 +1,6 @@
 <template>
   <LayoutContainer>
     <v-row class="menu-bar custom-row">
-      <!-- Column for the logo -->
       <v-col cols="6" sm="4" md="2">
         <v-img
           class="logo"
@@ -11,54 +10,57 @@
         ></v-img>
       </v-col>
 
-      <!-- Column for the categories -->
       <v-col cols="12" sm="7" md="5">
-        <nuxt-link class="menu-link" to="/about">A propos</nuxt-link>
-        <nuxt-link class="menu-link" to="/software">Nos logiciels</nuxt-link>
-        <nuxt-link class="menu-link" to="/directory">Annuaire</nuxt-link>
-        <nuxt-link class="menu-link" to="/news">Actualités</nuxt-link>
+        <nuxt-link class="common-styles menu-link" to="/about">A propos</nuxt-link>
+        <nuxt-link class="common-styles menu-link" to="/software">Nos logiciels</nuxt-link>
+        <nuxt-link class="common-styles menu-link" to="/directory">Annuaire</nuxt-link>
+        <nuxt-link class="common-styles menu-link" to="/news">Actualités</nuxt-link>
       </v-col>
 
-      <!-- Column for the buttons -->
       <v-col cols="12" sm="12" md="5" class="buttons-col">
-        <v-btn class="btn btn-login" text>
+        <v-btn class="btn btn-common common-styles btn-login" text>
           <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
         </v-btn>
-        <v-btn class="btn btn-subscribe ml-4" text>
+        <v-btn class="btn btn-common common-styles btn-subscribe ml-4" text>
           <v-icon left class="fas fa-bell mr-4"></v-icon>Vous abonner
         </v-btn>
 
         <div class="vertical-bar"></div>
 
-        <nuxt-link to="/contact" class="btn-contact">
-          <v-icon class="fas fa-comment-dots mr-2"></v-icon> Nous contacter
+        <nuxt-link class="common-styles btn-contact" to="/contact">
+          <v-icon class="fas fa-comment-dots mr-2"></v-icon>Nous contacter
         </nuxt-link>
       </v-col>
     </v-row>
   </LayoutContainer>
 </template>
 
+
 <script></script>
 
 <style scoped>
+.logo {
+  height: 3rem;
+}
 .custom-row {
-  padding: 0 10px; /* Réduisez cette valeur */
+  padding: 0 10px;
 }
 
-body,
-.btn,
-.btn-contact,
-.menu-link {
+.common-styles {
   font-family: "Barlow";
   font-style: normal;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 15px;
 }
 
 .vertical-bar {
   width: 0px;
-  height: 43.07px;
+  height: 3rem;
   border: 0.5px solid rgba(14, 45, 50, 0.4);
   margin-left: 10px;
   margin-right: 10px;
+  margin-top: 0.2rem;
 }
 
 .buttons-col {
@@ -87,33 +89,29 @@ body,
   margin-right: 4px;
 }
 
-.btn {
+.btn-common {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 25px;
   font-weight: 700;
-  font-size: 10px;
+  font-size: 0.7rem;
   line-height: 15px;
+  border-radius: 6px;
 }
 
 .btn-login {
   background: #091d20;
-  border-radius: 6px;
   color: white;
 }
 
 .btn-subscribe {
   background: #9edbdd;
-  border-radius: 6px;
 }
 
 .btn-contact {
   width: 196px;
   height: 15px;
-  font-weight: 700;
-  font-size: 10px;
-  line-height: 15px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: #0e2d32;

components/Logiciels/Artist/Accompagnement.vue

@@ -0,0 +1,108 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row>
+        <h6>Accompagnement</h6>
+      </v-row>
+
+      <v-row>
+        <v-col cols="3">
+          <v-img
+            src="/images/logiciels/school/reunion.jpg"
+            class="reunion-img"
+          ></v-img>
+        </v-col>
+
+        <v-col cols="6">
+          <h3>Formation prise en main du logiciel - En ligne</h3>
+          <p>
+            Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux
+            et que vous n’avez pas de temps à perdre,... Lors de votre
+            souscription, nous vous invitons à choisir des dates de formation
+            qui se déroulera sous 2 jours non consécutifs. En effet, ce sont des
+            journées riches d’informations et nous mettons un point d’honneur à
+            vous laisser digérer cette première journée, vous familiariser
+            davantage avec vos nouvelles connaissances avant de passer à la
+            seconde. Destinée aux nouveaux utilisateurs, elle est obligatoire
+            lors de l'acquisition du logiciel. Elle est également utile lors
+            d'un changement de personnel dans la structure.
+          </p>
+
+          <v-btn>S’incrire à une formation</v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-row class="card-container">
+  <v-col cols="3" class="d-flex justify-center align-center small-padding">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+</v-row>
+
+
+    <v-row>
+      <!-- Caroussel-->
+      <v-carousel>
+        <v-carousel-item
+          v-for="(item, i) in items"
+          :key="i"
+          :src="item.src"
+          reverse-transition="fade-transition"
+          transition="fade-transition"
+        ></v-carousel-item>
+      </v-carousel>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+
+.container-green {
+  background-color: #0e2d32;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: white;
+}
+
+.card-container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20rem;
+  margin-right:20rem;
+}
+.card {
+  background: #C3E5E7;
+  border-radius: 10px;
+  padding-left: 5rem; 
+  padding-right: 5rem;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+</style>

components/Logiciels/Artist/Agenda.vue

@@ -0,0 +1,55 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h3>L'agenda Opentalent</h3>
+      </v-col>
+
+      <v-col cols="4"> </v-col>
+
+      <v-col cols="4">
+        <v-btn>Tous les évèvenements</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <!-- slide card-->
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+      
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

components/Logiciels/Artist/Avantages.vue

@@ -0,0 +1,50 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <h5>Découvrez les avanatges de la solution</h5>
+    </v-row>
+    <v-row>
+      <h3>Des avantages concrets</h3>
+    </v-row>
+
+    <v-row>
+      <v-col cols="4">
+        <h4>Un gain de temps</h4>
+        <span>01</span>
+
+        <hr />
+
+        Centralisez toutes vos informations sur un seul et même outil et ne
+        perdez plus de temps avec des fichiers sur diverses applications.
+      </v-col>
+      <v-col cols="4">
+        <h4>Une activité structurée</h4>
+        <span>02</span>
+
+        <hr />
+
+        Des espaces dédiés et des outils spécifiques à vos besoins pour une
+        gestion optimisée et une lecture simplifiée.
+        <p><v-chip>Membre cmf</v-chip></p>
+        <v-img
+        src="/images/logiciels/school/screen3.png"
+        ></v-img>
+      </v-col>
+      <v-col cols="4">
+        <h4>Une gestion collaborative</h4>
+        <span>03</span>
+
+        <hr />
+
+        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.
+      </v-col>
+    </v-row>
+
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

components/Logiciels/Artist/Banner.vue

@@ -0,0 +1,217 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <div class="container-title">
+        <v-col cols="4" class="text-left">
+          <h1>Artist</h1>
+        </v-col>
+        <v-col cols="4" class="logiciel">
+          <h1>Opentalent School</h1>
+        </v-col>
+        <v-col cols="4" class="text-right">
+          <h1>Manager</h1>
+        </v-col>
+      </div>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <div class="banner-container">
+          <img
+            src="/images/solutions/school.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"></v-icon>
+                <p class="description-square">
+                  École de musique, d'art, de danse, de cirque, conservatoires
+                  et MJC
+                </p>
+              </div>
+            </v-row>
+          </div>
+
+          <div class="blue-square">
+            <img
+              src="/images/logo_school_white.png"
+              alt="Logo"
+              class="logo-image"
+            />
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const state = ref({
+  activeMenu: "Présentation",
+})
+
+const menus = [
+  { label: 'Présentation' },
+  { label: 'Avantages' },
+  { label: 'Fonctionnalités' },
+  { label: 'Comparatif' },
+  { label: 'Contact' },
+  { label: 'Accompagnement' },
+  { label: 'Témoignages' },
+  { label: 'Aide' }
+]
+</script>
+
+<style scoped>
+.container-title {
+  display: flex;
+  justify-content: space-around;
+  font-family: "Barlow";
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.text-left {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  color: #000000;
+  opacity: 0.1;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+
+.logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
+}
+
+.text-right {
+  margin-top: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  text-align: right;
+  opacity: 0.1;
+  margin-right: 5rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.black-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0;
+  width: 13rem;
+  height: 10rem;
+  background-color: black;
+  background: #9edbdd;
+}
+
+.blue-square {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 12rem;
+  width: 13rem;
+  height: 10rem;
+  background: #0e2d32;
+}
+
+.description-square {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  color: #091d20;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-bottom: 1rem;
+}
+
+.content-row {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.icon {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.logo-image {
+  width: 90%;
+  height: auto;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 25rem;
+  object-fit: cover;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/Logiciels/Artist/FAQ.vue

@@ -0,0 +1,52 @@
+<template>
+  <LayoutContainer>
+    <div class="container-img">
+      <v-row>
+        <h5>Vous voulez tirer le meilleur de notre logiciel ?</h5>
+      </v-row>
+
+      <v-row>
+        <v-col cols="6">
+          <h3>
+            Quelle que soit votre demande, notre équipe est à vos côtés pour
+            vous guider
+          </h3>
+
+          <v-btn>
+            Consulter notre FAQ
+          </v-btn>
+        </v-col>
+
+      
+        <v-col cols="6">
+          <v-btn>
+            De nombreux articles tutoriels accessibles 24h/24
+          </v-btn>
+
+          <v-btn>
+            Support accessible du lundi au vendredi via l’outil en ligne 
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+/** container image : image cover */
+.container-img {
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -0,0 +1,102 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+    <v-row>
+      <h4>Découvrez toutes les foncitonnalités de notre solution</h4>
+    </v-row>
+
+    <v-row>
+      <h2>Des fonctionnalités adaptées à vos besoins</h2>
+    </v-row>
+
+    <v-row>
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+    </v-row>
+  </div>
+  </LayoutContainer>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+.container-green {
+  background-color: #0E2D32;
+  padding: 5rem;
+  color: #EFF9FB;
+}
+</style>

components/Logiciels/Artist/Outil.vue

@@ -0,0 +1,245 @@
+<template>
+  <LayoutContainer>
+    <v-row class="outil-row">
+      <v-col cols="4">
+        <div class="title">
+
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        <h4 >Présentation d'opentalent school</h4>
+        </div>
+        <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
+        </v-img>
+      </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="blue-square">
+            <v-icon class="fa-regular fa-comments icon"></v-icon>
+            <p class="text-square">Nous contacter</p>
+          </div>
+        </v-row>
+
+        <v-row>
+          <div class="blue-square">
+            <v-icon class="fa-regular fa-circle-info icon"></v-icon>
+            <p class="text-square">Demander une demo </p>
+          </div>
+        </v-row>
+
+        <v-row>
+          <div class="blue-square">
+            <v-icon class="fa-brands fa-readme icon"></v-icon>
+            <p class="text-square">Brochure</p>
+          </div>
+        </v-row>
+
+        <v-row>
+          <div class="darkblue-square">
+            <v-icon class="fa-solid fa-phone icon"></v-icon>
+            <p class="text-square">Nous Appeler</p>
+          </div>
+        </v-row>
+        </div>
+
+      </v-col>
+      <v-row>
+        <v-col cols="4"> </v-col>
+
+        <v-col cols="5">
+          <div class="title-picto-container">
+            <h2>Des caractéristiques uniques & dédiées</h2>
+            <div class="picto-container">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto1.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto2.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto3.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto4.png"
+              ></v-img>
+            </div>
+          </div>
+        </v-col>
+
+        <v-col cols="2"> </v-col>
+      </v-row>
+    </v-row>
+
+    <v-row class="container-green">
+      <v-row>
+        <v-col cols="6" class="citation-school"> “ Pour les petits comme pour les grands établissements d’enseignement artistique.“</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-img>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.icon-title{
+  color: blue;
+}
+
+.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-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 0.7rem;
+line-height: 15px;
+text-align: center;
+letter-spacing: 0.20em;
+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;
+}
+
+.citation-school {
+  font-family: 'Barlow';
+font-style: italic;
+font-weight: 300;
+font-size: 2rem;
+width: 3rem;
+line-height: 40px;
+  color: #ffffff;
+  font-style: italic;
+  margin-top: 20rem;
+  margin-left: 5rem;
+}
+.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;
+  justify-content: flex-start;
+  padding: 0 2rem;
+}
+
+.picto-img {
+  right: 5rem;
+  height: 10rem;
+  margin-bottom: 3rem;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-left: 5rem;
+  margin-right: 15rem;
+}
+
+.screen-img {
+  width: 20rem;
+  height: 15rem;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+.outil-row {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+.darkblue-square {
+  width: 9rem;
+  height: 7rem;
+  background: #0e2d32;
+  margin-left: 15rem;
+
+}
+.blue-square {
+  margin-left: 15rem;
+  width: 9rem;
+  height: 7rem;
+  background: rgba(32, 147, 190, 0.6);
+}
+</style>

components/Logiciels/Artist/Premium.vue

@@ -0,0 +1,160 @@
+<template>
+  <LayoutContainer>
+    <h6 class="subtitle">Comparatif de nos solutions</h6>
+    <h3 class="title">Et si vous passiez à la version Premium</h3>
+    <table class="table-comparatif">
+      <thead>
+        <tr>
+          <th class="thead"></th>
+          <th class="thead"></th>
+          <th class="thead">
+            <p>Standard</p>
+            <p>A partir de 44,10 ttc /mois</p>
+          </th>
+          <th class="thead">
+            <p>Premium</p>
+            <p>A partir de 60,20 ttc /mois</p>
+          </th>        </tr>
+      </thead>
+      <tbody class="table-body">
+        <tr v-for="row in tableData" :key="row.id" class="table-row">
+          <td class="table-data">{{ row.column1 }}</td>
+          <td>{{ row.column2 }}</td>
+          <td>{{ row.column3 }}</td>
+          <td>{{ row.column4 }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </LayoutContainer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          column1: "Donnée 1",
+          column2: "Donnée 2",
+          column3: "Donnée 3",
+          column4: "Donnée 4",
+        },
+        {
+          id: 2,
+          column1: "Donnée 5",
+          column2: "Donnée 6",
+          column3: "Donnée 7",
+          column4: "Donnée 8",
+        },
+        {
+          id: 3,
+          column1: "Donnée 9",
+          column2: "Donnée 10",
+          column3: "Donnée 11",
+          column4: "Donnée 12",
+        },
+        {
+          id: 4,
+          column1: "Donnée 13",
+          column2: "Donnée 14",
+          column3: "Donnée 15",
+          column4: "Donnée 16",
+        },
+        {
+          id: 5,
+          column1: "Donnée 17",
+          column2: "Donnée 18",
+          column3: "Donnée 19",
+          column4: "Donnée 20",
+        },
+        {
+          id: 6,
+          column1: "Donnée 21",
+          column2: "Donnée 22",
+          column3: "Donnée 23",
+          column4: "Donnée 24",
+        },
+        {
+          id: 7,
+          column1: "Donnée 25",
+          column2: "Donnée 26",
+          column3: "Donnée 27",
+          column4: "Donnée 28",
+        },
+        {
+          id: 8,
+          column1: "Donnée 29",
+          column2: "Donnée 30",
+          column3: "Donnée 31",
+          column4: "Donnée 32",
+        },
+        {
+          id: 9,
+          column1: "Donnée 33",
+          column2: "Donnée 34",
+          column3: "Donnée 35",
+          column4: "Donnée 36",
+        },
+        {
+          id: 10,
+          column1: "Donnée 37",
+          column2: "Donnée 38",
+          column3: "Donnée 39",
+          column4: "Donnée 40",
+        },
+        {
+          id: 11,
+          column1: "Donnée 41",
+          column2: "Donnée 42",
+          column3: "Donnée 43",
+          column4: "Donnée 44",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+.subtitle {
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.title{
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.thead {
+  background-color: #fff;
+  height: 8rem;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 400;
+font-size: 30px;
+line-height: 34px;
+}
+.table-comparatif {
+  width: 74rem;
+  margin-top: 1rem;
+  margin-left: 15rem;
+  margin-right: 5rem;
+  border: none;
+  border-collapse: collapse;
+}
+.table-row{
+  background-color: white;
+  text-align: center;
+  height: 3rem;
+}
+
+.table-body .table-row:nth-child(even) {
+  background-color: rgba(32, 147, 190, 0.2);
+}
+
+</style>

components/Logiciels/Artist/Projet.vue

@@ -0,0 +1,85 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h5>Contactez-nous</h5>
+        <v-img
+          src="/images/logiciels/school/femme-casque.jpg"
+          class="femme-casque"
+        >
+        </v-img>
+      </v-col>
+      <v-col cols="8">
+        <h5>Vous avez un projet ?</h5>
+        <h6>N'attendez plus, appelez-nous</h6>
+        <p>
+          Vous avez une identité, des besoins, des projets... On est là pour
+          vous écouter et vous offrir une offre personnalisée ! Que vous soyez
+          une petite ou une structure plus conséquente, notre offre s'adapte à
+          toutes les tailles : le prix de l’abonnement au logiciel varie en
+          fonction du nombre d'élèves, tout en conservant l'intégralité des
+          fonctionnalités.
+        </p>
+
+        <v-btn> Nous contacter</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="2">
+        <v-img src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
+      </v-col>
+      <v-col cols="10">
+        <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>
+      </v-col>
+    </v-row>
+
+    <v-row >
+      <v-col cols="4" class="border" >
+        <div class="d-flex justify-center align-center ">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.border{
+  border-top: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+  border-right: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+}
+
+.icon{
+  font-size: 3rem;
+  color: #0E2D32;
+}
+.femme-casque {
+  width: 20rem;
+}
+</style>

components/Logiciels/Artist/Reviews.vue

@@ -0,0 +1,57 @@
+<template>
+<LayoutContainer>
+  <v-row>
+    <v-col cols="4">
+      <h3>C'est eux qui en parlent le mieux</h3>
+    </v-col>
+
+    <v-col cols="8">
+      <!-- slide card-->
+
+  <v-sheet
+    class="mx-auto"
+    elevation="8"
+    max-width="800"
+  >
+    <v-slide-group
+      v-model="model"
+      class="pa-4"
+      selected-class="bg-success"
+      show-arrows
+    >
+      <v-slide-group-item
+        v-for="n in 15"
+        :key="n"
+        v-slot="{ isSelected, toggle, selectedClass }"
+      >
+        <v-card
+          color="grey-lighten-1"
+          :class="['ma-4', selectedClass]"
+          height="200"
+          width="100"
+          @click="toggle"
+        >
+          <div class="d-flex fill-height align-center justify-center">
+            <v-scale-transition>
+              <v-icon
+                v-if="isSelected"
+                color="white"
+                size="48"
+                icon="mdi-close-circle-outline"
+              ></v-icon>
+            </v-scale-transition>
+          </div>
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+    </v-col>
+  </v-row>
+</LayoutContainer>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+</style>

components/Logiciels/Artist/Solutions.vue

@@ -0,0 +1,130 @@
+<template>
+<LayoutContainer>
+  <v-row>
+    <h4>Ces solutions peuvent vous intéresser</h4>
+  </v-row>
+
+  <v-row class="row-artist">
+    <v-col cols="3">
+      <v-img
+      src="/images/opentalent_artist_black.png"
+      >
+      </v-img>
+    </v-col>
+    
+    <v-col cols="2">
+      <h5>Opentalent Artist</h5>
+    </v-col>
+
+    <v-col cols="7">
+      <!-- list v-chip-->
+      <v-chip-group
+      active-class="primary--text"
+      column
+      >
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Agenda</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Facturation</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Comptabilité</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Communication</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Site internet</span>
+        </v-chip>
+    </v-chip-group>
+    </v-col>
+
+  </v-row>
+
+  <v-row class="row-artist">
+    <v-col cols="3">
+      <v-img
+      src="/images/opentalent_manager_black.jpg"
+      >
+      </v-img>
+    </v-col>
+    
+    <v-col cols="2">
+      <h5>Opentalent Artist</h5>
+    </v-col>
+
+    <v-col cols="7">
+      <!-- list v-chip-->
+      <v-chip-group
+      active-class="primary--text"
+      column
+      >
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Agenda</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Facturation</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Comptabilité</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Communication</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Site internet</span>
+        </v-chip>
+    </v-chip-group>
+    </v-col>
+
+  </v-row>
+</LayoutContainer>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

components/Logiciels/Manager/Accompagnement.vue

@@ -0,0 +1,214 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+
+
+        <div class="container-title">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+      <h4 class="subtitle-accompagnement">Nos accompagnements pour aller plus loin</h4>
+      </div>
+
+      <div class="image-container"> 
+          <v-row >
+            <v-col cols="6">
+              <div class="session-description">
+              <v-img
+              src="/images/logiciels/manager/Webinaire.png"
+              class="accompagnement-img left-img"
+              ></v-img>
+              
+                <small class="session left">X sessions disponibles</small>
+              <h5 class="session-name left">Formation prise en main du logiciel</h5>
+              <p class="session-details left">Destinée aux nouveaux utilisateurs, elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure.</p>
+              <v-btn class="session-btn left">S’incrire à une formation</v-btn>
+              </div>
+
+            </v-col>
+
+            <v-col cols="6">
+              <div class="session-description">
+              <v-img
+              src="/images/logiciels/manager/Webinaire.png"
+              class="accompagnement-img"
+              ></v-img>
+              
+                <small class="session">X sessions disponibles</small>
+              <h5 class="session-name">Formation prise en main du logiciel</h5>
+              <p class="session-details">Destinée aux nouveaux utilisateurs, elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure.</p>
+              <v-btn class="session-btn">S’incrire à une formation</v-btn>
+              </div>
+            </v-col>
+          </v-row>
+        </div>
+        
+
+    </div>
+
+    <v-row class="card-container">
+  <v-col cols="4" >
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="4" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="4" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+</v-row>
+
+  <h4 class="text-center title-cmf">La plus grande Confédération Musicale de France nous fait confiance</h4>
+  <v-img
+  src="/images/logiciels/manager/cmf.jpg"
+  class="cmf-img"
+  ></v-img>
+
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.cmf-img{
+  width: 30%;
+  margin-left: 35rem;
+  height: 50%;
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.title-cmf{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 2.5rem;
+line-height: 2.5rem;
+text-align: center;
+margin-left: 25rem;
+margin-right: 25rem;
+}
+.card-container {
+  transform: translateY(-40%); 
+  margin-left: 25rem;
+  margin-right:25rem;
+}
+.card {
+  background: #D8050B;
+  border-radius: 10px;
+  padding-left: 5rem; 
+  padding-right: 5rem;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  color: white;
+}
+.session-btn{
+  background: transparent;
+  border-radius: 1rem;
+  border: 1px solid #C1EFF0;
+  color: #091D20;
+  font-family: 'Barlow';
+  color: #C1EFF0 ;
+  margin-bottom: 10rem;
+}
+
+.session-name{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 1.5rem;
+width: 15rem;
+color: #FFFFFF;
+}
+
+.session-details{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: normal;
+font-size: 0.8rem;
+width: 17rem;
+color: #EFF9FB;
+margin-bottom: 2rem;
+}
+.left{
+  margin-left: 24rem;
+}
+
+.session{
+  color: #C1EFF0;
+}
+
+.session-description{
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+.accompagnement-img::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 255, 0.1);  
+    pointer-events: none;
+}
+
+.left-img{
+  margin-left: 24rem;
+}
+.image-container {
+  display: flex;
+  justify-content: space-around; 
+}
+
+.accompagnement-img{
+  width: 50%;
+  height: 90%;
+  border-radius: 2rem;
+  margin-bottom: 1rem;
+}
+.subtitle-accompagnement{
+  color: #FFFFFF;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 10px;
+line-height: 15px;
+
+text-align: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+width: 13rem;
+}
+.container-title{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-bottom: 2rem;
+}
+
+.icon-title{
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: #64AFB7;
+}
+
+.container-green{
+  background: #0E2D32;
+}
+
+</style>

components/Logiciels/Manager/Agenda.vue

@@ -0,0 +1,55 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h3>L'agenda Opentalent</h3>
+      </v-col>
+
+      <v-col cols="4"> </v-col>
+
+      <v-col cols="4">
+        <v-btn>Tous les évèvenements</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <!-- slide card-->
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+      
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

components/Logiciels/Manager/Avantages.vue

@@ -0,0 +1,124 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <div class="d-flex justify-center align-center">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+        <h5 class="subtitle-avantage">Découvrez les avantages de la solution</h5>
+
+      </div>
+    </v-row>
+    <v-row>
+      <h3 class="title">Des avantages concrets</h3>
+    </v-row>
+
+    <v-row class="row">
+      <v-col cols="4">
+        <div class="title-card">
+          <h4 class="description-card">Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
+
+        <hr />
+        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
+      </v-col>
+      <v-col cols="4">
+        <div class="title-card">
+          <h4>Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
+
+        <hr />
+        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
+        <p><v-chip class="chip-card">Membre cmf</v-chip></p>
+        <v-img src="/images/logiciels/school/screen3.png"></v-img>
+      </v-col>
+      <v-col cols="4">
+        <div class="title-card">
+          <h4>Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
+        <hr />
+        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
+      </v-col>
+    </v-row>
+
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.v-chip{
+  background: white;
+  color: black;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.details-card {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  color: #091D20;
+  margin-top: 1rem;
+}
+.number-card {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #E34461;
+}
+
+
+/** pour title-card : flex avec un espaece between */
+.title-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+
+.row {
+  margin-top: 2rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.title {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  margin-left: 2rem;
+  margin-top: 1rem;
+
+}
+
+.subtitle-avantage {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  margin-right: 73rem;
+}
+
+.icon-title {
+  color: #D8050B;
+  font-size: 1.5rem;
+  margin-left: 2rem;
+}
+</style>

components/Logiciels/Manager/Banner.vue

@@ -0,0 +1,219 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <div class="container-title">
+        <v-col cols="4" class="text-left">
+          <h1>School</h1>
+        </v-col>
+        <v-col cols="4" class="logiciel">
+          <h1>Opentalent Manager</h1>
+        </v-col>
+        <v-col cols="4" class="text-right">
+          <h1>Artist</h1>
+        </v-col>
+      </div>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <div class="banner-container">
+          <img
+            src="/images/logiciels/manager/banner-manager.png"
+            alt="line"
+            class="cover-image"
+          />
+          <div class="red-square">
+            <v-row>
+              <div class="content-row">
+                <v-icon size="50" class="fa-brands fa-react icon"></v-icon>
+                <p class="description-square">
+                  Fédérations, confédérations et collectivités
+                </p>
+              </div>
+            </v-row>
+          </div>
+
+          <div class="white-square">
+            <img
+              src="/images/opentalent_manager_black.jpg"
+              alt="Logo"
+              class="logo-image"
+            />
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const state = ref({
+  activeMenu: "Présentation",
+})
+
+const menus = [
+  { label: 'Présentation' },
+  { label: 'Avantages' },
+  { label: 'Comparatif' },
+  { label: 'Détails' },
+  { label: 'Abonnement' },
+  { label: 'Accompagnement' },
+  { label: 'Témoignages' },
+  { label: 'Formations' },
+  { label: 'Solutions associées' }
+
+];
+</script>
+
+<style scoped >
+.container-title {
+  display: flex;
+  justify-content: space-around;
+  font-family: "Barlow";
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.text-left {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  color: #000000;
+  opacity: 0.1;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+
+.logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
+}
+
+.text-right {
+  margin-top: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  text-align: right;
+  opacity: 0.1;
+  margin-right: 5rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.red-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0;
+  width: 13rem;
+  height: 10rem;
+  background: #D8050B;
+  opacity: 0.9;
+  color:white;
+}
+
+.white-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 13rem;
+  width: 13rem;
+  height: 10rem;
+  background: white;
+}
+
+.description-square {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  color: white;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-bottom: 1rem;
+}
+
+.content-row {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.icon {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.logo-image {
+  width: 90%;
+  height: auto;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 27rem;
+  object-fit: cover;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/Logiciels/Manager/FAQ.vue

@@ -0,0 +1,183 @@
+<template>
+  <LayoutContainer>
+    <div class="container-img">
+      <v-row>
+        <v-col cols="6">
+          <div class="container-left">
+
+            <div class="container-title">
+            <v-icon class="fa-brands fa-react icon-title"></v-icon>
+            <h5 class="subtitle-faq">
+              Vous voulez tirer le meilleur de notre logiciel ?
+            </h5>
+          </div>
+          <h3 class="title-faq">
+            Quelle que soit votre demande, notre équipe est à vos côtés pour
+            vous guider
+          </h3>
+
+          <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+          </div>
+
+        </v-col>
+
+        <v-col cols="6">
+
+          <div class="btn-container">
+            <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
+          </v-btn>
+
+          <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
+          </v-btn>
+          </div>
+
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.container-left{
+  margin-left: 6rem;
+}
+
+.text-btn {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: #F0E8E4;
+}
+.btn-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10rem;
+  margin-right: 15rem;
+  
+}
+
+.container-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 20rem;
+  height: 3.5rem;
+}
+
+.icon-button{
+  color: #fff;
+  font-size: 2rem;
+  margin-right: 1rem;
+  margin-left: 2rem;
+}
+.btn-faq-tuto{
+  width: 20rem;
+  height: 5.5rem;
+  margin-left: 3rem;
+  border-radius: 6px;
+  font-family: "Barlow";
+  background: transparent;
+  color: #fff;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  border: 1px white solid;
+  margin-bottom: 2rem;
+  text-transform: none !important;
+}
+
+.subtitle-faq{
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-right: 25rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.btn-faq {
+  width: 14rem;
+  height: 3.5rem;
+  margin-left: 3rem;
+  background: #ffffff;
+  border-radius: 6px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: none !important;
+  line-height: 1rem;
+  
+}
+.title-faq {
+  font-size: 2rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  margin-left: 3rem;
+  margin-right: 15rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 3rem;
+}
+
+.icon-title {
+  font-size: 1rem;
+  color: #64afb7;
+  margin-right: 0.5rem;
+  margin-top: 3rem;
+}
+.subtitle-faq {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.container-img {
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 35rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

components/Logiciels/Manager/Fonctionnalites.vue

@@ -0,0 +1,189 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+    <v-row>
+      <div class="d-flex justify-center align-center">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+      <h4 class="subtitle-fontionnalite">Découvrez toutes les foncitonnalité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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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"></v-icon>
+          <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>
+  </div>
+  </LayoutContainer>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+.list-details{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.75rem;
+line-height: 0.9rem;
+margin-left: 1rem;
+margin-bottom: 1rem;
+color: #FFFFFF;
+}
+.title-details{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-bottom: 0.7rem;
+}
+.icon-details {
+  font-size: 1.5rem;
+  margin-bottom: 0.9rem;
+  color: #D8050B;
+}
+
+.icon-title{
+  font-size: 0.8rem;
+  margin-bottom: 2rem;
+  color: #D8050B;
+}
+
+.subtitle-fontionnalite {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  margin-left: 1rem;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  width: 12rem;
+}
+
+.title-fonctionnalite {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 2rem;
+  margin-left: 1rem;
+  margin-top: -1rem;
+  width: 25rem;
+  margin-bottom: 2rem;
+}
+
+
+.container-green {
+  background-color: #0E2D32;
+  padding: 5rem;
+  color: #EFF9FB;
+}
+</style>

components/Logiciels/Manager/Outil.vue

@@ -0,0 +1,363 @@
+<template>
+  <LayoutContainer>
+    <v-row class="outil-row">
+      <v-col cols="4">
+        <div class="title">
+          <v-icon class="fa-brands fa-react icon-subtitle"></v-icon>
+          <h4 class="outil-subtitle">Présentation d'opentalent Manager</h4>
+        </div>
+        <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
+        </v-img>
+        <div class="rectangle-4">
+          <div class="black-circle">
+            <div class="content-flex">
+              <v-img
+                src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                class="logo-manager"
+              >
+              </v-img>
+              <p class="devis">Sur devis</p>
+            </div>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="5">
+        <h2 class="outil-title">
+          La solution de mise en réseau des organisations culturelles
+        </h2>
+        <ul class="outil-ul">
+          <li class="outil-list">
+            Logiciel de gestion et communication en ligne
+          </li>
+          <li class="outil-list">
+            Répond aux besoin globaux des réseaux culturels
+          </li>
+          <li class="outil-list">Gestion collaborative</li>
+          <li class="outil-list">
+            Mise en valeur des activités des membres du réseau
+          </li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <div class="container-square">
+          <v-row>
+            <div class="red-square">
+              <v-icon class="fa-regular fa-comments icon"></v-icon>
+              <p class="text-square">Nous contacter</p>
+            </div>
+          </v-row>
+
+          <v-row>
+            <div class="red-square">
+              <v-icon class="fa-brands fa-readme icon"></v-icon>
+              <p class="text-square">Brochure</p>
+            </div>
+          </v-row>
+
+          <v-row>
+            <div class="darkblue-square">
+              <v-icon class="fa-solid fa-phone icon"></v-icon>
+              <p class="text-square">Nous Appeler</p>
+            </div>
+          </v-row>
+        </div>
+      </v-col>
+      <v-row>
+        <v-col cols="4"> </v-col>
+
+        <v-col cols="5">
+          <h2>Des caractéristiques uniques & dédiées</h2>
+          <div class="picto-container">
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto1.png"
+              ></v-img>
+              <p class="picto-text">
+                Logiciel de gestion & communication full web
+              </p>
+            </div>
+
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto2.png"
+              ></v-img>
+              <p class="picto-text">
+                Boostez votre visibilité & votre communication
+              </p>
+            </div>
+
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto3.png"
+              ></v-img>
+              <p class="picto-text">
+                Boostez votre visibilité & votre communication
+              </p>
+            </div>
+
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto4.png"
+              ></v-img>
+              <p class="picto-text">Communiquez en réseau</p>
+            </div>
+
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto5.png"
+              ></v-img>
+              <p class="picto-text">Sur-Mesure</p>
+            </div>
+
+            <div class="picto-group">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/manager/picto6.png"
+              ></v-img>
+              <p class="picto-text">Pour tout réseau de type pyramidal</p>
+            </div>
+          </div>
+        </v-col>
+
+        <v-col cols="2"> </v-col>
+      </v-row>
+    </v-row>
+
+    <v-row class="container-green">
+      <v-row>
+        <v-col cols="6" class="citation-school">
+          “ Pour les petits comme pour les grands établissements d’enseignement
+          artistique.“</v-col
+        >
+      </v-row>
+
+      <v-col cols="6">
+        <div class="title-logiciel-group">
+          <v-icon class="fa-brands fa-react icon-logiciel"></v-icon>
+        <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
+        </div>
+
+        <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
+        </v-img>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.title-logiciel-group{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.devis {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 9rem;
+  margin-top: -1rem;
+  width: 7rem;
+}
+.black-circle {
+  border-radius: 3rem;
+  background: #091d20;
+  width: 7rem;
+  height: 6rem;
+}
+
+.logo-manager {
+  top: 1rem;
+  margin-left: 0.3rem;
+  margin-right: 0.5rem;
+  z-index: 1;
+}
+
+.rectangle-4 {
+  width: 18rem;
+  height: 6rem;
+  background: rgba(216, 5, 11, 0.2);
+  border-radius: 3rem;
+  margin-left: 5rem;
+  margin-top: 2rem;
+}
+
+.outil-subtitle {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1rem;
+  color: #091d20;
+  margin-right: 2rem;
+}
+
+.text-square {
+  font-family: "Barlow";
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-top: 0.9rem;
+  text-align: center;
+}
+
+.icon-subtitle {
+  font-size: 2rem;
+  margin-right: 1rem;
+  color: #d8050b;
+}
+
+.icon {
+  margin-top: 2rem;
+  color: #ffffff;
+}
+
+.container-square {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.outil-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 3rem;
+  color: #091d20;
+  margin-bottom: 2rem;
+  margin-right: 9rem;
+}
+
+.outil-ul {
+  margin-left: 1rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.citation-school {
+  font-family: "Barlow";
+  font-style: italic;
+  font-weight: 300;
+  font-size: 2rem;
+  width: 3rem;
+  line-height: 40px;
+  color: #ffffff;
+  font-style: italic;
+  margin-top: 20rem;
+  margin-left: 5rem;
+}
+
+.icon-logiciel {
+  font-size: 2rem;
+  color:#D8050B;
+  margin-left: 5rem;
+  margin-top: 4rem;
+}
+.subtitle-logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #ffffff;
+  margin-left: 2rem;
+  margin-right: 15rem;
+  margin-top: 4rem;
+  top: 10rem;
+}
+.screen2-img {
+  width: 50rem;
+  height: 40rem;
+  bottom: 7rem;
+}
+.container-green {
+  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
+    rgba(7, 27, 31, 0.3);
+  height: 35rem;
+}
+
+.picto-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: -15rem;
+}
+
+.picto-img {
+  width: 14rem;
+  height: 14rem;
+}
+
+.picto-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.picto-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.9rem;
+  margin-top: -3rem;
+  text-align: center;
+  margin-right: 2rem;
+  margin-left: 2rem;
+}
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-left: 5rem;
+  margin-right: 15rem;
+}
+
+.screen-img {
+  width: 20rem;
+  height: 15rem;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+.outil-row {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+.darkblue-square {
+  width: 9rem;
+  height: 7rem;
+  background: #0e2d32;
+  margin-left: 15rem;
+}
+.red-square {
+  margin-left: 15rem;
+  width: 9rem;
+  height: 7rem;
+  background: #d8050b;
+}
+</style>

components/Logiciels/Manager/Premium.vue

@@ -0,0 +1,160 @@
+<template>
+  <LayoutContainer>
+    <h6 class="subtitle">Comparatif de nos solutions</h6>
+    <h3 class="title">Et si vous passiez à la version Premium</h3>
+    <table class="table-comparatif">
+      <thead>
+        <tr>
+          <th class="thead"></th>
+          <th class="thead"></th>
+          <th class="thead">
+            <p>Standard</p>
+            <p>A partir de 44,10 ttc /mois</p>
+          </th>
+          <th class="thead">
+            <p>Premium</p>
+            <p>A partir de 60,20 ttc /mois</p>
+          </th>        </tr>
+      </thead>
+      <tbody class="table-body">
+        <tr v-for="row in tableData" :key="row.id" class="table-row">
+          <td class="table-data">{{ row.column1 }}</td>
+          <td>{{ row.column2 }}</td>
+          <td>{{ row.column3 }}</td>
+          <td>{{ row.column4 }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </LayoutContainer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          column1: "Donnée 1",
+          column2: "Donnée 2",
+          column3: "Donnée 3",
+          column4: "Donnée 4",
+        },
+        {
+          id: 2,
+          column1: "Donnée 5",
+          column2: "Donnée 6",
+          column3: "Donnée 7",
+          column4: "Donnée 8",
+        },
+        {
+          id: 3,
+          column1: "Donnée 9",
+          column2: "Donnée 10",
+          column3: "Donnée 11",
+          column4: "Donnée 12",
+        },
+        {
+          id: 4,
+          column1: "Donnée 13",
+          column2: "Donnée 14",
+          column3: "Donnée 15",
+          column4: "Donnée 16",
+        },
+        {
+          id: 5,
+          column1: "Donnée 17",
+          column2: "Donnée 18",
+          column3: "Donnée 19",
+          column4: "Donnée 20",
+        },
+        {
+          id: 6,
+          column1: "Donnée 21",
+          column2: "Donnée 22",
+          column3: "Donnée 23",
+          column4: "Donnée 24",
+        },
+        {
+          id: 7,
+          column1: "Donnée 25",
+          column2: "Donnée 26",
+          column3: "Donnée 27",
+          column4: "Donnée 28",
+        },
+        {
+          id: 8,
+          column1: "Donnée 29",
+          column2: "Donnée 30",
+          column3: "Donnée 31",
+          column4: "Donnée 32",
+        },
+        {
+          id: 9,
+          column1: "Donnée 33",
+          column2: "Donnée 34",
+          column3: "Donnée 35",
+          column4: "Donnée 36",
+        },
+        {
+          id: 10,
+          column1: "Donnée 37",
+          column2: "Donnée 38",
+          column3: "Donnée 39",
+          column4: "Donnée 40",
+        },
+        {
+          id: 11,
+          column1: "Donnée 41",
+          column2: "Donnée 42",
+          column3: "Donnée 43",
+          column4: "Donnée 44",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+.subtitle {
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.title{
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.thead {
+  background-color: #fff;
+  height: 8rem;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 400;
+font-size: 30px;
+line-height: 34px;
+}
+.table-comparatif {
+  width: 74rem;
+  margin-top: 1rem;
+  margin-left: 15rem;
+  margin-right: 5rem;
+  border: none;
+  border-collapse: collapse;
+}
+.table-row{
+  background-color: white;
+  text-align: center;
+  height: 3rem;
+}
+
+.table-body .table-row:nth-child(even) {
+  background-color: rgba(32, 147, 190, 0.2);
+}
+
+</style>

components/Logiciels/Manager/Projet.vue

@@ -0,0 +1,85 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h5>Contactez-nous</h5>
+        <v-img
+          src="/images/logiciels/school/femme-casque.jpg"
+          class="femme-casque"
+        >
+        </v-img>
+      </v-col>
+      <v-col cols="8">
+        <h5>Vous avez un projet ?</h5>
+        <h6>N'attendez plus, appelez-nous</h6>
+        <p>
+          Vous avez une identité, des besoins, des projets... On est là pour
+          vous écouter et vous offrir une offre personnalisée ! Que vous soyez
+          une petite ou une structure plus conséquente, notre offre s'adapte à
+          toutes les tailles : le prix de l’abonnement au logiciel varie en
+          fonction du nombre d'élèves, tout en conservant l'intégralité des
+          fonctionnalités.
+        </p>
+
+        <v-btn> Nous contacter</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="2">
+        <v-img src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
+      </v-col>
+      <v-col cols="10">
+        <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>
+      </v-col>
+    </v-row>
+
+    <v-row >
+      <v-col cols="4" class="border" >
+        <div class="d-flex justify-center align-center ">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.border{
+  border-top: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+  border-right: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+}
+
+.icon{
+  font-size: 3rem;
+  color: #0E2D32;
+}
+.femme-casque {
+  width: 20rem;
+}
+</style>

components/Logiciels/Manager/Pyramide.vue

@@ -0,0 +1,111 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <div class="d-flex justify-center align-center">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+        <h4 class="subtitle-pyramide">Un réseau pyramidal</h4>
+      </div>
+    </v-row>
+
+    <v-row>
+      <v-col cols="4">
+        <div class="row-pyramide">
+          <h4 class="title-pyramide">Opentalent Manager, un logiciel adapté à chacun</h4>
+        <p class="detail-pyramide">
+          Notre système s'adapte à toutes les structures de réseau pyramidal,
+          quel que soit le nombre de niveau.
+        </p>
+        </div>
+
+      </v-col>
+
+      <v-col cols="8">
+        <v-img
+        src="/images/logiciels/manager/schema_manager.png"
+        class="schema-manager"
+        >
+
+        </v-img>
+      </v-col>
+    </v-row>
+
+    <v-row >
+      <v-col cols="4" class="border" >
+        <div class="d-flex justify-center align-center ">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.icon{
+  font-size: 3rem;
+  color: #0E2D32;
+}
+.schema-manager{
+  width: 70%;
+  height: 100%;
+}
+
+.row-pyramide{
+  margin-left: 2rem;
+}
+
+.detail-pyramide{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.8rem;
+  color: #091d20;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  width: 22rem;
+}
+.title-pyramide{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  color: #091d20;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  width: 20rem;
+}
+.icon-title {
+  color: #d8050b;
+  margin-right: 1rem;
+  font-size: 1rem;
+  margin-left: 2rem;
+}
+
+.subtitle-pyramide {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: #091d20;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+</style>

components/Logiciels/Manager/Reviews.vue

@@ -0,0 +1,161 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row>
+        <v-col cols="4">
+          <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+        </v-col>
+
+        <v-col cols="8">
+          <div class="card-container">
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text class="card-text">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions> Laurent Lebon </v-card-actions>
+
+                  <p>Chef d'orchestre</p>
+                  <p>Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script></script>
+
+<style scoped>
+
+.reviewer-name{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 24px;
+color: #E34461;
+}
+
+.reviewer-status{
+  font-family: 'Barlow';
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 12px;
+line-height: 16px;
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+}
+
+.reviewer-structure{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.8rem;
+line-height: 14px;
+display: flex;
+align-items: center;
+
+color: #071B1F;
+}
+
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 5.5rem;
+  margin-top: 3rem;
+}
+
+.card-text{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 1rem;
+line-height: 1rem;
+margin-left: 1.5rem;
+margin-right: 1.5rem;
+height: 12rem;
+}
+.reviews-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 3rem;
+  margin-right: 3rem;
+  margin-top: 5rem;
+  text-align: center;
+}
+
+.card {
+  width: 70rem;
+  height: 23rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-radius: 1rem;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+}
+
+.container-green {
+  background-color: #0e2d32;
+}
+</style>

components/Logiciels/Manager/Solutions.vue

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

components/Logiciels/School/Avantages.vue

@@ -1,44 +1,50 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <h5>Découvrez les avanatges de la solution</h5>
+      <div class="d-flex justify-center align-center">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+        <h5 class="subtitle-avantage">Découvrez les avantages de la solution</h5>
+
+      </div>
     </v-row>
     <v-row>
-      <h3>Des avantages concrets</h3>
+      <h3 class="title">Des avantages concrets</h3>
     </v-row>
 
-    <v-row>
+    <v-row class="row">
       <v-col cols="4">
-        <h4>Un gain de temps</h4>
-        <span>01</span>
+        <div class="title-card">
+          <h4 class="description-card">Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
 
         <hr />
-
-        Centralisez toutes vos informations sur un seul et même outil et ne
-        perdez plus de temps avec des fichiers sur diverses applications.
+        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
       </v-col>
       <v-col cols="4">
-        <h4>Une activité structurée</h4>
-        <span>02</span>
+        <div class="title-card">
+          <h4>Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
 
         <hr />
-
-        Des espaces dédiés et des outils spécifiques à vos besoins pour une
-        gestion optimisée et une lecture simplifiée.
-        <p><v-chip>Membre cmf</v-chip></p>
-        <v-img
-        src="/images/logiciels/school/screen3.png"
-        ></v-img>
+        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
+        <p><v-chip class="chip-card">Membre cmf</v-chip></p>
+        <v-img src="/images/logiciels/school/screen3.png"></v-img>
       </v-col>
       <v-col cols="4">
-        <h4>Une gestion collaborative</h4>
-        <span>03</span>
-
+        <div class="title-card">
+          <h4>Une gestion collaborative</h4>
+          <span class="number-card">03</span>
+        </div>
         <hr />
-
-        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 class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
+          perdez plus de temps avec des fichiers sur diverses applications.
+        </p>
       </v-col>
     </v-row>
 
@@ -47,4 +53,72 @@
 
 <script setup></script>
 
-<style scoped></style>
+<style scoped>
+.v-chip{
+  background: white;
+  color: black;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.details-card {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  color: #091D20;
+  margin-top: 1rem;
+}
+.number-card {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #E34461;
+}
+
+
+/** pour title-card : flex avec un espaece between */
+.title-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+
+.row {
+  margin-top: 2rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.title {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  margin-left: 2rem;
+  margin-top: 1rem;
+
+}
+
+.subtitle-avantage {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  margin-right: 73rem;
+}
+
+.icon-title {
+  color: #D8050B;
+  font-size: 1.5rem;
+  margin-left: 2rem;
+}
+</style>

components/Logiciels/School/Banner.vue

@@ -1,15 +1,17 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <v-col cols="4" class="text-left">
-        <h1>Artist</h1>
-      </v-col>
-      <v-col cols="4" class="text-center">
-        <h1>Opentalent School</h1>
-      </v-col>
-      <v-col cols="4" class="text-right">
-        <h1>Manager</h1>
-      </v-col>
+      <div class="container-title">
+        <v-col cols="4" class="text-left">
+          <h1>Artist</h1>
+        </v-col>
+        <v-col cols="4" class="logiciel">
+          <h1>Opentalent School</h1>
+        </v-col>
+        <v-col cols="4" class="text-right">
+          <h1>Manager</h1>
+        </v-col>
+      </div>
     </v-row>
 
     <v-row>
@@ -21,11 +23,17 @@
             class="cover-image"
           />
           <div class="black-square">
-            <p>
-              École de musique, d'art, de danse, de cirque, conservatoires et
-              MJC
-            </p>
+            <v-row>
+              <div class="content-row">
+                <v-icon size="50" class="fa-brands fa-react icon"></v-icon>
+                <p class="description-square">
+                  École de musique, d'art, de danse, de cirque, conservatoires
+                  et MJC
+                </p>
+              </div>
+            </v-row>
           </div>
+
           <div class="blue-square">
             <img
               src="/images/logo_school_white.png"
@@ -39,112 +47,45 @@
 
     <v-row>
       <v-col cols="12" class="menu-container">
-        <v-chip v-if="state.activeMenu === 'Présentation'" class="active-menu"
-          >Présentation</v-chip
-        >
-        <span v-else>Présentation</span>
-
-        <span>Inactif</span>
-
-        <v-chip v-if="state.activeMenu === 'Avantages'" class="active-menu"
-          >Avantages</v-chip
-        >
-        <span v-else>Avantages</span>
-
-        <v-chip
-          v-if="state.activeMenu === 'Fonctionnalités'"
-          class="active-menu"
-          >Fonctionnalités</v-chip
-        >
-        <span v-else>Fonctionnalités</span>
-
-        <v-chip v-if="state.activeMenu === 'Comparatif'" class="active-menu"
-          >Comparatif</v-chip
-        >
-        <span v-else>Comparatif</span>
-
-        <v-chip v-if="state.activeMenu === 'Contact'" class="active-menu"
-          >Contact</v-chip
-        >
-        <span v-else>Contact</span>
-
-        <v-chip v-if="state.activeMenu === 'Accompagnement'" class="active-menu"
-          >Accompagnement</v-chip
-        >
-        <span v-else>Accompagnement</span>
-
-        <v-chip v-if="state.activeMenu === 'Témoignages'" class="active-menu"
-          >Témoignages</v-chip
-        >
-        <span v-else>Témoignages</span>
-
-        <v-chip v-if="state.activeMenu === 'Aide'" class="active-menu"
-          >Aide</v-chip
-        >
-        <span v-else>Aide</span>
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
       </v-col>
     </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
-const state = reactive({
+const state = ref({
   activeMenu: "Présentation",
-});
+})
+
+const menus = [
+  { label: 'Présentation' },
+  { label: 'Avantages' },
+  { label: 'Fonctionnalités' },
+  { label: 'Comparatif' },
+  { label: 'Contact' },
+  { label: 'Accompagnement' },
+  { label: 'Témoignages' },
+  { label: 'Aide' }
+]
 </script>
 
 <style scoped>
-.menu-container {
+.container-title {
   display: flex;
   justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #c4c4c4;
   font-family: "Barlow";
-  font-size: 12px;
   line-height: 16px;
   display: flex;
   align-items: center;
   text-align: center;
   letter-spacing: 0.18em;
-  text-transform: uppercase;
   border-bottom: 0.1rem solid #eaeaea;
 }
 
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
-
-.black-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 0;
-  width: 9rem;
-  height: 8rem;
-  background-color: black;
-  background: #9edbdd;
-}
-
-.blue-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 9rem;
-  width: 9rem;
-  height: 8rem;
-  background: #0e2d32;
-}
-
-.logo-image {
-  width: 100%;
-  height: auto;
-  margin-top: 1.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
-}
 .text-left {
   font-family: "Barlow";
   font-style: normal;
@@ -154,17 +95,18 @@ const state = reactive({
   color: #000000;
   opacity: 0.1;
   margin-top: 2rem;
+  margin-left: 5rem;
 }
 
-.text-center {
+.logiciel {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 600;
   font-size: 3rem;
   line-height: 85px;
   text-align: center;
   color: #000000;
-  text-align: center;
+  margin-left: 6rem;
+  margin-right: 4rem;
 }
 
 .text-right {
@@ -178,6 +120,85 @@ const state = reactive({
   color: #000000;
   text-align: right;
   opacity: 0.1;
+  margin-right: 5rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.black-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0;
+  width: 13rem;
+  height: 10rem;
+  background-color: black;
+  background: #9edbdd;
+}
+
+.blue-square {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 12rem;
+  width: 13rem;
+  height: 10rem;
+  background: #0e2d32;
+}
+
+.description-square {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  color: #091d20;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-bottom: 1rem;
+}
+
+.content-row {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.icon {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.logo-image {
+  width: 90%;
+  height: auto;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
 }
 
 .banner-container {

components/Logiciels/School/FAQ.vue

@@ -1,31 +1,44 @@
 <template>
   <LayoutContainer>
     <div class="container-img">
-      <v-row>
-        <h5>Vous voulez tirer le meilleur de notre logiciel ?</h5>
-      </v-row>
-
       <v-row>
         <v-col cols="6">
-          <h3>
+          <div class="container-left">
+
+            <div class="container-title">
+            <v-icon class="fa-brands fa-react icon-title"></v-icon>
+            <h5 class="subtitle-faq">
+              Vous voulez tirer le meilleur de notre logiciel ?
+            </h5>
+          </div>
+          <h3 class="title-faq">
             Quelle que soit votre demande, notre équipe est à vos côtés pour
             vous guider
           </h3>
 
-          <v-btn>
-            Consulter notre FAQ
-          </v-btn>
+          <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+          </div>
+
         </v-col>
 
-      
         <v-col cols="6">
-          <v-btn>
-            De nombreux articles tutoriels accessibles 24h/24
+
+          <div class="btn-container">
+            <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
           </v-btn>
 
-          <v-btn>
-            Support accessible du lundi au vendredi via l’outil en ligne 
+          <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
           </v-btn>
+          </div>
+
         </v-col>
       </v-row>
     </div>
@@ -36,17 +49,135 @@
 
 <style scoped>
 
-/** container image : image cover */
+.container-left{
+  margin-left: 6rem;
+}
+
+.text-btn {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: #F0E8E4;
+}
+.btn-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10rem;
+  margin-right: 15rem;
+  
+}
+
+.container-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 20rem;
+  height: 3.5rem;
+}
+
+.icon-button{
+  color: #fff;
+  font-size: 2rem;
+  margin-right: 1rem;
+  margin-left: 2rem;
+}
+.btn-faq-tuto{
+  width: 20rem;
+  height: 5.5rem;
+  margin-left: 3rem;
+  border-radius: 6px;
+  font-family: "Barlow";
+  background: transparent;
+  color: #fff;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  border: 1px white solid;
+  margin-bottom: 2rem;
+  text-transform: none !important;
+}
+
+.subtitle-faq{
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-right: 25rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.btn-faq {
+  width: 14rem;
+  height: 3.5rem;
+  margin-left: 3rem;
+  background: #ffffff;
+  border-radius: 6px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: none !important;
+  line-height: 1rem;
+  
+}
+.title-faq {
+  font-size: 2rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  margin-left: 3rem;
+  margin-right: 15rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 3rem;
+}
+
+.icon-title {
+  font-size: 1rem;
+  color: #64afb7;
+  margin-right: 0.5rem;
+  margin-top: 3rem;
+}
+.subtitle-faq {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
 .container-img {
   background-image: url("/images/logiciels/school/faq.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  height: 500px;
+  height: 35rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-
 </style>

components/Logiciels/School/Fonctionnalites.vue

@@ -2,86 +2,121 @@
   <LayoutContainer>
     <div class="container-green">
     <v-row>
-      <h4>Découvrez toutes les foncitonnalités de notre solution</h4>
+      <div class="d-flex justify-center align-center">
+        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+      <h4 class="subtitle-fontionnalite">Découvrez toutes les foncitonnalités de notre solution</h4>
+      </div>
     </v-row>
 
     <v-row>
-      <h2>Des fonctionnalités adaptées à vos besoins</h2>
+      <h2 class="title-fonctionnalite">Des fonctionnalités adaptées à vos besoins</h2>
     </v-row>
 
     <v-row>
       <v-col cols="3">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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">
-        <h6>bénéficier d'un espace dédié</h6>
-        <ul>
+        <div class="details-container">
+          <v-icon class="fa-brands fa-react icon-details"></v-icon>
+          <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>
   </div>
@@ -94,6 +129,58 @@
 
 <style scoped>
 
+.list-details{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.75rem;
+line-height: 0.9rem;
+margin-left: 1rem;
+margin-bottom: 1rem;
+color: #FFFFFF;
+}
+.title-details{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-bottom: 0.7rem;
+}
+.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-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  margin-left: 1rem;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  width: 12rem;
+}
+
+.title-fonctionnalite {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 2rem;
+  margin-left: 1rem;
+  margin-top: -1rem;
+  width: 25rem;
+  margin-bottom: 2rem;
+}
+
+
 .container-green {
   background-color: #0E2D32;
   padding: 5rem;

components/Logiciels/School/Outil.vue

@@ -2,42 +2,59 @@
   <LayoutContainer>
     <v-row class="outil-row">
       <v-col cols="4">
-        <h4 class="title">Présentation d'opentalent school</h4>
+        <div class="title">
+
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        <h4 >Présentation d'opentalent school</h4>
+        </div>
         <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
         </v-img>
       </v-col>
 
-      <v-col cols="6">
-        <h2>Un outil complet en ligne</h2>
-        <ul>
-          <li>Logiciel de gestion et communication en ligne</li>
-          <li>Destiné aux établissements d'enseignement artistique</li>
-          <li>
+      <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>Pilotage complet de votre structure</li>
+            facturation, encaissement…)</li>
+          <li class="outil-list">Pilotage complet de votre structure</li>
         </ul>
       </v-col>
 
-      <v-col cols="2">
+      <v-col cols="3">
+
+        <div class="container-square">
+          <v-row>
+          <div class="blue-square">
+            <v-icon class="fa-regular fa-comments icon"></v-icon>
+            <p class="text-square">Nous contacter</p>
+          </div>
+        </v-row>
+
         <v-row>
           <div class="blue-square">
-            <p>Nous contacter</p>
+            <v-icon class="fa-regular fa-circle-info icon"></v-icon>
+            <p class="text-square">Demander une demo </p>
           </div>
         </v-row>
 
         <v-row>
           <div class="blue-square">
-            <p>Nous contacter</p>
+            <v-icon class="fa-brands fa-readme icon"></v-icon>
+            <p class="text-square">Brochure</p>
           </div>
         </v-row>
 
         <v-row>
           <div class="darkblue-square">
-            <p>Nous contacter</p>
+            <v-icon class="fa-solid fa-phone icon"></v-icon>
+            <p class="text-square">Nous Appeler</p>
           </div>
         </v-row>
+        </div>
+
       </v-col>
       <v-row>
         <v-col cols="4"> </v-col>
@@ -88,6 +105,56 @@
 
 <style scoped>
 
+.icon-title{
+  color: blue;
+}
+
+.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-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 0.7rem;
+line-height: 15px;
+text-align: center;
+letter-spacing: 0.20em;
+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;
+}
+
 .citation-school {
   font-family: 'Barlow';
 font-style: italic;
@@ -139,6 +206,9 @@ line-height: 40px;
 }
 
 .title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
@@ -160,16 +230,16 @@ line-height: 40px;
   margin-bottom: 5rem;
 }
 .darkblue-square {
-  width: 6rem;
-  height: 6rem;
+  width: 9rem;
+  height: 7rem;
   background: #0e2d32;
-  margin-left: 12rem;
+  margin-left: 15rem;
 
 }
 .blue-square {
-  margin-left: 12rem;
-  width: 6rem;
-  height: 6rem;
+  margin-left: 15rem;
+  width: 9rem;
+  height: 7rem;
   background: rgba(32, 147, 190, 0.6);
 }
 </style>

components/Logiciels/School/Reviews.vue

@@ -1,57 +1,161 @@
 <template>
-<LayoutContainer>
-  <v-row>
-    <v-col cols="4">
-      <h3>C'est eux qui en parlent le mieux</h3>
-    </v-col>
-
-    <v-col cols="8">
-      <!-- slide card-->
-
-  <v-sheet
-    class="mx-auto"
-    elevation="8"
-    max-width="800"
-  >
-    <v-slide-group
-      v-model="model"
-      class="pa-4"
-      selected-class="bg-success"
-      show-arrows
-    >
-      <v-slide-group-item
-        v-for="n in 15"
-        :key="n"
-        v-slot="{ isSelected, toggle, selectedClass }"
-      >
-        <v-card
-          color="grey-lighten-1"
-          :class="['ma-4', selectedClass]"
-          height="200"
-          width="100"
-          @click="toggle"
-        >
-          <div class="d-flex fill-height align-center justify-center">
-            <v-scale-transition>
-              <v-icon
-                v-if="isSelected"
-                color="white"
-                size="48"
-                icon="mdi-close-circle-outline"
-              ></v-icon>
-            </v-scale-transition>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row>
+        <v-col cols="4">
+          <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+        </v-col>
+
+        <v-col cols="8">
+          <div class="card-container">
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text class="card-text">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions> Laurent Lebon </v-card-actions>
+
+                  <p>Chef d'orchestre</p>
+                  <p>Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
           </div>
-        </v-card>
-      </v-slide-group-item>
-    </v-slide-group>
-  </v-sheet>
-    </v-col>
-  </v-row>
-</LayoutContainer>
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
 </template>
 
-<script>
-</script>
+<script></script>
 
 <style scoped>
-</style>
+
+.reviewer-name{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 24px;
+color: #E34461;
+}
+
+.reviewer-status{
+  font-family: 'Barlow';
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 12px;
+line-height: 16px;
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+}
+
+.reviewer-structure{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.8rem;
+line-height: 14px;
+display: flex;
+align-items: center;
+
+color: #071B1F;
+}
+
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 5.5rem;
+  margin-top: 3rem;
+}
+
+.card-text{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 1rem;
+line-height: 1rem;
+margin-left: 1.5rem;
+margin-right: 1.5rem;
+height: 12rem;
+}
+.reviews-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 3rem;
+  margin-right: 3rem;
+  margin-top: 5rem;
+  text-align: center;
+}
+
+.card {
+  width: 70rem;
+  height: 23rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-radius: 1rem;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+}
+
+.container-green {
+  background-color: #0e2d32;
+}
+</style>

components/Logiciels/School/Solutions.vue

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

nuxt.config.ts

@@ -71,6 +71,11 @@ export default defineNuxtConfig({
     "@nuxtjs/i18n",
     "@nuxt/devtools",
   ],
+  webfontloader: {
+    google: {
+      families: ['Barlow:300,400,500,700&display=swap'],
+    },
+  },
   devtools: {
     // @see https://github.com/nuxt/devtools
     enabled: false,

package.json

@@ -43,6 +43,7 @@
     "pinia-orm": "^1.5.1",
     "sass": "^1.59.3",
     "scss": "^0.2.4",
+    "typeface-barlow": "^1.1.13",
     "vite-plugin-vuetify": "^1.0.2",
     "vue-social-sharing": "^3.0.9",
     "vue3-carousel": "^0.2.12",

pages/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <LayoutNavigation> </LayoutNavigation>
-  <LayoutCaroussel> </LayoutCaroussel>
-  <HomePromotion></HomePromotion>
-  <HomeSolution></HomeSolution>
-  <HomeEventAgenda></HomeEventAgenda>
+  <LayoutNavigation />
+  <LayoutCaroussel/>
+  <HomePromotion/>
+  <HomeSolution/>
+  <HomeEventAgenda/>
   <HomeReviews></HomeReviews>
   <HomeNews></HomeNews>
   <HomeHelp></HomeHelp>

pages/logiciels/artist.vue

@@ -1,10 +1,19 @@
 <template>
-  <LayoutNavigation></LayoutNavigation>
-
+  <LayoutNavigation /> 
+  <LogicielsArtistBanner />
+  <LogicielsArtistOutil />
+  <LogicielsArtistAvantages />
+  <LogicielsArtistFonctionnalites />
+  <LogicielsArtistPremium />
+  <LogicielsArtistProjet/>
+  <LogicielsArtistAccompagnement/>
+  <LogicielsArtistReviews/>
+  <LogicielsArtistAgenda/>
+  <LogicielsArtistFAQ/>
+  <LogicielsArtistSolutions/>
+  <LayoutFooter />
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
-<style scoped>
-</style>
+<style scoped></style>

pages/logiciels/manager.vue

@@ -1,10 +1,20 @@
 <template>
-  <p>manager</p>
-
+  <LayoutNavigation /> 
+  <LogicielsManagerBanner />
+  <LogicielsManagerOutil />
+  <LogicielsManagerAvantages />
+  <LogicielsManagerFonctionnalites />
+  <!-- <LogicielsManagerPremium /> -->
+  <LogicielsManagerPyramide />
+  <!-- <LogicielsManagerProjet/> -->
+  <LogicielsManagerAccompagnement/>
+  <LogicielsManagerReviews/>
+  <!-- <LogicielsManagerAgenda/> -->
+  <LogicielsManagerFAQ/>
+  <LogicielsManagerSolutions/>
+  <LayoutFooter />
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
-<style scoped>
-</style>
+<style scoped></style>

pages/logiciels/school.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutNavigation />
+  <LayoutNavigation /> 
   <LogicielsSchoolBanner />
   <LogicielsSchoolOutil />
   <LogicielsSchoolAvantages />

yarn.lock

@@ -10300,6 +10300,11 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
+typeface-barlow@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/typeface-barlow/-/typeface-barlow-1.1.13.tgz#cd1112f10a5578ce01299041558db0db0dfd0109"
+  integrity sha512-IuXLXcA/U7ZR5gfy1yHVr6Qqrcr/gjmrwAaSXqTXigXbiz6ZR2gsaP4m5i058e67gQ7NyVCjNIgNDsRTE25Wwg==
+
 typescript@4.9.5:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"