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="17" text="Années d'expérience" />
        </v-col>
      </v-row>
    </v-container>

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

<script setup lang="ts">
import type { Ref } from 'vue'

const items: Ref<Array<{ src: string; alt: string }>> = ref([
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Union_Musicale_Sarriannaise.jpeg',
    alt: 'Logo de l’Union Musicale Sarriannaise',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Societe_Musicale_Sully_sur_Loire.jpg',
    alt: 'Logo de la Société Musicale de Sully sur Loire',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Orchestre_d_Harmonie_de_Cluses.jpeg',
    alt: 'Logo de l’Orchestre d’Harmonie de Cluses',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Musique_Municipale_Geispolsheim.jpeg',
    alt: 'Logo Musique Municipale de Geispolsheim',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Harmonie_Municipale_de_Montherme.png',
    alt: 'Logo de l’Harmonie Municipale de Montherme',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Echo_Musical_de_Faye_d_Anjou.jpeg',
    alt: 'Logo de l’Echo Musical de Faye d’Anjou',
  },
  {
    src: '/images/pages/opentalent_artist/reviews/Logo_Union_Musicale_Wattrelosienne.jpg',
    alt: 'Logo de l’Union Musicale Wattrelosienne',
  },
])
</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>