site_logiciels/components/Logiciels/Artist/Comparatif.vue

<template>
  <div id="Comparatif">
    <LayoutContainer>
      <LayoutUISubTitle
          :iconSize="6"
          :iconClasses="iconClasses"
          :titleText="'Comparatif de nos solutions'"
          :iconColor="'#fac20a'"
        />
        <LayoutUITitle
          title="Choisissez la version qui vous convient !"
        />
        <CommonTableComparatif
        :standardPrice="'14€'"
        :premiumPrice="'18€'"
        :color="'#0e2d32'"
        :stripeColor="'#fac20a33'"
        :tableData="tableData"
      />
    </LayoutContainer>
  </div>
</template>

<script setup>
const tableData = [
  {
    id: 1,
    column1: "GESTION DU RÉPERTOIRE",
    column2: "check",
    column3: "check",
  },
  {
    id: 2,
    column1: "AGENDA",
    column2: "check",
    column3: "check",
  },
  {
    id: 4,
    column1: "GESTION DU PARC MATÉRIEL",
    column2: "check",
    column3: "check",
  },
  {
    id: 5,
    column1: "COMMUNICATION",
    column2: "cross",
    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: "75 comptes",
    column3: "150 comptes",
  },
  {
    id: 15,
    column1: "ESPACE DE STOCKAGE",
    column2: "100 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>