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 établissements d'enseignement artistique
          </LayoutUITitle>
        </v-row>
      </v-col>
    </v-row>

    <v-container>
      <v-row class="mb-12 card-container custom-row">
        <v-col
          cols="3"
          class="d-flex justify-center align-center small-padding"
        >
          <CommonCardStat
            number="30 > 1 500"
            text="Élèves"
          />
        </v-col>
        <v-col
          cols="3"
          class="d-flex justify-center align-center"
        >
          <CommonCardStat
            number="234"
            text="Clients"
          />
        </v-col>
        <v-col
          cols="3"
          class="d-flex justify-center align-center"
        >
          <CommonCardStat
            number="20 304"
            text="Utilisateurs"
          />
        </v-col>
        <v-col
          cols="3"
          class="d-flex justify-center align-center"
        >
          <CommonCardStat
            number="13"
            text="Années d'expérience"
          />
        </v-col>
      </v-row>
    </v-container>
    <v-row />

    <CommonCarouselClients :items="items" >
      <template v-slot:title>
        Plus de <span class="alt-color">5000 structures</span> nous font confiance
      </template>
    </CommonCarouselClients>
  </LayoutContainer>
</template>

<script setup lang="ts">
const items: Array<{ src: string }> = [
  { src: "/images/reviews/school/review1.svg" },
  { src: "/images/reviews/school/review2.png" },
  { src: "/images/reviews/school/review3.png" },
  { src: "/images/reviews/school/review4.jpeg" },
  { src: "/images/reviews/school/review5.jpeg" },
  { src: "/images/reviews/school/review6.jpeg" },
];
</script>

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

.custom-row {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.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>