refactor the Avantages section

components/Common/Card/AvantageCard.vue

@@ -1,108 +0,0 @@
-<template>
-  <LayoutContainer>
-    <div class="advantage-card">
-      <div class="title-card">
-        <h4 class="description-card">{{ title }}</h4>
-        <span class="number-card" :style="{ color: dynamicNumberColor }">{{
-          number
-        }}</span>
-      </div>
-
-      <hr />
-      <div class="description-container">
-        <p class="details-card mr-4">
-          {{ description }}
-        </p>
-        <ul class="dynamic-list ml-4 mr-4">
-          <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
-        </ul>
-      </div>
-      <div class="image-container" :style="backgroundImageStyle"></div>
-    </div>
-  </LayoutContainer>
-</template>
-
-<script setup>
-
-const props = defineProps({
-  title: String,
-  number: String,
-  description: String,
-  image: String,
-  isMemberCMF: Boolean,
-  dynamicNumberColor: String,
-  listItems: Array,
-});
-
-const backgroundImageStyle = computed(() => ({
-  backgroundImage: `url(${props.image})`,
-  backgroundSize: "cover ",
-  backgroundPosition: "center 10%",
-  width: "100£",
-  height: "400px",
-}));
-</script>
-
-<style scoped>
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.description-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: 7rem;
-}
-
-.number-card {
-  font-weight: 500;
-  font-size: 1.3rem;
-}
-
-.description-card {
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1rem;
-  color: #0e2d32;
-}
-.v-chip {
-  background: white;
-  color: black;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.dynamic-list {
-  font-weight: normal;
-  font-size: 0.8rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.details-card {
-  font-weight: normal;
-  font-size: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-  height: 5rem;
-}
-.number-card {
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #7fcdd2;
-}
-
-.title-card {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-}
-</style>

components/Common/Card/Benefit.vue

@@ -0,0 +1,104 @@
+<!--
+Carte "Avantage" de la section Avantages d'une page Logiciel
+-->
+<template>
+  <LayoutContainer>
+    <div>
+      <div class="card-title">
+        <h4>
+          {{ benefit.title }}
+        </h4>
+
+        <span class="number">
+          {{ benefit.number }}
+        </span>
+      </div>
+
+      <v-divider thickness="2"/>
+
+      <div class="description">
+        <p class="mr-4">
+          {{ benefit.description }}
+        </p>
+      </div>
+
+      <v-img
+        :src="benefit.image"
+        cover
+      />
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import { Benefit } from "~/types/interface";
+
+const props = defineProps({
+  benefit: {
+    type: Object as PropType<Benefit>,
+    required: true
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.v-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+hr {
+  opacity: 70%;
+}
+
+.v-img {
+  height: 400px;
+}
+
+.card-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+
+  h4 {
+    font-weight: 300;
+    font-size: 1.5rem;
+    line-height: 1rem;
+    color: #0e2d32;
+  }
+
+  .number {
+    font-weight: 500;
+    font-size: 1.3rem;
+    color: var(--on-primary-color-alt);
+  }
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 7rem;
+
+  p {
+    font-weight: normal;
+    font-size: 1rem;
+    color: #091d20;
+    margin-top: 1rem;
+    height: 5rem;
+  }
+
+  ul {
+    font-weight: normal;
+    font-size: 0.8rem;
+    color: #091d20;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+</style>

components/Logiciels/Artist/Avantages.vue

@@ -5,33 +5,26 @@ Section "Avantages" de la page du logiciel Artist
   <AnchoredSection id="benefits">
     <div>
       <LayoutContainer>
-        <v-row class="row-custom">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Découvrez les avantages de la solution'"
-            :iconColor="'#fac20a'"
-          />
-          <LayoutUITitle title="Des avantages concrets" />
+        <v-row>
+          <LayoutUISubTitle>
+            Découvrez les avantages de la solution
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Des avantages concrets
+          </LayoutUITitle>
         </v-row>
 
-        <v-row class="row-custom">
+        <v-row>
           <v-col
             cols="12"
             md="4"
             offset-md="1"
-            v-for="(card, index) in cards"
+            v-for="(benefit, index) in benefits"
             :key="index"
           >
-            <CommonCardAvantageCard
-              :title="card.title"
-              :number="card.number"
-              :description="card.description"
-              :image="card.image"
-              :isMemberCMF="card.isMemberCMF"
-              :numberColor="card.numberColor"
-              :dynamicNumberColor="'#fac20a'"
-
+            <CommonCardBenefit
+              :benefit="benefit"
             />
           </v-col>
         </v-row>
@@ -40,11 +33,11 @@ Section "Avantages" de la page du logiciel Artist
   </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Benefit } from "~/types/interface";
 
-const cards = ref([
+const benefits: Ref<Array<Benefit>> = ref([
   {
     title: "Un gain de temps",
     number: "01",
@@ -71,9 +64,9 @@ const cards = ref([
   },
 ]);
 </script>
-<style scoped>
 
-.row-custom{
+<style scoped lang="scss">
+.v-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -82,5 +75,4 @@ const cards = ref([
   margin-left: auto;
   margin-right: auto;
 }
-
 </style>

types/interface.d.ts

@@ -56,3 +56,11 @@ interface FeaturePicto {
   src: string,
   text: string
 }
+
+interface Benefit {
+  title: string;
+  number: string;
+  description: string;
+  image: string;
+  isMemberCMF: boolean;
+}