fix artist page

components/Logiciels/Artist/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/Artist/Banner.vue

@@ -3,13 +3,13 @@
     <v-row>
       <div class="container-title">
         <v-col cols="4" class="text-left">
-          <h1>Artist</h1>
+          <h1>Manager</h1>
         </v-col>
         <v-col cols="4" class="logiciel">
-          <h1>Opentalent School</h1>
+          <h1>Opentalent Artist </h1>
         </v-col>
         <v-col cols="4" class="text-right">
-          <h1>Manager</h1>
+          <h1>School</h1>
         </v-col>
       </div>
     </v-row>
@@ -18,7 +18,7 @@
       <v-col cols="12">
         <div class="banner-container">
           <img
-            src="/images/solutions/school.jpg"
+            src="/images/logiciels/artist/banner.jpg"
             alt="line"
             class="cover-image"
           />
@@ -34,9 +34,9 @@
             </v-row>
           </div>
 
-          <div class="blue-square">
+          <div class="white-square">
             <img
-              src="/images/logo_school_white.png"
+              src="/images/opentalent_artist_black.png"
               alt="Logo"
               class="logo-image"
             />
@@ -70,7 +70,7 @@ const menus = [
   { label: 'Accompagnement' },
   { label: 'Témoignages' },
   { label: 'Aide' }
-]
+];
 </script>
 
 <style scoped>
@@ -147,12 +147,11 @@ const menus = [
 
 .black-square {
   position: absolute;
-  bottom: 0.4rem;
+  bottom: 0rem;
   right: 0;
   width: 13rem;
   height: 10rem;
-  background-color: black;
-  background: #9edbdd;
+  background: #FAC20A;
 }
 
 .blue-square {
@@ -164,6 +163,15 @@ const menus = [
   background: #0e2d32;
 }
 
+.white-square {
+  position: absolute;
+  bottom: 0rem;
+  right: 13rem;
+  width: 13rem;
+  height: 10rem;
+  background: white;
+}
+
 .description-square {
   font-family: "Barlow";
   font-style: normal;
@@ -204,14 +212,21 @@ const menus = [
 .banner-container {
   position: relative;
   overflow: hidden;
+  display: flex;
+  justify-content: center; 
+  align-items: flex-start;
+  height: 25rem; 
 }
 
+
 .cover-image {
   width: 100%;
-  height: 25rem;
+  height: auto; 
   object-fit: cover;
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);
+  display: block; 
 }
+
 </style>

components/Logiciels/Artist/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/Artist/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: #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;

components/Logiciels/Artist/Outil.vue

@@ -3,83 +3,104 @@
     <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>
+          <v-icon class="fa-brands fa-react icon-title"></v-icon>
+          <h4>Présentation d'opentalent artist</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_Jaune_white.png"
+                class="logo-artist"
+              >
+              </v-img>
+              <p class="devis">Sur devis</p>
+            </div>
+          </div>
+        </div>
       </v-col>
 
       <v-col cols="5">
         <h2 class="outil-title">Un outil complet en ligne</h2>
         <ul class="outil-ul">
-          <li class="outil-list">Logiciel de gestion et communication en ligne</li>
-          <li class="outil-list">Destiné aux établissements d'enseignement artistique</li>
+          <li class="outil-list">
+            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>
+            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>
+            <div class="yellow-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="darkblue-square">
-            <v-icon class="fa-solid fa-phone icon"></v-icon>
-            <p class="text-square">Nous Appeler</p>
-          </div>
-        </v-row>
+          <v-row>
+            <div class="yellow-square">
+              <v-icon class="fa-regular fa-circle-info icon"></v-icon>
+              <p class="text-square">Demander une demo</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">
+          <h2>Des caractéristiques uniques & dédiées</h2>
+          <div class="picto-container">
+            <div class="picto-group">
               <v-img
                 class="picto-img"
-                src="/images/logiciels/school/picto1.png"
+                src="/images/logiciels/artist/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/school/picto2.png"
+                src="/images/logiciels/artist/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/school/picto3.png"
+                src="/images/logiciels/artist/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/school/picto4.png"
+                src="/images/logiciels/artist/picto4.png"
               ></v-img>
+              <p class="picto-text">Communiquez en réseau</p>
             </div>
+
           </div>
         </v-col>
 
@@ -89,7 +110,12 @@
 
     <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-col cols="6">
+          <p class="citation-school">
+            “ Pour les petits comme pour les grands établissements
+            d’enseignement artistique.“
+          </p>
+        </v-col>
       </v-row>
 
       <v-col cols="6">
@@ -104,20 +130,27 @@
 <script setup></script>
 
 <style scoped>
-
-.icon-title{
-  color: blue;
+.devis {
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 9rem;
+  margin-top: -1rem;
+  width: 7rem;
 }
 
+.icon-title {
+  margin-right: 1.5rem;
+  color: rgba(32, 147, 190, 0.6);
+}
 .text-square {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   margin-left: 2rem;
   margin-right: 2rem;
   margin-top: 0.9rem;
   text-align: center;
 }
 
-.icon{
+.icon {
   margin-top: 2rem;
 }
 
@@ -126,17 +159,15 @@
   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;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
 }
 
-.outil-title{
+.outil-title {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
@@ -146,26 +177,31 @@ text-transform: uppercase;
   margin-bottom: 4rem;
 }
 
-.outil-ul{
+.outil-ul {
   margin-left: 1rem;
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 1rem;
-line-height: 1.5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.logo-artist {
+  top: 1rem;
+  margin-left: 0.3rem;
+  margin-right: 0.5rem;
+  z-index: 1;
 }
-
 .citation-school {
-  font-family: 'Barlow';
-font-style: italic;
-font-weight: 300;
-font-size: 2rem;
-width: 3rem;
-line-height: 40px;
+  font-family: "Barlow";
+  font-style: italic;
+  font-weight: 300;
+  font-size: 2rem;
+  width: 38rem;
+  line-height: 40px;
   color: #ffffff;
   font-style: italic;
   margin-top: 20rem;
-  margin-left: 5rem;
+  margin-left: 2rem;
 }
 .subtitle-logiciel {
   font-family: "Barlow";
@@ -176,7 +212,7 @@ line-height: 40px;
   color: #ffffff;
   margin-left: 5rem;
   margin-right: 15rem;
-  margin-top : 4rem;
+  margin-top: 4rem;
   top: 10rem;
 }
 .screen2-img {
@@ -195,28 +231,58 @@ line-height: 40px;
 
 .picto-container {
   display: flex;
-  justify-content: flex-start;
-  padding: 0 2rem;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: -15rem;
 }
 
+
+.rectangle-4 {
+  width: 18rem;
+  height: 6rem;
+  background: rgba(250, 194, 10, 0.2);
+  border-radius: 3rem;
+  margin-left: 5rem;
+  margin-top: 2rem;
+}
 .picto-img {
-  right: 5rem;
-  height: 10rem;
-  margin-bottom: 3rem;
+  width: 14rem;
+  height: 14rem;
 }
 
-.title {
+.picto-group {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+}
+.picto-text {
   font-family: "Barlow";
   font-style: normal;
+  font-weight: 300;
+  font-size: 0.9rem;
+  margin-top: -3rem;
+  text-align: center;
+  margin-right: 2rem;
+  margin-left: 2rem;
+}
+.black-circle {
+  border-radius: 3rem;
+  background: #091d20;
+  width: 7rem;
+  height: 6rem;
+}
+.title {
+  align-items: center;
+  font-family: "Barlow";
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-weight: 600;
   font-size: 1.5rem;
   line-height: 18px;
   color: #091d20;
   margin-left: 5rem;
-  margin-right: 15rem;
+  margin-right: 5rem;
 }
 
 .screen-img {
@@ -229,17 +295,13 @@ line-height: 40px;
   margin-top: 5rem;
   margin-bottom: 5rem;
 }
-.darkblue-square {
-  width: 9rem;
-  height: 7rem;
-  background: #0e2d32;
-  margin-left: 15rem;
 
-}
-.blue-square {
-  margin-left: 15rem;
-  width: 9rem;
+.yellow-square {
+  margin-left: 14rem;
+  width: 10rem;
   height: 7rem;
-  background: rgba(32, 147, 190, 0.6);
+  background: #fac20a;
+  color: #091d20;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 </style>

components/Logiciels/Artist/Premium.vue

@@ -154,7 +154,7 @@ line-height: 34px;
 }
 
 .table-body .table-row:nth-child(even) {
-  background-color: rgba(32, 147, 190, 0.2);
+  background: rgba(250, 194, 10, 0.2);
 }
 
 </style>

components/Logiciels/Artist/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>
+                  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>
+
+            <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/Artist/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>

components/Logiciels/Manager/Fonctionnalites.vue

@@ -149,13 +149,13 @@ color: #FFFFFF;
 .icon-details {
   font-size: 1.5rem;
   margin-bottom: 0.9rem;
-  color: #D8050B;
+  color: #FAC20A;
 }
 
 .icon-title{
   font-size: 0.8rem;
   margin-bottom: 2rem;
-  color: #D8050B;
+  color: #FAC20A;
 }
 
 .subtitle-fontionnalite {

components/Logiciels/Manager/Outil.vue

@@ -350,14 +350,14 @@
   margin-bottom: 5rem;
 }
 .darkblue-square {
-  width: 9rem;
+  width: 10rem;
   height: 7rem;
   background: #0e2d32;
-  margin-left: 15rem;
+  margin-left: 14rem;
 }
 .red-square {
-  margin-left: 15rem;
-  width: 9rem;
+  margin-left: 14rem;
+  width: 10rem;
   height: 7rem;
   background: #d8050b;
 }

components/Logiciels/Manager/Reviews.vue

@@ -10,7 +10,7 @@
           <div class="card-container">
             <v-card class="card">
               <v-card-item>
-                <v-card-text class="card-text">
+                <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
@@ -18,10 +18,10 @@
                 </v-card-text>
 
                 <div class="card-footer">
-                  <v-card-actions> Laurent Lebon </v-card-actions>
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
 
-                  <p>Chef d'orchestre</p>
-                  <p>Conservatoire de Lyon</p>
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
                 </div>
               </v-card-item>
             </v-card>

components/Logiciels/School/Outil.vue

@@ -3,9 +3,8 @@
     <v-row class="outil-row">
       <v-col cols="4">
         <div class="title">
-
-          <v-icon  class="fa-brands fa-react icon-title"></v-icon>
-        <h4 >Présentation d'opentalent school</h4>
+          <v-icon class="fa-brands fa-react icon-title"></v-icon>
+          <h4>Présentation d'opentalent school</h4>
         </div>
         <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
         </v-img>
@@ -13,62 +12,61 @@
         <div class="rectangle-4">
           <div class="black-circle">
             <div class="content-flex">
-              <v-img
-                src="/images/logo_school_white.png"
-                class="logo-manager"
-              >
+              <v-img src="/images/logo_school_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">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">
+            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>
+            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>
+            <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-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="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>
+          <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>
@@ -113,7 +111,6 @@
               ></v-img>
               <p class="picto-text">Communiquez en réseau</p>
             </div>
-
           </div>
         </v-col>
 
@@ -123,11 +120,11 @@
 
     <v-row class="container-green">
       <v-row>
-        <v-col cols="6" >
+        <v-col cols="6">
           <p class="citation-school">
-          
-          “ Pour les petits comme pour les grands établissements d’enseignement artistique.“
-        </p>
+            “ Pour les petits comme pour les grands établissements
+            d’enseignement artistique.“
+          </p>
         </v-col>
       </v-row>
 
@@ -143,8 +140,7 @@
 <script setup></script>
 
 <style scoped>
-
-*{
+* {
   font-family: "Barlow";
   font-style: normal;
 }
@@ -199,7 +195,7 @@
   align-items: center;
 }
 
-.icon-title{
+.icon-title {
   margin-right: 1.5rem;
   color: rgba(32, 147, 190, 0.6);
 }
@@ -211,9 +207,8 @@
   text-align: center;
 }
 
-.icon{
-  margin-top:1rem;
- 
+.icon {
+  margin-top: 1rem;
 }
 
 .container-square {
@@ -221,15 +216,15 @@
   flex-direction: column;
   justify-content: space-between;
   color: white;
-font-weight: 500;
-font-size: 0.7rem;
-line-height: 15px;
-text-align: center;
-letter-spacing: 0.20em;
-text-transform: uppercase;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
 }
 
-.outil-title{
+.outil-title {
   font-weight: 600;
   font-size: 3rem;
   line-height: 18px;
@@ -237,19 +232,19 @@ text-transform: uppercase;
   margin-bottom: 4rem;
 }
 
-.outil-ul{
+.outil-ul {
   margin-left: 1rem;
-font-weight: 300;
-font-size: 1rem;
-line-height: 1.5rem;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .citation-school {
-font-style: italic;
-font-weight: 300;
-font-size: 2rem;
-width: 38rem;
-line-height: 40px;
+  font-style: italic;
+  font-weight: 300;
+  font-size: 2rem;
+  width: 38rem;
+  line-height: 40px;
   color: #ffffff;
   font-style: italic;
   margin-top: 20rem;
@@ -262,9 +257,10 @@ line-height: 40px;
   color: #ffffff;
   margin-left: 5rem;
   margin-right: 15rem;
-  margin-top : 4rem;
+  margin-top: 4rem;
   top: 10rem;
-}.container-green {
+}
+.container-green {
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
   height: 35rem;
@@ -310,7 +306,6 @@ line-height: 40px;
   height: 7rem;
   background: #0e2d32;
   margin-left: 14rem;
-
 }
 .blue-square {
   margin-left: 14rem;

components/Logiciels/School/Projet.vue

@@ -1,64 +1,77 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <v-col cols="4">
-        <h5 class="contact">Contactez-nous</h5>
-        <v-img
-          src="/images/logiciels/school/femme-casque.jpg"
-          class="femme-casque"
-        >
-        </v-img>
+      <div class="project-container">
+        
+      </div>
+      <v-col cols="3">
+        <div class="contact-container">
+          <h5 class="contact">Contactez-nous</h5>
+          <v-img
+            src="/images/logiciels/school/femme-casque.jpg"
+            class="femme-casque"
+          >
+          </v-img>
+        </div>
       </v-col>
       <v-col cols="8">
-        <h5 class="title">Vous avez un projet ?</h5>
-        <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
-        <p class="contact-details">
-          Vous avez une identité, des besoins, des projets... On est là pour
-          vous écouter et vous offrir une offre personnalisée ! Que vous soyez
-          une petite ou une structure plus conséquente, notre offre s'adapte à
-          toutes les tailles : le prix de l’abonnement au logiciel varie en
-          fonction du nombre d'élèves, tout en conservant l'intégralité des
-          fonctionnalités.
-        </p>
-
-        <v-btn class="btn-contact"> Nous contacter</v-btn>
+        <div class="project-container">
+          <h5 class="title">Vous avez un projet ?</h5>
+          <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <p class="contact-details">
+            Vous avez une identité, des besoins, des projets... On est là pour
+            vous écouter et vous offrir une offre personnalisée ! Que vous soyez
+            une petite ou une structure plus conséquente, notre offre s'adapte à
+            toutes les tailles : le prix de l’abonnement au logiciel varie en
+            fonction du nombre d'élèves, tout en conservant l'intégralité des
+            fonctionnalités.
+          </p>
+          <v-btn class="btn-contact"> Nous contacter</v-btn>
+
+        </div>
+
       </v-col>
     </v-row>
 
-    <v-row>
+    <v-row class="border-row">
       <v-col cols="2">
-        <v-img class="img-contact" src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
+        <v-img
+          class="logo-cmf"
+          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>
+        <div class="cmf-container">
+          <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
+          <p>
+            Si votre établissement d’enseignement artistique est adhérent à la
+            Confédération Musicale de France (CMF), vous bénéficiez
+            gratuitement, dans le cadre de votre adhésion, de la version
+            Opentalent Artist standard et de conditions priviliégiés pour la
+            version Opentalent School. Contactez nous direcetement ou contactez
+            votre fédération pour obtenir vos codes d’accès.
+          </p>
+        </div>
       </v-col>
     </v-row>
 
-    <v-row >
-      <v-col cols="4" class="border" >
-        <div class="d-flex justify-center align-center ">
-          <v-icon  class="fa-brands fa-react icon"></v-icon>
+    <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>
+          <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>
+          <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>
@@ -70,16 +83,94 @@
 
 <style scoped>
 
-.border{
-  border-top: 1px solid #000; 
+.border-row{
+  border: 1px solid #E5E5E5;
+}
+.cmf-container{
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+  width: 35rem;
+}
+
+.logo-cmf{
+  width: 10rem;
+  height: 10rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
+  margin-left: 3rem;
+}
+
+.project-container{
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+*{
+  font-family: 'Barlow';
+  font-style: normal;
+
+}
+.btn-contact {
+  background: #F4AA2A;
+border-radius: 6px;
+  color: #fff;
+
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+}
+
+.contact-details{
+font-weight: 300;
+font-size: 16px;
+line-height: 20px;
+color: #091D20;
+}
+.contact{
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+}
+.title{
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+font-weight: 600;
+font-size: 42px;
+line-height: 42px;
+color: #071B1F;
+}
+
+.subtitle{
+font-weight: 400;
+font-size: 34px;
+line-height: 38px;
+color: #071B1F;
+margin-bottom: 2rem;
+}
+
+.contact-container{
+  margin-left: 4rem;
+font-weight: 600;
+font-size: 12px;
+line-height: 16px;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+margin-top: 4rem;
+margin-bottom: 2rem;
+}
+.border {
+  border-top: 1px solid #000;
   border-right: 1px solid #000;
 }
 
-.icon{
+.icon {
   font-size: 3rem;
-  color: #0E2D32;
+  color: #0e2d32;
 }
 .femme-casque {
-  width: 20rem;
+  width: 15rem;
 }
 </style>

components/Logiciels/School/Reviews.vue

@@ -10,7 +10,7 @@
           <div class="card-container">
             <v-card class="card">
               <v-card-item>
-                <v-card-text class="card-text">
+                <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
@@ -18,10 +18,10 @@
                 </v-card-text>
 
                 <div class="card-footer">
-                  <v-card-actions> Laurent Lebon </v-card-actions>
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
 
-                  <p>Chef d'orchestre</p>
-                  <p>Conservatoire de Lyon</p>
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
                 </div>
               </v-card-item>
             </v-card>