site_logiciels/components/Logiciels/School/Comparatif.vue

<template>
  <div id="Comparatif">
    <LayoutContainer>
      <v-row class="mt-12">
        <div class="d-flex justify-center align-center">
          <v-icon
            size="6"
            class="fa-solid fa-circle icon-title"
          />
          <h5 class="subtitle">
            Comparatif de nos solutions
          </h5>
        </div>
      </v-row>
      <v-row>
        <h3 class="title">
          Et si vous passiez à la version Premium
        </h3>
      </v-row>

      <table class="table-comparatif">
        <thead>
          <tr>
            <th class="thead" />
            <th class="thead">
              <p class="standard">
                Standard
              </p>
              <p class="from">
                A partir de
              </p>
              <p class="price">
                32,90€ <span class="ttc">ttc</span>
              </p>
              <p class="month">
                /mois
              </p>
            </th>
            <th class="thead premium-column">
              <p class="standard ">
                Premium
              </p>
              <p class="from">
                A partir de
              </p>
              <p class="price">
                46,20€ <span class="ttc">ttc</span>
              </p>
              <p class="month">
                /mois
              </p>
            </th>
          </tr>
        </thead>
        <tbody class="table-body">
    <tr
      v-for="row in tableData"
      :key="row.id"
      class="table-row"
    >
      <td class="table-data">
        {{ row.column1 }}
      </td>
      <td class="table-data-second">
        <v-icon
          v-if="row.column2 === 'check'"
          size="18"
          class="far fa-check-circle"
        />
        <v-icon
          v-else-if="row.column2 === 'cross'"
          size="18"
          class="far fa-times-circle"
          color="red"
        />
        <span v-else>{{ row.column2 }}</span>
      </td>
      <td class="table-data-second">
        <v-icon
          v-if="row.column3 === 'check'"
          size="18"
          class="far fa-check-circle"
        />
        <v-icon
          v-else-if="row.column3 === 'cross'"
          size="18"
          class="far fa-times-circle"
          color="red"
        />
        <span v-else>{{ row.column3 }}</span>
      </td>
    </tr>
  </tbody>
      </table>
    </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: 3,
    column1: "SUIVI PÉDAGOGIQUE",
    column2: "check",
    column3: "check",
  },
  {
    id: 4,
    column1: "GESTION DU PARC MATÉRIEL",
    column2: "check",
    column3: "check",
  },
  {
    id: 5,
    column1: "COMMUNICATION",
    column2: "check",
    column3: "check",
  },
  {
    id: 6,
    column1: "SMS",
    column2: "check",
    column3: "check",
  },
  {
    id: 6,
    column1: "NOM DE DOMAINE",
    column2: "check",
    column3: "check",
  },
  {
    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: "cross",
    column3: "Option",
  },
  {
    id: 12,
    column1: "PRÉINSCRIPTION EN LIGNE",
    column2: "cross",
    column3: "Option",
  },
  {
    id: 13,
    column1: "GRILLES D'ÉVALUATION",
    column2: "check",
    column3: "Option",
  },
  {
    id: 14,
    column1: "GESTION DES RÈGLEMENTS",
    column2: "Option",
    column3: "Option",
  },
  {
    id: 15,
    column1: "ESPACE DE STOCKAGE",
    column2: "500 Mo",
    column3: "1 Go",
  },
  {
    id: 16,
    column1: "PAGE DU SITE INTERNET",
    column2: "restreint",
    column3: "illimités",
  },
];
</script>
.
<style scoped>
.table-data-second {
  padding-right: 5rem;
}
.standard {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e2d32;
  padding-right: 5rem;
  margin-bottom: 1rem;
}

.from,
.ttc {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: #454545;
  padding-right: 5rem;
}

.ttc {
  text-transform: uppercase;
}

.price,
.month {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: #454545;
}

.month {
  padding-right: 5rem;
}

.table-data-left {
  width: 15rem;
  padding-right: 2rem;
}
.table-data {
  text-align: left;
  padding-left: 20px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;

  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #454545;
}
.icon-title {
  color: rgba(32, 147, 190, 0.6);
  font-size: 1.5rem;
  margin-left: 3rem;
}
.subtitle {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: 0.5rem;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 15px; 
letter-spacing: 1.8px;
text-transform: uppercase;
}

.title {
  font-size: 3rem;
  font-weight: 600;
  margin-left: 3rem;
  width: 27rem;
  font-family: "Barlow";
  margin-top: 2rem;
}

.thead {
  background-color: #fff;
  height: 8rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
}
.table-comparatif {
  width: 70%;
  margin-top: 1rem;
  margin-right: auto;
  margin-left: auto;
  border: none;
  border-collapse: collapse;
}
.table-row {
  background-color: white;
  text-align: center;
  height: 3rem;
}

.table-body .table-row:nth-child(odd) {
  background-color: rgba(32, 147, 190, 0.2);
}

</style>