fix home

components/Formation/Reviews.vue

@@ -18,7 +18,9 @@
                 </v-card-text>
 
                 <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+                  <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>
@@ -36,7 +38,9 @@
                 </v-card-text>
 
                 <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+                  <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>
@@ -54,7 +58,9 @@
                 </v-card-text>
 
                 <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+                  <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>
@@ -71,43 +77,42 @@
 <script></script>
 
 <style scoped>
-
-.card-text{
+.card-text {
   color: #fff;
 }
 
-.reviewer-name{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 500;
-font-size: 20px;
-line-height: 24px;
-color: #E34461;
+.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;
-color: #fff;
+.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;
+  color: #fff;
 }
 
-.reviewer-structure{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 0.8rem;
-line-height: 14px;
-display: flex;
-align-items: center;
-color: #fff;
+.reviewer-structure {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  color: #fff;
 }
 
 .card-footer {
@@ -118,26 +123,26 @@ color: #fff;
   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;
+.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-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 42px;
-line-height: 42px;
-color: #091D20;
-margin-top: 2rem;
-margin-left: 2rem;
-margin-right: 8rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #091d20;
+  margin-top: 2rem;
+  margin-left: 2rem;
+  margin-right: 8rem;
 }
 
 .card {
@@ -146,7 +151,7 @@ margin-right: 8rem;
   margin-left: 1rem;
   margin-right: 1rem;
   border-radius: 1rem;
-  background: #0E2D32;
+  background: #0e2d32;
 }
 
 .card-container {
@@ -156,5 +161,4 @@ margin-right: 8rem;
   margin-top: 5rem;
   margin-bottom: 3rem;
 }
-
 </style>

components/Home/EventAgenda.vue

@@ -7,11 +7,11 @@
 
       <v-row>
         <v-col col="6">
-          <v-btn class="btn-event"> Découvrir l'évènement </v-btn>
+          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
         </v-col>
 
         <v-col col="6">
-          <v-btn class="btn-event"> Découvrir l'évènement </v-btn>
+          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
         </v-col>
       </v-row>
 
@@ -43,9 +43,12 @@
 
 <style scoped>
 
-.details{
+* {
   font-family: "Barlow";
   font-style: normal;
+}
+
+.details{
   font-weight: 400;
   font-size: 1rem;
   margin-top: 3rem;
@@ -56,8 +59,6 @@
 }
 
 .title-event {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 38px;
@@ -76,15 +77,11 @@
   line-height: 15px;
   width: 15rem;
   height: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  margin-left:19rem;
+  margin-left:15rem;
   margin-top:2rem;
 }
 .title {
   height: 114px;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size:2rem;
   line-height: 38px;
@@ -112,9 +109,8 @@
 
 .screen-img{
   margin-left: 8rem;
-  width: 30rem;
-  height: 30rem;
-  margin-bottom: -7rem;
-  border-radius: 2rem;
+  width: 70%;
+  height: 90%;
+  border-radius: 20%;
 }
 </style>

components/Home/Promotion.vue

@@ -35,14 +35,14 @@
 
 
       <v-row>
-        <v-col cols="6">
+        <v-col cols="6" >
           <v-row class="row-outil">
-            <p class="text-outil-details with-border">Logiciel de Gestion et 
communication en ligne</p>
+            <p class="text-outil-details with-border-top">Logiciel de Gestion et 
communication en ligne</p>
 
           </v-row>
 
-          <v-row>
-            <p class="text-outil-details with-border">Site Web intégré et simple d’usage</p>
+          <v-row class="row-outil">
+            <p class="text-outil-details with-border ">Site Web intégré et simple d’usage</p>
 
           </v-row>
 
@@ -52,11 +52,11 @@
 
         <v-col cols="6" >
           <v-row class="row-outil">
-            <p class="text-outil-details with-border" >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>
+            <p class="text-outil-details with-border-top" >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>
 
           </v-row>
 
-          <v-row>
+          <v-row class="row-outil">
             <p class="text-outil-details with-border">Communiquez en réseau</p>
 
           </v-row>
@@ -72,15 +72,19 @@
 <script></script>
 
 <style scoped>
-.with-border {
+
+.with-border, .with-border-top {
   border-bottom: 1px solid #D1CDC7;
-  border-top: 1px solid #D1CDC7;
   padding-top: 1rem;
-  padding-bottom: 1rem; /* add some padding to create some spacing */
+  padding-bottom: 1rem; 
+}
+
+.with-border-top{
+  border-top: 1px solid #D1CDC7;
 }
 
 .row-outil{
-  margin-top: 3rem;
+  margin-left: 4rem;
 }
 
 .text-outil-details{
@@ -94,7 +98,7 @@ line-height: 26px;
 width: 19rem;
 color: #0E2D32;
 margin-left: 3rem;
-margin-bottom: 3rem;
+margin-bottom: 1rem;
 margin-left: 10rem;
 
 }
@@ -118,7 +122,7 @@ margin-top: -20rem;
   font-style: normal;
   font-weight: 600;
   font-size: 4rem;
-  line-height: 68px;
+  line-height: 5rem;
   text-align: center;
   color: white;
   height: 20rem;
@@ -131,8 +135,9 @@ margin-top: -20rem;
 .screen {
   width: 900px;
   margin-top: 2rem;
-  margin-left: 15rem;
-  margin-right: 15rem;
+  margin-left: 17rem;
+  margin-right: 17rem;
+  text-align: center;
   bottom: 25rem;
   border-radius: 20px; 
 }

components/Layout/Navigation.vue

@@ -43,7 +43,7 @@
   height: 3rem;
 }
 .custom-row {
-  padding: 0 10px;
+  padding: 0 4rem;
 }
 
 .common-styles {

components/Logiciels/Manager/Outil.vue

@@ -8,6 +8,7 @@
         </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">

components/Logiciels/School/Outil.vue

@@ -4,11 +4,25 @@
       <v-col cols="4">
         <div class="title">
 
-          <v-icon  class="fa-brands fa-react icon"></v-icon>
+          <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>
+
+        <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>
+              <p class="devis">Sur devis</p>
+            </div>
+          </div>
+        </div>
+
       </v-col>
 
       <v-col cols="5">
@@ -60,26 +74,46 @@
         <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"
               ></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"
               ></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"
               ></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"
               ></v-img>
+              <p class="picto-text">Communiquez en réseau</p>
             </div>
+
           </div>
         </v-col>
 
@@ -89,7 +123,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">
@@ -105,12 +144,67 @@
 
 <style scoped>
 
+*{
+  font-family: "Barlow";
+  font-style: normal;
+}
+
+.black-circle {
+  border-radius: 3rem;
+  background: #091d20;
+  width: 7rem;
+  height: 6rem;
+}
+
+.devis {
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 9rem;
+  margin-top: -1rem;
+  width: 7rem;
+}
+
+.logo-manager {
+  top: 1rem;
+  margin-left: 0.3rem;
+  margin-right: 0.5rem;
+  z-index: 1;
+}
+.rectangle-4 {
+  width: 18rem;
+  height: 6rem;
+  background: rgba(32, 147, 190, 0.2);
+  border-radius: 3rem;
+  margin-left: 5rem;
+  margin-top: 2rem;
+}
+.picto-text {
+  font-weight: 300;
+  font-size: 0.9rem;
+  margin-top: -3rem;
+  text-align: center;
+  margin-right: 2rem;
+  margin-left: 2rem;
+}
+.picto-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: -15rem;
+}
+
+.picto-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .icon-title{
-  color: blue;
+  margin-right: 1.5rem;
+  color: rgba(32, 147, 190, 0.6);
 }
 
 .text-square {
-  font-family: 'Barlow';
   margin-left: 2rem;
   margin-right: 2rem;
   margin-top: 0.9rem;
@@ -118,7 +212,8 @@
 }
 
 .icon{
-  margin-top: 2rem;
+  margin-top:1rem;
+ 
 }
 
 .container-square {
@@ -126,8 +221,6 @@
   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;
@@ -137,8 +230,6 @@ text-transform: uppercase;
 }
 
 .outil-title{
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 3rem;
   line-height: 18px;
@@ -148,28 +239,23 @@ text-transform: uppercase;
 
 .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;
+width: 38rem;
 line-height: 40px;
   color: #ffffff;
   font-style: italic;
   margin-top: 20rem;
-  margin-left: 5rem;
+  margin-left: 2rem;
 }
 .subtitle-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 1.5rem;
   line-height: 18px;
@@ -178,13 +264,7 @@ line-height: 40px;
   margin-right: 15rem;
   margin-top : 4rem;
   top: 10rem;
-}
-.screen2-img {
-  width: 50rem;
-  height: 40rem;
-  bottom: 4rem;
-}
-.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;
@@ -198,25 +278,21 @@ line-height: 40px;
   justify-content: flex-start;
   padding: 0 2rem;
 }
-
 .picto-img {
-  right: 5rem;
-  height: 10rem;
-  margin-bottom: 3rem;
+  width: 14rem;
+  height: 14rem;
 }
 
 .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;
+  margin-right: 5rem;
 }
 
 .screen-img {
@@ -230,15 +306,15 @@ line-height: 40px;
   margin-bottom: 5rem;
 }
 .darkblue-square {
-  width: 9rem;
+  width: 10rem;
   height: 7rem;
   background: #0e2d32;
-  margin-left: 15rem;
+  margin-left: 14rem;
 
 }
 .blue-square {
-  margin-left: 15rem;
-  width: 9rem;
+  margin-left: 14rem;
+  width: 10rem;
   height: 7rem;
   background: rgba(32, 147, 190, 0.6);
 }

components/Logiciels/School/Projet.vue

@@ -2,7 +2,7 @@
   <LayoutContainer>
     <v-row>
       <v-col cols="4">
-        <h5>Contactez-nous</h5>
+        <h5 class="contact">Contactez-nous</h5>
         <v-img
           src="/images/logiciels/school/femme-casque.jpg"
           class="femme-casque"
@@ -10,9 +10,9 @@
         </v-img>
       </v-col>
       <v-col cols="8">
-        <h5>Vous avez un projet ?</h5>
-        <h6>N'attendez plus, appelez-nous</h6>
-        <p>
+        <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 à
@@ -21,13 +21,13 @@
           fonctionnalités.
         </p>
 
-        <v-btn> Nous contacter</v-btn>
+        <v-btn class="btn-contact"> 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-img class="img-contact" 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>
@@ -71,8 +71,8 @@
 <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 */
+  border-top: 1px solid #000; 
+  border-right: 1px solid #000;
 }
 
 .icon{

pages/index.vue

@@ -1,13 +1,13 @@
 <template>
   <LayoutNavigation />
-  <LayoutCaroussel/>
+  <HomeCaroussel/>
   <HomePromotion/>
   <HomeSolution/>
   <HomeEventAgenda/>
-  <HomeReviews></HomeReviews>
-  <HomeNews></HomeNews>
-  <HomeHelp></HomeHelp>
-  <LayoutFooter> </LayoutFooter>
+  <HomeReviews/>
+  <HomeNews/>
+  <HomeHelp/>
+  <LayoutFooter/>
 </template>
 
 <script></script>