site_logiciels/components/Logiciels/School/Comparatif.vue

<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 ! "
          />

          <CommonTableComparatif
          :standardPrice="'32,90€'"
          :premiumPrice="'46,20€'"
          :color="'#0e2d32'"
          :stripeColor="'rgba(32, 147, 190, 0.2)'"
          :items="tableData"
        />
      </LayoutContainer>
    </div>
  </AnchoredSection>
</template>

<script setup>
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";

const tableData = [
  {
    id: 1,
    column1: "GESTION DU RÉPERTOIRE",
    column2: "check",
    column3: "check",
  },
  {
    id: 2,
    column1: "AGENDA",
    column2: "check",
    column3: "check",
  },
  {
    id: 3,
    column1: "SUIVI PÉDAGOGIQUE",
    column2: "check",
    column3: "check",
  },
  {
    id: 4,
    column1: "GESTION DU PARC MATÉRIEL",
    column2: "check",
    column3: "check",
  },
  {
    id: 5,
    column1: "COMMUNICATION",
    column2: "check",
    column3: "check",
  },
  {
    id: 6,
    column1: "SMS",
    column2: "Option",
    column3: "Option",
  },
  {
    id: 6,
    column1: "NOM DE DOMAINE",
    column2: "Option",
    column3: "Option",
  },
  {
    id: 7,
    column1: "SITE INTERNET",
    column2: "check",
    column3: "check",
  },
  {
    id: 8,
    column1: "STATISTIQUES",
    column2: "check",
    column3: "check",
  },
  {
    id: 9,
    column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
    column2: "check",
    column3: "check",
  },
  {
    id: 10,
    column1: "SAUVEGARDE",
    column2: "check",
    column3: "check",
  },
  {
    id: 11,
    column1: "EXTRANET UTILISATEURS",
    column2: "cross",
    column3: "Option",
  },
  {
    id: 12,
    column1: "PRÉINSCRIPTION EN LIGNE",
    column2: "cross",
    column3: "Option",
  },
  {
    id: 13,
    column1: "GRILLES D'ÉVALUATION",
    column2: "check",
    column3: "Option",
  },
  {
    id: 14,
    column1: "GESTION DES RÈGLEMENTS",
    column2: "Option",
    column3: "Option",
  },
  {
    id: 15,
    column1: "ESPACE DE STOCKAGE",
    column2: "500 Mo",
    column3: "1 Go",
  },
  {
    id: 16,
    column1: "PAGE DU SITE INTERNET",
    column2: "restreint",
    column3: "illimités",
  },
];
</script>
<style scoped>

.v-container{
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}</style>