refactor Comparison section of school page

components/Common/Table/Comparatif.vue

@@ -86,11 +86,11 @@ import { ComparisonItem } from "~/types/interface";
 const props = defineProps({
   standardPrice: {
     type: String,
-    default: "32,90€",
+    required: true
   },
   premiumPrice: {
     type: String,
-    default: "46,20€",
+    required: true
   },
   items: {
     type: Array as PropType<Array<ComparisonItem>>,

components/Logiciels/Artist/Comparatif.vue

@@ -13,8 +13,6 @@
         standardPrice="14€"
         premiumPrice="18€"
         :items="comparisonItems"
-        :color="'#0e2d32'"
-        :stripeColor="'#fac20a33'"
       />
     </LayoutContainer>
   </AnchoredSection>

components/Logiciels/School/Comparatif.vue

@@ -1,133 +1,112 @@
 <template>
   <AnchoredSection id="comparative">
-    <div id="Comparatif">
-      <LayoutContainer class="mt-6">
-        <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="' Comparatif de nos solutions'"
-          />
-          <LayoutUITitle
-            title="Choisissez la version qui vous convient ! "
-          />
+    <LayoutContainer>
+      <LayoutUISubTitle>
+        Comparatif de nos solutions
+      </LayoutUISubTitle>
 
-          <CommonTableComparatif
-          :standardPrice="'32,90€'"
-          :premiumPrice="'46,20€'"
-          :color="'#0e2d32'"
-          :stripeColor="'rgba(32, 147, 190, 0.2)'"
-          :items="tableData"
-        />
-      </LayoutContainer>
-    </div>
+      <LayoutUITitle>
+        Choisissez la version qui vous convient !
+      </LayoutUITitle>
+
+      <CommonTableComparatif
+        standardPrice="32,90€"
+        premiumPrice="46,20€"
+        :items="comparisonItems"
+      />
+    </LayoutContainer>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { ComparisonItem } from "~/types/interface";
 
-const tableData = [
+const comparisonItems: Array<ComparisonItem> = [
   {
-    id: 1,
-    column1: "GESTION DU RÉPERTOIRE",
-    column2: "check",
-    column3: "check",
+    label: "GESTION DU RÉPERTOIRE",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 2,
-    column1: "AGENDA",
-    column2: "check",
-    column3: "check",
+    label: "AGENDA",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 3,
-    column1: "SUIVI PÉDAGOGIQUE",
-    column2: "check",
-    column3: "check",
+    label: "SUIVI PÉDAGOGIQUE",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 4,
-    column1: "GESTION DU PARC MATÉRIEL",
-    column2: "check",
-    column3: "check",
+    label: "GESTION DU PARC MATÉRIEL",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 5,
-    column1: "COMMUNICATION",
-    column2: "check",
-    column3: "check",
+    label: "COMMUNICATION",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 6,
-    column1: "SMS",
-    column2: "Option",
-    column3: "Option",
+    label: "SMS",
+    includedInStandard: "Option",
+    includedInPremium: "Option",
   },
   {
-    id: 6,
-    column1: "NOM DE DOMAINE",
-    column2: "Option",
-    column3: "Option",
+    label: "NOM DE DOMAINE",
+    includedInStandard: "Option",
+    includedInPremium: "Option",
   },
   {
-    id: 7,
-    column1: "SITE INTERNET",
-    column2: "check",
-    column3: "check",
+    label: "SITE INTERNET",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 8,
-    column1: "STATISTIQUES",
-    column2: "check",
-    column3: "check",
+    label: "STATISTIQUES",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 9,
-    column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
-    column2: "check",
-    column3: "check",
+    label: "FONCTIONNALITÉ DU RÉSEAU CMF",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 10,
-    column1: "SAUVEGARDE",
-    column2: "check",
-    column3: "check",
+    label: "SAUVEGARDE",
+    includedInStandard: true,
+    includedInPremium: true,
   },
   {
-    id: 11,
-    column1: "EXTRANET UTILISATEURS",
-    column2: "cross",
-    column3: "Option",
+    label: "EXTRANET UTILISATEURS",
+    includedInStandard: false,
+    includedInPremium: "Option",
   },
   {
-    id: 12,
-    column1: "PRÉINSCRIPTION EN LIGNE",
-    column2: "cross",
-    column3: "Option",
+    label: "PRÉINSCRIPTION EN LIGNE",
+    includedInStandard: false,
+    includedInPremium: "Option",
   },
   {
-    id: 13,
-    column1: "GRILLES D'ÉVALUATION",
-    column2: "check",
-    column3: "Option",
+    label: "GRILLES D'ÉVALUATION",
+    includedInStandard: true,
+    includedInPremium: "Option",
   },
   {
-    id: 14,
-    column1: "GESTION DES RÈGLEMENTS",
-    column2: "Option",
-    column3: "Option",
+    label: "GESTION DES RÈGLEMENTS",
+    includedInStandard: "Option",
+    includedInPremium: "Option",
   },
   {
-    id: 15,
-    column1: "ESPACE DE STOCKAGE",
-    column2: "500 Mo",
-    column3: "1 Go",
+    label: "ESPACE DE STOCKAGE",
+    includedInStandard: "500 Mo",
+    includedInPremium: "1 Go",
   },
   {
-    id: 16,
-    column1: "PAGE DU SITE INTERNET",
-    column2: "restreint",
-    column3: "illimités",
+    label: "PAGE DU SITE INTERNET",
+    includedInStandard: "restreint",
+    includedInPremium: "illimités",
   },
 ];
 </script>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,42 +1,25 @@
 <template>
   <AnchoredSection id="functionalities">
-    <div id="Fonctionnalites">
+    <div>
       <LayoutContainer>
-        <div class="container-green" v-if="!mdAndDown">
-          <v-row>
-            <v-col cols="12">
-              <CommonCarouselFonctionnalite
-                :cards="cards"
-                :functionCarousel="functionCarousel"
-                :itemsToShow="itemsToShow"
-                pricingFromText="à partir de"
-              />
-            </v-col>
-          </v-row>
-        </div>
+        <v-row>
+          <v-col cols="12">
+            <CommonCarouselFonctionnalite
+              :cards="cards"
+            />
+          </v-col>
+        </v-row>
       </LayoutContainer>
     </div>
   </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify/lib/framework.mjs";
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Functionality } from "~/types/interface";
 
-const { width, mdAndDown } = useDisplay();
-const functionCarousel = ref(null);
-const itemsToShow = computed(() => {
-  if (width.value >= 1280 && width.value <= 1920) {
-    return 3;
-  } else if (width.value > 1920) {
-    return 6;
-  }
-  return props.itemsToShow;
-});
-
-const cards = [
+const cards: Array<Functionality> = [
   {
     logo: "/images/logiciels/school/fonctionnalites/Espaces.svg",
     title: "ESPACES DÉDIÉS *",
@@ -158,9 +141,3 @@ const cards = [
   },
 ];
 </script>
-
-<style scoped>
-.container-green {
-  background-color: #0e2d32;
-}
-</style>

pages/opentalent_school.vue

@@ -12,7 +12,9 @@
 
     <LogicielsSchoolAvantages />
 
-    <LogicielsSchoolFonctionnalites />
+    <div v-if="mdAndUp" class="alt-theme">
+      <LogicielsSchoolFonctionnalites />
+    </div>
 
     <LogicielsSchoolComparatif />
 
@@ -33,6 +35,9 @@
 <script setup lang="ts">
 import { MenuScroll, StickyMenuAction } from "~/types/interface";
 import { StickyMenuActionType } from "~/types/enum/layout";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },
@@ -83,6 +88,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --primary-color: #ffffff;
   --secondary-color: #c3e5e7;
   --on-primary-color: #0e2d32;
+  --primary-color-alt: #262626;
   --on-primary-color-alt: #c3e5e7;
 }
 </style>