site_logiciels/components/Logiciels/Artist/Comparatif.vue

<template>
  <AnchoredSection id="comparative">
    <v-row class="center-90">
      <v-col cols="12">
        <LayoutUISubTitle class="subtitle"> Comparatif de nos solutions </LayoutUISubTitle>

        <LayoutUITitle>
          Choisissez la version qui vous convient !
        </LayoutUITitle>
      </v-col>
    </v-row>

    <LayoutContainer class="wrapper">
      <CommonTableComparatif
        standard-price="11€"
        premium-price="18€"
        :items="comparisonItems"
      />
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { 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: 'PAGES DU SITE INTERNET',
    includedInStandard: 'Restreint',
    includedInPremium: 'Illimité',
  },
]
</script>

<style scoped>
.subtitle {
  margin-left: -12px;
}

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