SomeNumbers.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <LayoutContainer>
  3. <v-row class="custom-row">
  4. <LayoutUISubTitle class="mb-12"> Quelques chiffres </LayoutUISubTitle>
  5. </v-row>
  6. <v-container>
  7. <v-row class="card-container mb-12">
  8. <v-col lg="3" class="d-flex justify-center align-center small-padding">
  9. <CommonCardStat number="184 634" text="Utilisateurs" />
  10. </v-col>
  11. <v-col lg="3" class="d-flex justify-center align-center">
  12. <CommonCardStat number="3 423" text="Structures" />
  13. </v-col>
  14. <v-col lg="3" class="d-flex justify-center align-center">
  15. <CommonCardStat number="17" text="Années d'expérience" />
  16. </v-col>
  17. </v-row>
  18. </v-container>
  19. <CommonCarouselClients :items="items">
  20. <template #title>
  21. Plus de <span class="alt-color">3400 structures</span> nous ont déjà
  22. adoptées
  23. </template>
  24. </CommonCarouselClients>
  25. </LayoutContainer>
  26. </template>
  27. <script setup lang="ts">
  28. import type { Ref } from 'vue'
  29. const items: Ref<Array<{ src: string; alt: string }>> = ref([
  30. {
  31. src: '/images/pages/opentalent_artist/reviews/Logo_Union_Musicale_Sarriannaise.jpeg',
  32. alt: 'Logo de l’Union Musicale Sarriannaise',
  33. },
  34. {
  35. src: '/images/pages/opentalent_artist/reviews/Logo_Societe_Musicale_Sully_sur_Loire.jpg',
  36. alt: 'Logo de la Société Musicale de Sully sur Loire',
  37. },
  38. {
  39. src: '/images/pages/opentalent_artist/reviews/Logo_Orchestre_d_Harmonie_de_Cluses.jpeg',
  40. alt: 'Logo de l’Orchestre d’Harmonie de Cluses',
  41. },
  42. {
  43. src: '/images/pages/opentalent_artist/reviews/Logo_Musique_Municipale_Geispolsheim.jpeg',
  44. alt: 'Logo Musique Municipale de Geispolsheim',
  45. },
  46. {
  47. src: '/images/pages/opentalent_artist/reviews/Logo_Harmonie_Municipale_de_Montherme.png',
  48. alt: 'Logo de l’Harmonie Municipale de Montherme',
  49. },
  50. {
  51. src: '/images/pages/opentalent_artist/reviews/Logo_Echo_Musical_de_Faye_d_Anjou.jpeg',
  52. alt: 'Logo de l’Echo Musical de Faye d’Anjou',
  53. },
  54. {
  55. src: '/images/pages/opentalent_artist/reviews/Logo_Union_Musicale_Wattrelosienne.jpg',
  56. alt: 'Logo de l’Union Musicale Wattrelosienne',
  57. },
  58. ])
  59. </script>
  60. <style scoped lang="scss">
  61. .custom-row {
  62. width: 90%;
  63. margin-right: auto;
  64. margin-left: auto;
  65. }
  66. .card-container {
  67. margin-left: auto;
  68. margin-right: auto;
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  72. }
  73. .alt-color {
  74. color: var(--on-primary-color-alt);
  75. }
  76. </style>