refactor HomeHelp component

.nuxtignore

@@ -0,0 +1,2 @@
+.git/*
+coverage

components/Common/Carousel/Clients.vue

@@ -65,7 +65,6 @@ const goToNext = () => {
 };
 </script>
 
-<!--suppress SassScssResolvedByNameOnly -->
 <style scoped lang="scss">
 .v-row {
   display: flex;

components/Common/ReviewCard.vue

@@ -59,7 +59,6 @@
 <script setup>
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
-import { ref } from "vue";
 
 const carousel = ref(null);
 
@@ -156,7 +155,7 @@ const props = defineProps({
   margin-right: 1rem;
   margin-top: 3rem;
   text-align: center;
-  
+
 }
 @media (min-width:2100px) {
   .review-description {
@@ -185,7 +184,7 @@ const props = defineProps({
   max-height: 450px;
   margin-top: 2rem;
   margin-bottom: 0.6rem;
-  
+
 }
 
 .card-container {
@@ -193,8 +192,8 @@ const props = defineProps({
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  
-  
+
+
 }
 
 .container-green {

components/Home/Help.vue

@@ -1,180 +1,171 @@
 <template>
   <LayoutContainer>
-    <v-row class="mt-12">
-      <v-container>
-        <div :class="!mdAndDown ? 'help-container' : 'help-container-md'" >
-          <v-col cols="12" lg="6" md="12" sm="12">
-            <v-img  :class="!mdAndDown ? 'help-img' : 'help-img-md'" src="/images/Home_logiciel/Opentalent_a_votre_service.png" />
-          </v-col>
-
-            <v-col cols="12" lg="6" md="12" sm="12">
-            <h4  :class="!mdAndDown ? 'subtitle-team ml-10': 'subtitle-team-md'">
-              Notre équipe est à vos côtés 
-              pour vous guider
-            </h4>
-
-            <p :class="!mdAndDown ? 'need-help ml-10' : 'need-help-md'">
-              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="!mdAndDown ? 'details ml-10' : 'details-md'">
-                <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>
-              </ul>
-            </v-row>
-
-            <v-row class="ml-10">
-              <a href="https://ressources.opentalent.fr/" target="_blank">
-                <v-btn :class="!mdAndDown ? 'button-faq' : 'button-faq-md '">Consulter la FAQ</v-btn>
-              </a>
-            </v-row>
-          </v-col>
-
-        </div>
-      </v-container>
+    <v-row >
+      <v-col cols="12" lg="6" class="col">
+        <v-img src="/images/Home_logiciel/Opentalent_a_votre_service.png" />
+      </v-col>
+
+      <v-col cols="12" lg="6" class="col">
+        <h4>
+          Notre équipe est à vos côtés
+          pour vous guider
+        </h4>
+
+        <p>
+          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>
+            <li>
+              Ouvert du lundi au vendredi de 8h15 à 17h45
+            </li>
+            <li>
+              Support joignable par mail
+            </li>
+            <li>
+              De nombreux articles tutoriels accessibles 24h/24
+            </li>
+          </ul>
+        </v-row>
+
+        <v-row>
+          <v-btn
+            href="https://ressources.opentalent.fr/"
+            target="_blank"
+            class="button-faq"
+          >
+            Consulter la FAQ
+          </v-btn>
+        </v-row>
+      </v-col>
     </v-row>
   </LayoutContainer>
 </template>
-<script setup>
-import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify";
-const { smAndDown, mdAndDown} = useDisplay();
-</script>
-
-<style scoped>
 
-.help-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
+<script setup lang="ts">
+  import { useDisplay } from "vuetify";
 
-.help-container-md {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
+  const { mdAndDown} = useDisplay();
+</script>
 
+<style scoped lang="scss">
 
-.button-faq {
-  width: 195px;
-  height: 53px;
-  background: #64afb7;
-  border-radius: 6px;
-  color: white;
-  padding: 19px 28px;
-  gap: 9px;
-  margin-left: auto;
-  margin-right: auto;
-}
+.v-container {
+  margin: 64px auto 24px auto;
+  padding: 16px;
+  max-width: 95%;
 
-.button-faq-md {
-  width: 195px;
-  height: 53px;
-  background: #64afb7;
-  border-radius: 6px;
-  color: white;
-  padding: 19px 28px;
-  gap: 9px;
-  margin-left: 3rem;
-  margin-top: 2rem;
-}
+  .col {
+    padding: 0 6px;
+    display: flex;
+    flex-direction: column;
+  }
 
-.details {
-  margin-top: 20px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  color: #0e2d32;
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-}
+  .col:first-child {
+    align-items: center;
+  }
 
-.details-md {
-  margin-top: 20px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  color: #0e2d32;
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  margin-left: auto;
-  margin-right: auto;
-  width: 30rem;
+  .col:nth-child(2) {
+    padding: 60px;
+    justify-content: center;
+    align-items: self-start;
+  }
 }
 
-.detail-item {
+li {
   margin-left: 28px;
   margin-bottom: 15px;
   color: #0e2d32;
   font-size: 1.1rem;
 }
 
-.need-help {
-  width: 25rem;
-  font-family: "Barlow";
+.v-img {
+  width: 50rem;
+  border-radius: 3rem;
+}
+
+h4 {
+  margin-bottom: 0.7rem;
+  font-family: "Barlow", serif;
   font-style: normal;
-  font-weight: 300;
-  font-size: 1.1rem;
-  line-height: 1.4rem;
-  color: #0e2d32;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 34px;
+  width: 25rem;
 }
 
-.need-help-md {
-  width: 30rem;
-  font-family: "Barlow";
+p {
+  width: 25rem;
+  font-family: "Barlow", serif;
   font-style: normal;
   font-weight: 300;
   font-size: 1.1rem;
   line-height: 1.4rem;
   color: #0e2d32;
-  width: 30rem;
-  margin-left: auto;
-  margin-right: auto;
 }
 
-.help-img {
-  width: 50rem;
-  border-radius: 3rem;
+ul {
+  margin-top: 20px;
+  max-height: 160px;
+  font-family: "Barlow", serif;
+  font-style: normal;
+  font-weight: 500;
+  color: #0e2d32;
+  font-size: 1.2rem;
+  line-height: 1.6rem;
 }
 
-.help-img-md {
-  width: 40rem;
-  border-radius: 3rem;
+.button-faq {
+  width: 195px;
+  height: 53px;
+  background: #64afb7;
+  border-radius: 6px;
+  color: white;
+  padding: 19px 28px;
+  gap: 9px;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 4rem;
-}
-
-.subtitle-team {
-  margin-bottom: 0.7rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 2rem;
-  line-height: 34px;
-  width: 25rem;
 }
 
-.subtitle-team-md {
-  margin-bottom: 0.7rem;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 2rem;
-  line-height: 34px;
-  text-align: left;
-  width: 30rem;
-  margin-left: auto;
-  margin-right: auto;
+@media (max-width: 960px) {
+  .v-img {
+    width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4rem;
+  }
+
+  h4 {
+    font-size: 2rem;
+    text-align: left;
+    width: 30rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  p {
+    width: 30rem;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 1.1rem;
+    line-height: 1.4rem;
+    color: #0e2d32;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ul {
+    margin-left: auto;
+    margin-right: auto;
+    width: 30rem;
+  }
+
+  .button-faq {
+    margin-left: 3rem;
+    margin-top: 2rem;
+  }
 }
 </style>

components/Home/Reviews.vue

@@ -141,38 +141,34 @@
       </v-row>
 
       <!-- Partie 1 : Carrousel logos clients -->
-      <div class="content-review">
-        <CommonCarouselClients
-          :items="items"
-          color="#fff"
-        />
+      <div class="carousel-clients-container">
+        <CommonCarouselClients :items="items" />
       </div>
     </div>
 
     <!-- Petits écrans -->
-    <div v-else>
+    <div v-else class="container-sm">
       <v-row>
         <v-col cols="12">
-          <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCaroussel">
+          <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCarousel">
             <Slide v-for="(card, index) in cards" :key="index">
-              <div class="card-sm">
-                <v-card>
-                  <v-card-title>
-                    <span class="review-name">{{ card.name }}</span>
-                  </v-card-title>
-
-                  <v-card-text>
-                    <p class="description-review">
-                      {{ card.review }}
-                    </p>
-                  </v-card-text>
-                  <div class="card-footer">
-                    <small>{{ card.status }}</small>
-
-                    <small>{{ card.structure }}</small>
-                  </div>
-                </v-card>
-              </div>
+              <v-card>
+                <v-card-title>
+                  <span class="review-name">{{ card.name }}</span>
+                </v-card-title>
+
+                <v-card-text>
+                  <p class="description-review">
+                    {{ card.review }}
+                  </p>
+                </v-card-text>
+
+                <div class="card-footer">
+                  <small>{{ card.status }}</small>
+
+                  <small>{{ card.structure }}</small>
+                </div>
+              </v-card>
             </Slide>
           </Carousel>
         </v-col>
@@ -180,12 +176,12 @@
 
       <v-row class="justify-center align-center">
         <v-col class="d-flex justify-space-around align-center">
-          <i
-            style="cursor: pointer"
-            class="fa-solid fa-arrow-left-long"
-            @click="goPrevious"
+          <v-btn
+            icon="fas fa-arrow-left-long"
+            @click="goToPrevious"
           />
-          <div class="custom-controls">
+
+          <div class="carousel-controls">
             <div
               v-for="(item, index) in cards"
               :key="index"
@@ -193,10 +189,10 @@
               class="ml-6"
             />
           </div>
-          <i
-            style="cursor: pointer"
-            class="fa-solid fa-arrow-right-long"
-            @click="goNext"
+
+          <v-btn
+            icon="fas fa-arrow-right-long"
+            @click="goToNext"
           />
         </v-col>
       </v-row>
@@ -205,37 +201,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
+import { Review } from "~/types/interface";
 
-const { smAndDown, mdAndUp } = useDisplay();
+const { mdAndUp } = useDisplay();
 
-const reviewCaroussel = ref(null);
+const reviewCarousel: Ref<typeof Carousel | null> = ref(null);
 
 const state = ref({
   activeIndex: 0,
 });
 
-const goNext = () => {
-  if (reviewCaroussel.value) {
-    reviewCaroussel.value.next();
-    state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
-  }
-};
-
-const goPrevious = () => {
-  if (reviewCaroussel.value) {
-    reviewCaroussel.value.prev();
-    state.value.activeIndex =
-      state.value.activeIndex - 1 < 0
-        ? cards.length - 1
-        : state.value.activeIndex - 1;
-  }
-};
+const goToNext = () => {
+  reviewCarousel.value!.next();
+  state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
+}
 
-const cards = [
+const goToPrevious = () => {
+  reviewCarousel.value!.prev();
+  state.value.activeIndex =
+    state.value.activeIndex - 1 < 0
+      ? cards.length - 1
+      : state.value.activeIndex - 1;
+}
+
+const cards: Array<Review> = [
   {
     name: "Patrice CATHELIN",
     review:
@@ -266,7 +258,7 @@ const cards = [
   },
 ];
 
-const items = ref([
+const items: Ref<Array<{ src: string }>> = ref([
   { src: "/images/reviews/school/review1.svg" },
   { src: "/images/reviews/school/review2.png" },
   { src: "/images/reviews/school/review3.png" },
@@ -307,6 +299,7 @@ const items = ref([
   @media (max-width: 600px) {
     margin-bottom: 24px;
   }
+
 }
 
 .container-2 {
@@ -374,61 +367,53 @@ const items = ref([
         }
       }
     }
-  }
-}
-
-
-
-
-
-
 
+    .left {
+      bottom: 12rem;
+      position: relative;
+    }
 
-.custom-controls div {
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 50%;
-  background-color: grey;
-  cursor: pointer;
-  margin-bottom: 0.5rem;
-}
+    .right {
+      position: relative;
+      bottom: 7rem;
+    }
+  }
 
-.custom-controls {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
+  .carousel-clients-container {
+    margin-top: -7rem;
+  }
 }
 
-.custom-controls .active-control {
-  background-color: black;
-  margin-right: 10px;
-}
+.container-sm {
+  .v-card {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 
-.card-sm {
-  width: 300px;
-  height: 800px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.v-container {
-  padding: 0 !important;
-}
-.content-review {
-  margin-top: -7rem;
-}
+  .carousel-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
 
-.left {
-  bottom: 12rem;
-  position: relative;
-}
+    div {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 50%;
+      background-color: grey;
+      cursor: pointer;
+      margin-bottom: 0.5rem;
+    }
 
-.right {
-  position: relative;
-  bottom: 7rem;
+    .active-control {
+      background-color: black;
+      margin-right: 10px;
+    }
+  }
 }
 
 
-
 </style>

pages/poc.vue

@@ -1,3 +1,4 @@
+<!-- TODO: delete -->
 <template>
   <Carousel>
     <Slide v-for="slide in carouselItems" :key="slide" :items-to-show="1">

types/interface.d.ts

@@ -39,3 +39,10 @@ interface SolutionItem {
   class: string;
   solutions: string[];
 }
+
+interface Review {
+  name: string,
+  review: string
+  status: string,
+  structure: string,
+}