site_logiciels/components/Logiciels/School/SomeNumbers.vue

<template>
  <LayoutContainer>
    <v-row class="align-center custom-row">
      <v-col cols="12">
        <v-row no-gutters>
          <LayoutUISubTitle> Quelques chiffres </LayoutUISubTitle>

          <LayoutUITitle>
            Pour les petits comme pour les GRANDS<br />établissements
            d'enseignement artistique
          </LayoutUITitle>
        </v-row>
      </v-col>
    </v-row>

    <v-row class="mb-12 card-container center-90">
      <v-col
        lg="3"
        md="6"
        cols="12"
        class="d-flex justify-center align-center small-padding"
      >
        <CommonCardStat number="30 > 1 500" text="Élèves" />
      </v-col>
      <v-col lg="3" md="6" cols="12" class="d-flex justify-center align-center">
        <CommonCardStat number="139" text="Clients" />
      </v-col>
      <v-col lg="3" md="6" cols="12" class="d-flex justify-center align-center">
        <CommonCardStat number="153 602" text="Utilisateurs" />
      </v-col>
      <v-col lg="3" md="6" cols="12" class="d-flex justify-center align-center">
        <CommonCardStat number="17" text="Années d'expérience" />
      </v-col>
    </v-row>

    <CommonCarouselClients :items="items">
      <template #title>
        <span class="alt-color">139 structures</span> nous font confiance
      </template>
    </CommonCarouselClients>
  </LayoutContainer>
</template>

<script setup lang="ts">
const items: Array<{ src: string; alt: string }> = [
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Conservatoire_Les_Ateliers_des_Arts_Agglomeration_du_Puy-en-Velay.svg',
    alt: 'Logo du Conservatoire « Les ateliers des arts',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Conservatoire-Senlis.png',
    alt: 'Logo du Conservatoire de Senlis',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Ecole_de_Musique-Sausheim.png',
    alt: 'Logo de l’École de musique Sausheim',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Conservatoire_Marly_le_Roi-Roger_Bourdin.jpeg',
    alt: 'Logo du Conservatoire Marly le Roi Roger Bourdin',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Conservatoire_de_Musiques_et_de_Danses_du_Thouarsais.jpeg',
    alt: 'Logo du Conservatoire de Musique et de Danse du Thouarsais',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_Conservatoire_de_Musique_d_Annemasse.jpg',
    alt: 'Logo du Conservatoire d’Annemasse',
  },
  {
    src: '/images/pages/opentalent_school/reviews/Logo_EBAG-Ecole_des_Beaux-Arts_du_Genevois.png',
    alt: 'Ecole des Beaux-Arts du Genevois',
  },
]
</script>

<style scoped lang="scss">
.card-container {
  --on-primary-color-alt: var(--secondary-color);
}

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

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

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

.alt-color {
  color: var(--on-primary-color-alt);
}
</style>