refactor HomeSolution component

components/Home/Solution.vue

@@ -1,64 +1,74 @@
+<!--
+Section "Solutions" de la page d'accueil
+-->
+
 <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" />
-      <p class="text-center solution-subtitle">3 solutions</p>
+      <!-- TODO: factoriser avec HomePromotion -->
+      <v-icon
+        size="6"
+        icon="fas fa-circle"
+      />
+      <h5>
+        3 solutions
+      </h5>
     </div>
-    <h3
-      class="text-center title"
-      :style="smAndDown ? '' : 'margin-bottom: 3rem'"
-    >
+
+    <h3 class="text-center" >
       Trouvez la solution faites pour vous
     </h3>
 
-    <v-row class="row-custom">
+    <v-row class="solutions">
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
         cols="4"
-        class="col-info"
       >
         <v-container>
           <div class="d-flex justify-center align-left flex-column">
-            <small class="opentalent-small">Opentalent</small>
-            <h2 class="logiciel-name">
+            <small>
+              Opentalent
+            </small>
+
+            <h2>
               {{ solution.name }}
             </h2>
-            <hr class="bar" />
-            <p class="description-logiciel">
+
+            <v-divider thickness="2"/>
+
+            <p>
               {{ solution.description }}
             </p>
 
             <nuxt-link :to="solution.link">
               <v-row>
-                <div :class="solution.class" class="image-container">
-                  <v-img :src="solution.image" class="logo" />
-                  <v-btn v-on:mouseover="mouseover" class="view-button"
-                    >Découvrir</v-btn
-                  >
+                <div :class="['image-container', solution.class]" >
+                  <v-img :src="solution.image" />
+                  <v-btn>Découvrir</v-btn>
                 </div>
               </v-row>
             </nuxt-link>
 
             <v-row>
-              <div class="list-container">
+              <div class="details">
                 <v-col cols="6">
-                  <ul class="list-solutions">
+                  <ul>
                     <li
                       v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                      :key="'sol-' + i"
-                      class="details-solution"
+                      :key="i"
                     >
                       {{ sol }}
                     </li>
                   </ul>
                 </v-col>
+
                 <v-col cols="6">
-                  <ul class="list-solutions">
+                  <ul>
                     <li
                       v-for="(sol, i) in solution.solutions.slice(4)"
-                      :key="'sol-' + i"
-                      class="details-solution"
+                      :key="i"
                     >
                       {{ sol }}
                     </li>
@@ -70,32 +80,22 @@
         </v-container>
       </v-col>
     </v-row>
-    <v-container>
+
+    <v-container class="footer">
       <v-row >
         <v-col cols="12">
-          <p style="text-align: right; font-size: 12px;">* en option</p>
+          <p>* en option</p>
         </v-col>
       </v-row>
     </v-container>
   </LayoutContainer>
 </template>
 
-<script setup>
-import { ref, onMounted } from "vue";
-import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
-
-const carousel = ref(null);
+<script setup lang="ts">
 
-const goPrevious = () => {
-  carousel.value.prev();
-};
+import { SolutionItem } from "~/types/interface";
 
-const goNext = () => {
-  carousel.value.next();
-};
-const solutions = [
+const solutions: Array<SolutionItem> = [
   {
     name: "Artist",
     description: "Orchestres, chorales, compagnies de danse, théâtre et cirque",
@@ -148,46 +148,11 @@ const solutions = [
     ],
   },
 ];
-onMounted(() => {
-  setTimeout(() => goNext(), 0);
-});
 </script>
 
-<style scoped>
-.row-custom {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.list-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.image-container {
-  position: relative;
-}
+<style scoped lang="scss">
 
-.view-button {
-  position: absolute;
-  z-index: 100;
-  bottom: 40%;
-  left: 50%;
-  transform: translateX(-50%);
-  display: none;
-  font-size: 0.8rem;
-  border-radius: 6px;
-  background: var(--Vert-60, #64afb7);
-  color: white;
-}
-
-.image-container:hover .view-button {
-  display: block;
-
-}
-
-.solution-subtitle {
+h5 {
   font-size: 1rem;
   line-height: 1rem;
   margin-top: 1rem;
@@ -196,7 +161,14 @@ onMounted(() => {
   letter-spacing: 2.16px;
   text-transform: uppercase;
 }
-.title {
+
+.fa-circle{
+  margin-top: 1rem;
+  color: #ffffff;
+  margin-right: 1rem;
+}
+
+h3 {
   margin-top: 0.5rem;
   font-size: 2.8rem;
   line-height: 42px;
@@ -205,243 +177,152 @@ onMounted(() => {
   width: 100%;
 }
 
-.logo {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 200px;
-}
-
-.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;
-  cursor: pointer;
-}
-
-.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;
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 4rem;
-  height: 4rem;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 2rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.manager-image:hover::before {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.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;
-  cursor: pointer;
-}
-
-.description-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 0.9rem;
-  line-height: 0.9rem;
-  margin-top: 1rem;
-  color: #eff9fb;
-  width: 20rem;
-}
-
-.icon-title {
-  margin-top: 1rem;
-  color: #ffffff;
-}
-
-.details-solution {
-  font-size: 0.8rem;
-  width: 10rem;
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  line-height: 18px;
-  color: #091d20;
-}
-.list-solutions {
-  margin-top: 0.9rem;
-  font-size: 0.5rem;
-}
-
-.bar {
-  color: #c3e5e7;
-  width: 20rem;
-}
-
-
-.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;
-  cursor: pointer;
-}
-
-
-.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;
-  cursor: pointer;
-}
-.artist-image {
-  position: relative;
-  background: url(/images/solutions/artist.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 21rem;
-  height: 300px;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.school-image{
-  background: url(/images/solutions/school.jpg);
-
-}
-.manager-image {
-  position: relative;
-  background: url(/images/solutions/manager.png);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 21rem;
-  height: 300px;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
-  margin-bottom: 1rem;
-
-}
-
-.school-image, .manager-image .artist-image {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 350px;
-  height: 300px;
-  margin-top: 2rem;
-  margin-left: 0.9rem;
-  margin-bottom: 1rem;
-
-}
-
-.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;
-  cursor: pointer;
+@media (min-width: 600px) {
+  h3 {
+    margin-bottom: 3rem
+  }
 }
 
-.description-logiciel {
-  font-size: 1.3rem;
-  line-height: 1.5rem;
-  margin-top: 1rem;
-  color: #eff9fb;
-}
-
-.logiciel-name {
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 2rem;
-  color: #c3e5e7;
-  margin-bottom: 1rem;
-}
-
-.opentalent-small {
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #ffffff;
-}
+.v-row.solutions {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
 
-.container {
-  background: #0e2d32;
-  margin-bottom: 15rem;
-  height: 36rem;
-  position: relative;
+  small {
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 15px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: #ffffff;
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: 30px;
+    line-height: 2rem;
+    color: #c3e5e7;
+    margin-bottom: 1rem;
+  }
+
+  .v-divider {
+    color: #c3e5e7;
+    width: 20rem;
+    opacity: 0.7;
+  }
+
+  p {
+    font-family: "Barlow", serif;
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+    margin-top: 1rem;
+    color: #eff9fb;
+    font-style: normal;
+    width: 20rem;
+  }
+
+  .image-container {
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    border-radius: 0 0 10px 10px;
+    width: 350px;
+    height: 300px;
+    margin-top: 2rem;
+    margin-left: 0.9rem;
+    margin-bottom: 1rem;
+
+    .v-img {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 200px;
+    }
+  }
+
+  .image-container::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: 0 0 10px 10px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .v-btn {
+    position: absolute;
+    z-index: 100;
+    bottom: 40%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+    font-size: 0.8rem;
+    border-radius: 6px;
+    background: var(--Vert-60, #64afb7);
+    color: white;
+  }
+
+  .image-container:hover .v-btn {
+    display: block;
+  }
+
+  .artist-image {
+    background: url(/images/solutions/artist.jpg);
+  }
+
+  .artist-image:hover::before {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  .school-image{
+    background: url(/images/solutions/school.jpg);
+  }
+
+  .school-image:hover::before {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  .manager-image {
+    background: url(/images/solutions/manager.png);
+  }
+
+  .manager-image:hover::before {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  .details {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ul {
+      margin-top: 0.9rem;
+      font-size: 0.5rem;
+    }
+
+    li {
+      font-family: "Barlow", serif;
+      font-size: 0.8rem;
+      width: 10rem;
+      margin-left: 1rem;
+      font-style: normal;
+      line-height: 18px;
+      color: #091d20;
+    }
+  }
+}
+
+.footer {
+  p {
+    text-align: right;
+    font-size: 12px;
+  }
 }
 </style>

types/interface.d.ts

@@ -30,3 +30,12 @@ interface CarouselItem {
   status: string,
   avatar: string
 }
+
+interface SolutionItem {
+  name: string;
+  description: string;
+  image: string;
+  link: string;
+  class: string;
+  solutions: string[];
+}