site_logiciels/components/Logiciels/Artist/Comparatif.vue

<template>
  <AnchoredSection id="comparative">
    <div>
      <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>
  </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: 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>