site_logiciels/components/Formation/Qualite.vue

<template>
  <AnchoredSection id="satisfaction">
    <LayoutContainer>
      <v-row class="center-90">
        <v-col cols="12">
          <LayoutUISubTitle> ÉVALUATION DE LA QUALITÉ </LayoutUISubTitle>

          <div class="bloc-quali">
            <p>
              Les participants évaluent nos formations dans l’objectif d’avoir
              une amélioration continue de nos prestations. En 2023, nos
              formations ont obtenu un niveau de satisfaction de…
            </p>
          </div>
        </v-col>
      </v-row>

      <v-container>
        <v-row class="card-container mb-12">
          <v-col
            lg="3"
            class="d-flex justify-center align-center small-padding"
          >
            <CommonCardStat number="83%" text="Satisfaction formation" />
          </v-col>

          <v-col lg="3" class="d-flex justify-center align-center">
            <CommonCardStat number="87%" text="Satisfaction formateur" />
          </v-col>
        </v-row>
      </v-container>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
</script>

<style scoped lang="scss">
.bloc-quali {
  text-align: justify;
  margin: 18px;
}

.card-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  color: var(--on-alt-theme) !important;
  background: var(--primary-color);
}
</style>