site_logiciels/components/Logiciels/Artist/SomeNumbers.vue

<template>
  <LayoutContainer>
    <v-row class="custom-row">
      <LayoutUISubTitle class="mb-12">
        Quelques chiffres
      </LayoutUISubTitle>
    </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="184 634"
            text="Utilisateurs"
          />
        </v-col>

        <v-col lg="3" class="d-flex justify-center align-center">
          <CommonCardStat
            number="3 423"
            text="Structures"
          />
        </v-col>

        <v-col lg="3" class="d-flex justify-center align-center">
          <CommonCardStat
            number="15"
            text="Années d'expérience"
          />
        </v-col>
      </v-row>
    </v-container>

    <CommonCarouselClients :items="items" >
      <template v-slot:title>
        Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
      </template>
    </CommonCarouselClients>
  </LayoutContainer>
</template>

<script setup lang="ts">
const items: Ref<Array<{ src: string, alt: string }>> = ref([
  { src: "/images/reviews/artist/review1.jpeg", alt: "Logo de l’Union Musicale Sarriannaise" },
  { src: "/images/reviews/artist/review2.jpg", alt: "Logo de la Société Musicale de Sully sur Loire" },
  { src: "/images/reviews/artist/review3.jpeg", alt: "Logo de l’Orchestre d’Harmonie de Cluses" },
  { src: "/images/reviews/artist/review4.jpg", alt: "Logo Musique Municipale de Geispolsheim" },
  { src: "/images/reviews/artist/review5.png", alt: "Logo de l’Harmonie Municipale de Montherme" },
  { src: "/images/reviews/artist/review6.jpeg", alt: "Logo de l’Echo Musical de Faye d’Anjou" },
]);
</script>

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

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