site_logiciels/components/Logiciels/Manager/SomeNumbers.vue

<template>
  <LayoutContainer>
    <v-row class="align-center">
      <LayoutUISubTitle> Quelques chiffres </LayoutUISubTitle>
    </v-row>

    <v-container>
      <v-row class="card-container justify-center mb-12">
        <v-col md="3" class="d-flex justify-center align-center small-padding">
          <CommonCardStat number="140" text="Structures en réseau" />
        </v-col>
        <v-col md="3" class="d-flex justify-center align-center">
          <CommonCardStat number="216 498" text="Utilisateurs" />
        </v-col>
        <v-col md="3" class="d-flex justify-center align-center">
          <CommonCardStat number="17" text="Années de collaboration" />
        </v-col>
      </v-row>
    </v-container>

    <v-row>
      <v-col cols="12" class="justify-center">
        <span class="cmf-trust-statement">
          Le plus grand réseau culturel en France nous fait confiance
        </span>

        <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
          <v-img
            src="/images/logos/cmf/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg"
            class="cmf-img mb-6"
          />
        </nuxt-link>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.custom-row {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.v-row {
  max-width: 1600px;
  margin: 0 auto;
}

:deep(h2) {
  width: 60rem;
}

.card-container {
  --primary-color-alt: white;

  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alt-color {
  color: var(--on-primary-color-alt);
}

.background-img {
  width: 600px;
  height: 400px;
  background-size: cover;
  background-position: center;
}

.cmf-img {
  width: 30rem;
  height: 18rem;
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
}

.cmf-trust-statement {
  font-size: 2rem;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>