site_logiciels/components/Logiciels/Artist/Comparatif.vue

<template>
  <AnchoredSection id="comparative">
    <LayoutContainer>
      <LayoutUISubTitle>
        Comparatif de nos solutions
      </LayoutUISubTitle>

      <LayoutUITitle>
        Choisissez la version qui vous convient !
      </LayoutUITitle>

      <CommonTableComparatif
        standardPrice="14€"
        premiumPrice="18€"
        :items="comparisonItems"
        :color="'#0e2d32'"
        :stripeColor="'#fac20a33'"
      />
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
import { ComparisonItem } from "~/types/interface";

const comparisonItems: Array<ComparisonItem> = [
  {
    label: "GESTION DU RÉPERTOIRE",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "AGENDA",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "GESTION DU PARC MATÉRIEL",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "COMMUNICATION",
    includedInStandard: false,
    includedInPremium: true,
  },
  {
    label: "SMS",
    includedInStandard: "Option",
    includedInPremium: "Option",
  },
  {
    label: "NOM DE DOMAINE",
    includedInStandard: "Option",
    includedInPremium: "Option",
  },
  {
    label: "SITE INTERNET",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "STATISTIQUES",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "FONCTIONNALITÉ DU RÉSEAU CMF",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "SAUVEGARDE",
    includedInStandard: true,
    includedInPremium: true,
  },
  {
    label: "EXTRANET UTILISATEURS",
    includedInStandard: "75 comptes",
    includedInPremium: "150 comptes",
  },
  {
    label: "ESPACE DE STOCKAGE",
    includedInStandard: "100 Mo",
    includedInPremium: "1 Go",
  },
  {
    label: "PAGE DU SITE INTERNET",
    includedInStandard: "Restreint",
    includedInPremium: "Illimités",
  },
];
</script>

<style scoped>

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