浏览代码

correction reviex card emplacement boutons

Maha Bouchiba 2 年之前
父节点
当前提交
2da2fcc97f
共有 3 个文件被更改,包括 48 次插入25 次删除
  1. 1 1
      components/Home/Promotion.vue
  2. 39 23
      components/Home/Reviews.vue
  3. 8 1
      components/Home/Solution.vue

+ 1 - 1
components/Home/Promotion.vue

@@ -3,7 +3,7 @@
     <v-col col="12" class="col-gestion">
       <div class="d-flex justify-center align-center flex-column">
         <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
-        <h5 class="subtitle">Découvrez les avantages de la solution</h5>
+        <h5 class="subtitle">GESTION ET PROMOTION</h5>
       </div>
       <v-row>
         <p class="text-gestion">

+ 39 - 23
components/Home/Reviews.vue

@@ -1,7 +1,10 @@
 <template>
   <LayoutContainer :overflow="false">
     <div class="container-color">
-      <h6 class="small-title">Avis Clients</h6>
+      <div class="d-flex justify-center align-center flex-column">
+        <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
+        <h6 class="small-title">Avis Clients</h6>
+      </div>
 
       <h1 class="title-review">C'est vous qui le dites</h1>
     </div>
@@ -119,16 +122,24 @@
             >
           </v-card>
         </v-col>
+      </v-row>
 
-        <h2 class="title">Plus de 5 000 structures nous font confiance</h2>
-        <div class="d-flex justify-center align-center">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
-          </div>
-          <div class="carousel-button" @click="goNext">
-            <i class="fas fa-chevron-right"></i>
+      <v-row>
+        <v-col cols="12">
+          <div class="d-flex justify-center align-center flex-column">
+            <h2 class="title text-center">
+              Plus de 5 000 structures nous font confiance
+            </h2>
+            <div class="d-flex justify-center align-center">
+              <div class="carousel-button" @click="goPrevious">
+                <i class="fas fa-chevron-left"></i>
+              </div>
+              <div class="carousel-button" @click="goNext">
+                <i class="fas fa-chevron-right"></i>
+              </div>
+            </div>
           </div>
-        </div>
+        </v-col>
       </v-row>
 
       <Carousel
@@ -164,6 +175,20 @@ const goNext = () => carousel.next();
 </script>
 
 <style scoped>
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 2rem;
+  line-height: 42px;
+  text-align: center;
+  color: #ffffff;
+  margin-left: 30rem;
+  margin-right: 30rem;
+}
+.icon-title {
+  margin-top: 1rem;
+  color: #64afb7;
+}
 .carousel-button i {
   color: #ffffff;
 }
@@ -218,7 +243,7 @@ const goNext = () => carousel.next();
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: .7rem;
+  font-size: 0.7rem;
   line-height: 15px;
   margin-left: 2rem;
   display: flex;
@@ -233,7 +258,7 @@ const goNext = () => carousel.next();
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: .8rem;
+  font-size: 0.8rem;
   margin-left: 2rem;
   display: flex;
   align-items: center;
@@ -264,7 +289,8 @@ const goNext = () => carousel.next();
 }
 .review-card {
   width: 21rem;
-  height: 25rem;
+  height: 100%;
+  margin-bottom: 2rem;
 }
 
 .review-name {
@@ -282,7 +308,7 @@ const goNext = () => carousel.next();
   text-align: center;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  padding-top: 3rem;
+  padding-top: 1rem;
 }
 
 .title-review {
@@ -295,14 +321,4 @@ const goNext = () => carousel.next();
   margin-left: 30rem;
   margin-right: 30rem;
 }
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 2rem;
-  line-height: 42px;
-  text-align: center;
-  color: #ffffff;
-  margin-left: 30rem;
-  margin-right: 30rem;
-}
 </style>

+ 8 - 1
components/Home/Solution.vue

@@ -1,6 +1,9 @@
 <template>
   <LayoutContainer :overflow="false">
+    <div class="d-flex justify-center align-center flex-column">
+        <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
     <p class="text-center solution-subtitle">3 solutions</p>
+  </div>
     <h3 class="text-center title">
       Trouvez la solution <br />
       faite pour vous
@@ -138,6 +141,10 @@
 </template>
 
 <style scoped>
+.icon-title {
+  margin-top: 1rem;
+  color: #ffffff;
+}
 .discover-button {
   background-color: transparent;
   border: none;
@@ -326,7 +333,7 @@
   font-style: normal;
   font-size: 15px;
   line-height: 1rem;
-  margin-top: 2rem;
+  margin-top: .5rem;
   margin-bottom: 1rem;
   color: #c1eff0;
 }