Comparatif.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <AnchoredSection id="comparative">
  3. <LayoutContainer>
  4. <v-row class="center-90">
  5. <LayoutUISubTitle> Comparatif de nos solutions </LayoutUISubTitle>
  6. <LayoutUITitle>
  7. Choisissez la version qui vous convient !
  8. </LayoutUITitle>
  9. <CommonTableComparatif
  10. standard-price="34,90€"
  11. premium-price="49€"
  12. :items="comparisonItems"
  13. />
  14. <div class="asterisk">
  15. <span>** Uniquement dédié aux structures adhérentes CMF</span>
  16. </div>
  17. </v-row>
  18. </LayoutContainer>
  19. </AnchoredSection>
  20. </template>
  21. <script setup lang="ts">
  22. import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
  23. import type { ComparisonItem } from '~/types/interface'
  24. const comparisonItems: Array<ComparisonItem> = [
  25. {
  26. label: 'GESTION DU RÉPERTOIRE',
  27. includedInStandard: true,
  28. includedInPremium: true,
  29. },
  30. {
  31. label: 'SUIVI PÉDAGOGIQUE',
  32. includedInStandard: true,
  33. includedInPremium: true,
  34. },
  35. {
  36. label: 'AGENDA',
  37. includedInStandard: true,
  38. includedInPremium: true,
  39. },
  40. {
  41. label: 'FACTURATION AUTOMATISÉE',
  42. includedInStandard: true,
  43. includedInPremium: true,
  44. },
  45. {
  46. label: 'GESTION DES RÈGLEMENTS',
  47. includedInStandard: true,
  48. includedInPremium: true,
  49. },
  50. {
  51. label: 'GESTION DU PARC MATÉRIEL',
  52. includedInStandard: true,
  53. includedInPremium: true,
  54. },
  55. {
  56. label: 'COMMUNICATION',
  57. includedInStandard: true,
  58. includedInPremium: true,
  59. },
  60. {
  61. label: 'SITE INTERNET',
  62. includedInStandard: true,
  63. includedInPremium: true,
  64. },
  65. {
  66. label: 'STATISTIQUES',
  67. includedInStandard: true,
  68. includedInPremium: true,
  69. },
  70. {
  71. label: 'EXPORT DES DONNÉES',
  72. includedInStandard: true,
  73. includedInPremium: true,
  74. },
  75. {
  76. label: 'FONCTIONNALITÉ DU RÉSEAU CMF **',
  77. includedInStandard: true,
  78. includedInPremium: true,
  79. },
  80. {
  81. label: 'EXTRANET UTILISATEURS',
  82. includedInStandard: false,
  83. includedInPremium: true,
  84. },
  85. {
  86. label: 'PRÉINSCRIPTION EN LIGNE',
  87. includedInStandard: false,
  88. includedInPremium: 'Option',
  89. },
  90. {
  91. label: "GRILLES D'ÉVALUATION",
  92. includedInStandard: false,
  93. includedInPremium: 'Option',
  94. },
  95. {
  96. label: 'GESTION DES RÈGLEMENTS',
  97. includedInStandard: false,
  98. includedInPremium: 'Option',
  99. },
  100. {
  101. label: 'EXPORT DE FACTURATION',
  102. includedInStandard: false,
  103. includedInPremium: 'Option',
  104. },
  105. {
  106. label: 'SMS',
  107. includedInStandard: 'Option',
  108. includedInPremium: 'Option',
  109. },
  110. {
  111. label: 'NOM DE DOMAINE',
  112. includedInStandard: 'Option',
  113. includedInPremium: 'Option',
  114. },
  115. {
  116. label: 'ESPACE DE STOCKAGE',
  117. includedInStandard: '500 Mo',
  118. includedInPremium: '1 Go',
  119. },
  120. {
  121. label: 'PAGES DU SITE INTERNET',
  122. includedInStandard: 'Restreint',
  123. includedInPremium: 'Illimité',
  124. },
  125. ]
  126. </script>
  127. <style scoped>
  128. .asterisk {
  129. display: flex;
  130. margin: 4px auto 0 auto;
  131. width: 63%;
  132. justify-content: flex-end;
  133. font-style: italic;
  134. }
  135. </style>