fix accueil page

components/Home/EventAgenda.vue

@@ -1,6 +1,5 @@
 <template>
-  <v-container>
-    <div class="container">
+  <LayoutContainer>
       <h2 class="title">
         Retrouvez tous vos évènements dans l'agenda et référencez vous dans
         l'annuaire
@@ -8,14 +7,13 @@
 
       <v-row>
         <v-col col="6">
-          <v-btn> 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> Découvrir l'annuaire </v-btn>
+          <v-btn class="btn-event"> Découvrir l'évènement </v-btn>
         </v-col>
       </v-row>
-    </div>
 
     <div class="white-container">
       <v-row>
@@ -28,9 +26,9 @@
         </v-col>
 
         <v-col cols="6">
-          <h3>Une solution évolutive pour vous donner entière satisfaction</h3>
+          <h3 class="title-event">Une solution évolutive pour vous donner entière satisfaction</h3>
 
-          <p>
+          <p class="details">
             La satisfaction de nos clients est notre première motivation et nous
             nous tenons à votre écoute pour faire évoluer notre logiciel. Un
             besoin ? Notifiez le nous et après l'étude de votre demande en
@@ -40,42 +38,83 @@
         </v-col>
       </v-row>
     </div>
-  </v-container>
+  </LayoutContainer>
 </template>
 
 <style scoped>
 
-.screen-img {
-  height: 400px;
-  width: 500px;
-  border-radius: 20px;
-}
-.white-container {
-  height: 500px;
-  width: 1600px;
+.details{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  margin-top: 3rem;
+  margin-left: 2rem;
+  color: #091d20;
+  width: 16rem;
+  margin-left: 10rem;
 }
 
+.title-event {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 38px;
+  margin-top: 3rem;
+  margin-left: 2rem;
+  color: #091d20;
+  width: 16rem;
+  margin-left: 10rem;
+}
+.btn-event {
+  border-radius: 0.5rem;
+  margin-left: 7vw;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 15px;
+  width: 15rem;
+  height: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
+  margin-left:10rem;
+  margin-top:2rem;
+}
 .title {
   height: 114px;
-
-  /* H3 Headline */
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
-  font-size: 34px;
+  font-size:2rem;
   line-height: 38px;
-
-  /* or 112% */
   text-align: center;
-
-  /* NEUTRAL - BLANC */
+  margin-left: 25rem;
+  margin-right: 25rem;
+  margin-top: 3rem;
   color: #ffffff;
 }
 
 .container {
-  height: 500px;
-  width: 1600px;
-  background: url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
+  height: 20rem;
+  margin-bottom: 30rem;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+              linear-gradient(180deg, rgba(14, 45, 50, 0.04) 0%, rgba(14, 45, 50, 0.2) 100%),
+              linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
+              url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
   background-size: cover;
 }
+
+.white-container {
+  margin-top: 5rem;
+  background-color: #ffffff;
+}
+
+.screen-img{
+  margin-left: 8rem;
+  width: 30rem;
+  height: 30rem;
+  margin-bottom: -7rem;
+  border-radius: èrem;
+}
 </style>

components/Home/Help.vue

@@ -1,131 +1,111 @@
 <template>
-  <v-container>
+  <LayoutContainer>
     <div class="container">
       <v-row>
-
         <v-col cols="8">
           <v-img class="help-img" src="/images/help/Help.png"></v-img>
         </v-col>
 
         <v-col cols="4">
-          <h4 class="subtitle-team">Notre équipe est à vos côtés pour vous guider</h4>
+          <h4 class="subtitle-team">
+            Notre équipe est à vos côtés pour vous guider
+          </h4>
 
           <p class="need-help">
-            Besoin d’aide ? Vous souhaitez en savoir plus sur nos solutions ou
+            Besoin d’aide ? <br> Vous souhaitez en savoir plus sur nos solutions ou
             vous avez besoin d'assistance sur l'utilisation de l'un de nos
             logiciels ?
           </p>
 
           <v-row>
             <ul class="details">
-              <li class="detail-item">Ouvert du lundi au vendredi de 8h15 à 17h45</li>
+              <li class="detail-item">
+                Ouvert du lundi au vendredi de 8h15 à 17h45
+              </li>
               <li class="detail-item">Support joignable par mail</li>
-              <li class="detail-item">De nombreux articles tutoriels accessibles 24h/24</li>
+              <li class="detail-item">
+                De nombreux articles tutoriels accessibles 24h/24
+              </li>
             </ul>
           </v-row>
 
           <v-row class="row-faq">
-            <v-btn class="button-faq">
-            consulter la FAQ
-          </v-btn>
+            <v-btn class="button-faq"> consulter la FAQ </v-btn>
           </v-row>
-
-
         </v-col>
-        
       </v-row>
     </div>
-  </v-container>
+  </LayoutContainer>
 </template>
 
 <style scoped>
-
-.button-faq{
+.button-faq {
   width: 195px;
-height: 53px;
-
-/* Vert 60 */
-background: #64AFB7;
-border-radius: 6px;
-color: white;
-padding: 19px 28px;
-gap: 9px;
-font-family: 'Barlow';
-
+  height: 53px;
+  background: #64afb7;
+  border-radius: 6px;
+  color: white;
+  padding: 19px 28px;
+  gap: 9px;
+  font-family: "Barlow";
 }
 
-
 .row-faq {
-  margin-top: 170px;
+  margin-top: 2rem;
 }
 
 .details {
-
   margin-top: 50px;
-  width: 399px;
-  height: 58px;
-left: 973px;
-font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 16px;
-line-height: 20px;
-color: #0E2D32;
+  width: 19rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  color: #0e2d32;
 }
 
 .detail-item {
   margin-left: 28px;
   margin-bottom: 15px;
   width: 286px;
-left: 933px;
-font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 16px;
-line-height: 20px;
-color: #0E2D32;
+  left: 933px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #0e2d32;
 }
 
-
-
 .need-help {
-  width: 399px;
-  height: 58px;
-left: 933px;
-top: 7323px;
-font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 16px;
-line-height: 20px;
-color: #0E2D32;
+  width: 15rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #0e2d32;
 }
-  
 
 .help-img {
   width: 722px;
-height: 506px;
-left: 121px;
-border-radius: 20px;
+  height: 506px;
+  left: 2rem;
+  border-radius: 20px;
 }
 
-.subtitle-team{
-  height: 138px;
-left: 933px;
-top: 7221px;
-
-/* H4 Headline */
-font-family: 'Barlow';
-font-style: normal;
-font-weight: 400;
-font-size: 30px;
-line-height: 34px;
-width: 300px;
+.subtitle-team {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 34px;
+  width: 300px;
 }
 
 .container {
-  margin-bottom: 100px;
-  width: 100%;
+  margin-bottom: 1rem;
+  margin-top: 3rem;;
 }
-
 </style>

components/Home/News.vue

@@ -1,48 +1,143 @@
 <template>
-<v-container>
-  <div class="container">
-    <v-row>
-      <v-col cols="6">
-          <h6>Découvrez nos dernières actualités</h6>
-          <h2>Quoi de neuf ?</h2>
-      </v-col>
-
-      <v-col cols="6">
-          <v-btn class="btn-news" color="primary" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
-      </v-col>
-    </v-row>
-    
-
-    <v-row>
-      <!-- caroussel des aactualités-->
-      <v-col cols="12">
-        <v-carousel cycle height="400" hide-delimiters>
-          <v-carousel-item
-            v-for="(item,i) in items"
-            :key="i"
-            :src="item.src"
-          >
-            <v-row>
-              <v-col cols="6">
-                <v-row>
-                  <p>Logiciel de Gestion et 
communication en ligne</p>
-
-                </v-row>
-
-                <v-row>
-                  <p>Logiciel de Gestion et 
communication en ligne</p>
-
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-carousel-item>
-        </v-carousel>
-      </v-col>
-            
-    </v-row>
-  </div>
-</v-container>
+  <LayoutContainer>
+      <v-row>
+        <v-col cols="6">
+          <h6 class="small-title">Découvrez nos dernières actualités</h6>
+          <h2 class="title">Quoi de neuf ?</h2>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <!-- caroussel des aactualités-->
+        <v-col cols="12">
+          <v-sheet
+    class="mx-auto"
+    max-width="800"
+  >
+    <v-slide-group
+      v-model="model"
+      class="pa-4"
+      selected-class="bg-primary"
+      show-arrows
+    >
+      <v-slide-group-item
+        v-for="item in items"
+        :key="i"
+        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-expand-transition>
+      <v-sheet
+        v-if="model != null"
+        height="200"
+      >
+        <div class="d-flex fill-height align-center justify-center">
+          <h3 class="text-h6">
+            Selected {{ model }}
+          </h3>
+        </div>
+      </v-sheet>
+    </v-expand-transition>
+  </v-sheet>
+        </v-col>
+      </v-row>
+  </LayoutContainer>
 </template>
 
+<script setup>
+
+const items = ref([
+  { src: "/images/reviews/review1.png" },
+  { src: "/images/reviews/review2.png" },
+  { src: "/images/reviews/review3.png" },
+  { src: "/images/reviews/review4.png" },
+  { src: "/images/reviews/review5.png" },
+]);
+
+</script>
+
 <style scoped>
-</style>
+.carousel-card {
+  width: calc(100% / 3 - 12px);
+  height: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: 0.3s;
+}
+
+.carousel-card.active {
+  transform: scale(1.05);
+}
+
+.small-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  width: 12rem;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-left: 2rem;
+  color: #071b1f;
+  margin-top: 4.5rem;
+}
+
+.title {
+  margin-top: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 2rem;
+  color: #071b1f;
+}
+
+.btn-news {
+  color: #9edbdd;
+  margin-left: 10rem;
+  margin-top: 8rem;
+  border-radius: 2rem;
+  font-family: "Barlow";
+  background: transparent;
+  /** border color 9edbdd */
+  border: 1px solid #9edbdd;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 25px;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 15px;
+}
+</style>

components/Home/Promotion.vue

@@ -38,12 +38,12 @@
       <v-row>
         <v-col cols="6">
           <v-row>
-            <p>Logiciel de Gestion et 
communication en ligne</p>
+            <p class="text-outil-details">Logiciel de Gestion et 
communication en ligne</p>
 
           </v-row>
 
           <v-row>
-            <p>Logiciel de Gestion et 
communication en ligne</p>
+            <p class="text-outil-details">Site Web intégré et simple d’usage</p>
 
           </v-row>
 
@@ -53,12 +53,12 @@
 
         <v-col cols="6" >
           <v-row >
-            <p >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>
+            <p class="text-outil-details" >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>
 
           </v-row>
 
           <v-row>
-            <p>Communiquez en réseau</p>
+            <p class="text-outil-details">Communiquez en réseau</p>
 
           </v-row>
 
@@ -73,28 +73,35 @@
 
 <script></script>
 
-<style>
-
-.text-outil{
+<style scoped>
 
+.text-outil-details{
 font-family: 'Barlow';
 font-style: normal;
 font-weight: 400;
-font-size: 34px;
-line-height: 38px;
-
+font-size: 2rem;
+font-weight: 300;
+font-size: 22px;
+line-height: 26px;
+width: 15rem;
 color: #0E2D32;
+margin-left: 3rem;
+margin-bottom: 3rem;
+margin-top: 1rem;
+
 }
-.outil {
-  margin-bottom: 100px;
-}
-.container {
-  width: 1600px;
+
+.text-outil{
+font-family: 'Barlow';
+font-style: normal;
+font-weight: 400;
+font-size: 2rem;
+color: #0E2D32;
+margin-top: -20rem;
 }
 
 .col-gestion {
-  margin-top: 100px;
-  margin-bottom: 100px;
+  margin-bottom: 4rem;
   background: #0e2d32;
 }
 
@@ -102,29 +109,24 @@ color: #0E2D32;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: 60px;
+  font-size: 4rem;
   line-height: 68px;
-
-  /* or 113% */
   text-align: center;
   color: white;
-
-  height: 331.95px;
-  margin-top: 128px;
-  margin-left: 300px;
-  margin-right: 300px;
-  margin-bottom: 357px;
+  height: 20rem;
+  margin-top: 3rem;
+  margin-left: 17rem;
+  margin-right: 17rem;
+  margin-bottom: 25rem;
 }
 
 .screen {
   width: 900px;
-  margin-top: 100px;
-  margin-bottom: 100px;
-  margin-left: 300px;
-  margin-right: 300px;
-  bottom: 400px;
-  border-radius: 20px;
-  
+  margin-top: 2rem;
+  margin-left: 15rem;
+  margin-right: 15rem;
+  bottom: 25rem;
+  border-radius: 20px; 
 }
 
 .span-color {
@@ -132,10 +134,10 @@ color: #0E2D32;
 }
 
 .rectangle-img {
-  margin-top: -35px;
-  top: 25px;
-  width: 100px;
-  height: 100px;
-  border-radius: 140px;
+  margin-top: -2rem;
+  top: 2rem;
+  width: 8rem;
+  height: 5rem;
+  border-radius: 5rem;
 }
 </style>

components/Home/Reviews.vue

@@ -1,42 +1,65 @@
 <template>
-
-  <v-container>
-    <div class="container">
+  <LayoutContainer>
+    <div class="container-color">
       <h6 class="small-title">Avis Clients</h6>
 
-      <h1 class="title">
-        C'est vous qui le dites
-      </h1>
+      <h1 class="title-review">C'est vous qui le dites</h1>
+    </div>
 
+    <div class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
         <v-col cols="12" md="6" lg="4">
-          <v-card class="review-card mx-auto">
+          <v-card class="review-card left mx-auto">
+            <v-avatar size="80" class="profile-img">
+              <v-img src="/images/reviews/photo1.jpg"></v-img>
+            </v-avatar>
             <v-card-title>
-              <v-avatar size="50">
-                <v-img src="/images/reviews/1.jpg"></v-img>
-              </v-avatar>
-              <span class="review-name">John Doe</span>
+              <span class="review-name">John Doe left</span>
             </v-card-title>
 
             <v-card-text>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
+              <p class="description-review">
+                C'est un logiciel très bien conçu et efficace avec une équipe
+                ouverte, dynamique et à l'écoute. L’assistance est très
+                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
+                qui est fort appréciable.
+              </p>
             </v-card-text>
+
+            <!-- card footer-->
+            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+
+            <small class="structure"
+              >Conservatoire Musique & Danse Sens (78)</small
+            >
           </v-card>
         </v-col>
 
         <v-col cols="12" md="6" lg="4">
-          <v-card class="review-card mx-auto">
+          <v-card class="review-card right mx-auto">
+            <v-avatar size="80" class="profile-img">
+              <v-img src="/images/reviews/photo1.jpg"></v-img>
+            </v-avatar>
             <v-card-title>
-              <v-avatar size="50">
-                <v-img src="/images/reviews/2.jpg"></v-img>
-              </v-avatar>
-              <span class="review-name">Jane Doe</span>
+              <span class="review-name">John Doe</span>
             </v-card-title>
 
             <v-card-text>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
+              <p class="description-review">
+                C'est un logiciel très bien conçu et efficace avec une équipe
+                ouverte, dynamique et à l'écoute. L’assistance est très
+                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
+                qui est fort appréciable.
+              </p>
             </v-card-text>
+
+            <!-- card footer-->
+            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+
+            <small class="structure"
+              >Conservatoire Musique & Danse Sens (78)</small
+            >
           </v-card>
         </v-col>
       </v-row>
@@ -44,80 +67,205 @@
       <v-row justify="center">
         <!-- v-card with client review -->
         <v-col cols="12" md="6" lg="4">
-          <v-card class="review-card mx-auto">
+          <v-card class="review-card left mx-auto">
+            <v-avatar size="80" class="profile-img">
+              <v-img src="/images/reviews/photo1.jpg"></v-img>
+            </v-avatar>
             <v-card-title>
-              <v-avatar size="50">
-                <v-img src="/images/reviews/1.jpg"></v-img>
-              </v-avatar>
-              <span class="review-name">John Doe</span>
+              <span class="review-name">John Doe left</span>
             </v-card-title>
 
             <v-card-text>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
+              <p class="description-review">
+                C'est un logiciel très bien conçu et efficace avec une équipe
+                ouverte, dynamique et à l'écoute. L’assistance est très
+                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
+                qui est fort appréciable.
+              </p>
             </v-card-text>
+
+            <!-- card footer-->
+            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+
+            <small class="structure"
+              >Conservatoire Musique & Danse Sens (78)</small
+            >
           </v-card>
         </v-col>
 
         <v-col cols="12" md="6" lg="4">
-          <v-card class="review-card mx-auto">
+          <v-card class="review-card right mx-auto">
+            <v-avatar size="80" class="profile-img">
+              <v-img src="/images/reviews/photo1.jpg"></v-img>
+            </v-avatar>
             <v-card-title>
-              <v-avatar size="50">
-                <v-img src="/images/reviews/2.jpg"></v-img>
-              </v-avatar>
-              <span class="review-name">Jane Doe</span>
+              <span class="review-name">John Doe</span>
             </v-card-title>
 
             <v-card-text>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
+              <p class="description-review">
+                C'est un logiciel très bien conçu et efficace avec une équipe
+                ouverte, dynamique et à l'écoute. L’assistance est très
+                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
+                qui est fort appréciable.
+              </p>
             </v-card-text>
+
+            <!-- card footer-->
+            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+
+            <small class="structure"
+              >Conservatoire Musique & Danse Sens (78)</small
+            >
           </v-card>
         </v-col>
+        <h2 class="title">Plus de 5 000 structures nous font confiance</h2>
       </v-row>
+      <div class="carousel">
+    <v-carousel
+      cycle
+      height="200"
+      hide-delimiters
+      
+    >
+      <v-carousel-item
+        v-for="(item, i) in items"
+        :key="i"
+        :src="item.src"
+      ></v-carousel-item>
+    </v-carousel>
+  </div>
+    </div>
+  </LayoutContainer>
+</template>
 
-        <h3 class="title">
-          Plus de 5 000 structures nous font confiance
-        </h3>
+<script setup>
 
-        <!-- caroussel en bandau avec le logo des structures qui nous font confiance-->
-        <v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
-          <v-carousel-item
-            v-for="(item,i) in items"
-            :key="i"
-            :src="item.src"
-          ></v-carousel-item>
-        </v-carousel>
 
-    </div>
-  </v-container>
+const items = ref([
+  { src: "/images/reviews/review1.png" },
+  { src: "/images/reviews/review2.png" },
+  { src: "/images/reviews/review3.png" },
+  { src: "/images/reviews/review4.png" },
+  { src: "/images/reviews/review5.png" },
+]);
 
-</template>
+</script>
 
-<style scoped> 
+<style scoped>
+
+/** add ombre in carousel */
+.carousel{
+  background-color: white;
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+  border-radius: 20px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+.container-green {
+  background-color: #0e2d32;
+  padding: 2rem;
+  height: 70rem;
+}
+
+.left {
+  left: 3rem;
+  bottom: 15rem;
+}
 
+.right {
+  bottom: 9rem;
+  right: 5rem;
+}
+.status {
+  margin-top: 1rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-left: 2rem;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+
+  color: #071b1f;
+}
+
+.structure {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  margin-left: 2rem;
+  display: flex;
+  align-items: center;
+
+  color: #071b1f;
+  margin-bottom: 1rem;
+}
+.description-review {
+  font-family: "Barlow";
+  line-height: 1.5rem;
+  color: #071b1f;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  line-height: 20px;
+}
+
+.profile-img {
+  border-radius: 50%;
+  width: 3rem;
+  height: 4rem;
+  margin-left: 2rem;
+}
+.container-color {
+  background: #f8f8f8;
+  height: 25rem;
+}
 .review-card {
-  max-width: 500px;
-  margin: 10px;
-  text-align: center;
+  width: 18rem;
+  height: 25rem;
 }
 
 .review-name {
-  margin-left: 15px;
-  font-size: 1.2em;
+  margin-left: 1rem;
   font-weight: 500;
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 1rem;
+  color: #e34461;
 }
 
 .small-title {
   font-family: "Barlow";
   font-style: normal;
   text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding-top: 3rem;
 }
 
-.title{
+.title-review {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 2rem;
+  line-height: 42px;
+  text-align: center;
+  color: #071b1f;
+  margin-left: 30rem;
+  margin-right: 30rem;
+}
+.title {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 400;
-  font-size: 34px;
-  line-height: 38px;
+  font-size: 2rem;
+  line-height: 42px;
   text-align: center;
+  color: #ffffff;
+  margin-left: 30rem;
+  margin-right: 30rem;
 }
-</style>
+</style>

components/Home/Solution.vue

@@ -1,158 +1,293 @@
 <template>
-  <v-container>
-    <div class="container">
-      <p class="text-center solution-subtitle">3 solutions</p>
-      <h3 class="text-center title">
-        Trouvez la solution <br />
-        faite pour vous
-      </h3>
-
-      <v-row>
-        <v-col cols="4">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">Artist</h2>
-          <hr />
-          <p class="description-logiciel">
-            Orchestre, chorales, compagnies de danse, théâtre et cirque
-          </p>
+  <LayoutContainer>
+    <p class="text-center solution-subtitle">3 solutions</p>
+    <h3 class="text-center title">
+      Trouvez la solution <br />
+      faite pour vous
+    </h3>
 
-          <v-row>
-            <v-img src="/images/solutions/artist.jpg" class="solution-img">
+    <v-row>
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">Artist</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Orchestre, chorales, compagnies de danse, théâtre et cirque
+        </p>
+
+        <v-row>
+          <div class="artist-image">
+            <v-img
+              src="/images/OpenTalent_LogoNoir_Jaune_white.png"
+              class="logo"
+            >
             </v-img>
-          </v-row>
+          </div>
+        </v-row>
 
-          <v-row>
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
-          </v-row>
-        </v-col>
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
 
-        <v-col cols="4">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">Manager</h2>
-          <hr />
-          <p class="description-logiciel">
-            Orchestre, chorales, compagnies de danse, théâtre et cirque
-          </p>
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
 
-          <v-row>
-            <v-img src="/images/solutions/manager.png" class="solution-img">
-            </v-img>
-          </v-row>
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">Manager</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Fédérations, confédérations et collectivités
+        </p>
 
+        <v-row>
           <v-row>
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
+            <div class="manager-image">
+              <v-img
+                src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                class="logo"
+              >
+              </v-img>
+              <div class="overlay">
+                <button class="discover-button">Découvrir</button>
+              </div>
+            </div>
           </v-row>
-        </v-col>
+        </v-row>
 
-        <v-col cols="4">
-          <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">School</h2>
-          <hr />
-          <p class="description-logiciel">
-            Orchestre, chorales, compagnies de danse, théâtre et cirque
-          </p>
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
 
-          <v-row>
-            <v-img src="/images/solutions/artist.jpg" class="solution-img">
-            </v-img>
-          </v-row>
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
 
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">School</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Petits et grands établissements d'enseignement artistique
+        </p>
+
+        <v-row>
           <v-row>
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-                <li>Gestion des membres</li>
-              </ul>
-            </v-col>
+            <div class="school-image">
+              <v-img src="/images/logo_school_white.png" class="logo"> </v-img>
+            </div>
           </v-row>
-        </v-col>
-      </v-row>
-    </div>
+        </v-row>
+
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
 
-    <div class="white-content"></div>
-  </v-container>
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
 
 <style scoped>
-.white-content {
-  background-color: white;
-  height: 100px;
-  opacity: 0.5;
+.discover-button {
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-family: "Barlow";
+  font-size: 1.2rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  border-radius: 2rem;
+  cursor: pointer;
+}
+.logo {
+  width: 5rem;
+  height: 4rem;
+  margin-top: 13rem;
+  margin-left: 13rem;
 }
 
-.solution-img {
-  width: 500px;
-  height: 300px;
+.list-solutions {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.5rem;
 }
 
-.description-logiciel {
+.details-solution {
+  font-size: 0.5rem;
+  margin-top: 0.5rem;
+  width: 10rem;
+  margin-left: 1rem;
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: 0.7rem;
+  line-height: 18px;
+  color: #091d20;
+}
+
+.bar {
+  color: #c3e5e7;
+}
+.artist-image {
+  position: relative;
+  background: url(/images/solutions/artist.jpg);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 2rem;
+  margin-left: 0.9rem;
+}
+
+.artist-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.artist-image:hover::before {
+  opacity: 1;
+}
+.manager-image {
+  position: relative;
+  background: url(/images/solutions/manager.png);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 4rem;
+  margin-left: 2rem;
+}
+
+.manager-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.manager-image:hover::before {
+  opacity: 1;
+}
+
+.school-image {
+  position: relative;
+  background: url(/images/solutions/school.jpg);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 4rem;
+  margin-left: 1.5rem;
+}
 
-  /* or 125% */
+.school-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.school-image:hover::before {
+  opacity: 1;
+}
 
-  /* Vert 5 */
+.col-info:first-child {
+  margin-left: 9rem;
+}
+
+.col-info {
+  width: 4rem;
+  margin-left: 2rem;
+}
+.solution-img {
+  width: 15rem;
+  height: 15rem;
+  object-fit: cover;
+  margin-top: 2rem;
+}
+
+.description-logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+  margin-top: 1rem;
   color: #eff9fb;
 }
 
 .logiciel-name {
-  /* H2 Headline */
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
   font-size: 30px;
-  line-height: 34px;
-
-  /* identical to box height, or 113% */
-
-  /* Vert 20 */
+  line-height: 2rem;
   color: #c3e5e7;
+  margin-bottom: 1rem;
 }
 
 .opentalent-small {
@@ -161,38 +296,34 @@
   font-weight: 600;
   font-size: 10px;
   line-height: 15px;
-
-  /* or 150% */
   letter-spacing: 0.18em;
   text-transform: uppercase;
-
-  /* NEUTRAL - BLANC */
   color: #ffffff;
 }
 .title {
-  /* H2 Headline */
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
+  font-weight: 00;
+  font-size: 2rem;
   line-height: 42px;
-
-  /* or 100% */
   text-align: center;
-
   color: #ffffff;
+  margin-bottom: 3rem;
 }
 
 .solution-subtitle {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 600;
   font-size: 15px;
-  line-height: 68px;
+  line-height: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
   color: #c1eff0;
 }
 .container {
-  width: 1600px;
   background: #0e2d32;
+  margin-bottom: 20rem;;
+  height: 30rem;
+  position: relative;
 }
 </style>

components/Layout/Caroussel.vue

@@ -165,13 +165,13 @@ const carouselItems = ref([
 .description {
   text-align: left;
   width: 30%;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 .logo-school {
   max-width: 35vw;
   height: 25vh;
   margin-top: 10px;
-  margin-bottom: 5vh;
+  margin-bottom: 2vh;
 }
 
 .image {

components/Layout/Container.vue

@@ -10,7 +10,7 @@
 
 <style scoped>
 .container{
-  max-width: 1500px;
+  max-width: 1400px;
 }
 
 </style>

components/Layout/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="container">
+  <LayoutContainer>
     <div class="activities">
       <v-row>
         <v-col cols="4">
@@ -47,65 +47,65 @@
           </v-col>
 
           <v-col cols="2">
-            <v-row>Liens Rapides</v-row>
+            <v-row class="title-link">Liens Rapides</v-row>
             <v-row>
-                <p>A propos</p>
+                <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>Nos logiciels</p>
+              <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>Nos actus</p>
+              <small class="small-link">A propos</small>
             </v-row>
           </v-col>
 
           <v-col cols="2">
-            <v-row>Informations</v-row>
+            <v-row class="title-link">Liens Rapides</v-row>
             <v-row>
-                <p>FAQ</p>
+              <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>Nous rejoindre</p>
+              <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>Press</p>
+              <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>CGV</p>
+              <small class="small-link">A propos</small>
             </v-row>
           </v-col>
 
           <v-col cols="2">
-            <v-row> Espace client </v-row>
+            <v-row class="title-link">Liens Rapides</v-row>
             <v-row>
-                <p>Mon compte</p>
+              <small class="small-link">A propos</small>
             </v-row>
             <v-row>
-                <p>Nous contacter</p>
+              <small class="small-link">A propos</small>
             </v-row>
           </v-col>
 
           <v-col cols="3">
-            <v-row> Suivez nous </v-row>
+            <v-row class="title-link">Liens Rapides</v-row>
 
             <v-row>
               <v-col cols="2">
-                <v-icon left class="fab fa-facebook"></v-icon>
+                <v-icon left class=" fab fa-facebook"></v-icon>
               </v-col>
 
               <v-col cols="2">
-                <v-icon left class="fab fa-linkedin"></v-icon>
+                <v-icon left class=" fab fa-linkedin"></v-icon>
               </v-col>
 
               <v-col cols="2">
-                <v-icon left class="fab fa-youtube"></v-icon>
+                <v-icon left class=" fab fa-youtube"></v-icon>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </div>
     </div>
-  </v-container>
+  </LayoutContainer>
 </template>
 
 <script>
@@ -113,24 +113,47 @@ import "@fortawesome/fontawesome-free/css/all.css";
 </script>
 
 <style scoped>
+
+/** icon 2ieme and 3eme child */
+.icon:nth-child(2){
+  margin-left: 10px;
+}
+.title-link {
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 1rem;
+line-height: 20px;
+margin-bottom: 1rem;
+}
+/** small link : margin bottom + color gris + small */
+.small-link {
+  margin-bottom: 0.5rem;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.7rem;
+line-height: 20px;
+
+/* identical to box height, or 143% */
+
+color: #FFFFFF;
+}
 .container {
-  width: 1600px;
   background: #091d20;
-  height: 600px;
   color: aliceblue;
 }
 
 .activities {
-  height: 186px;
-  /**passer à 116 après */
+  height: 12rem;
   background: #091d20;
   border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
 }
 
 .footer {
-  height: 604px;
-  margin-top: 90px;
+  margin-top: 2rem;
+  margin-bottom: 6rem;
 }
 
 .logo {
@@ -153,7 +176,7 @@ import "@fortawesome/fontawesome-free/css/all.css";
 }
 
 .text-logo-jaune {
-  margin-left: 187.74px;
+  margin-left: 10rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;

components/Layout/Navigation.vue

@@ -1,49 +1,47 @@
 <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"
-        src="/images/Opentalent.png"
-        width="294px"
-        height="49px"
-      ></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>
-    </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-icon left class="fas fa-user mr-4"></v-icon> Se connecter
-      </v-btn>
-      <v-btn class="btn 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>
-    </v-col>
-  </v-row>
+  <LayoutContainer>
+    <v-row class="menu-bar custom-row">
+      <!-- Column for the logo -->
+      <v-col cols="6" sm="4" md="2">
+        <v-img
+          class="logo"
+          src="/images/Opentalent.png"
+          width="294px"
+          height="49px"
+        ></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>
+      </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-icon left class="fas fa-user mr-4"></v-icon> Se connecter
+        </v-btn>
+        <v-btn class="btn 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>
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
 
-
-<script>
-</script>
+<script></script>
 
 <style scoped>
-.custom-row{
+.custom-row {
   padding: 0 10px; /* Réduisez cette valeur */
 }
 

pages/index.vue

@@ -1,11 +1,13 @@
 <template>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-
-    <LayoutNavigation> </LayoutNavigation>
-    <LayoutCaroussel> </LayoutCaroussel>
-
-
+  <LayoutNavigation> </LayoutNavigation>
+  <LayoutCaroussel> </LayoutCaroussel>
+  <HomePromotion></HomePromotion>
+  <HomeSolution></HomeSolution>
+  <HomeEventAgenda></HomeEventAgenda>
+  <HomeReviews></HomeReviews>
+  <HomeNews></HomeNews>
+  <HomeHelp></HomeHelp>
+  <LayoutFooter> </LayoutFooter>
 </template>
 
 <script></script>