site_logiciels/components/Logiciels/Artist/Formations.vue

<template>
  <AnchoredSection id="webinars">
    <LayoutContainer>
      <div class="alt-theme">
        <v-container>
          <v-row class="custom-row">
            <LayoutUISubTitle class="mt-12" >
              Pour aller plus loin
            </LayoutUISubTitle>
          </v-row>

          <v-row class="formation py-12 align-center mb-12" no-gutters>
            <v-col cols="12" lg="6">
              <v-img src="/images/logiciels/artist/webinaire.jpg" class="meeting-img" />
            </v-col>

            <v-col cols="12" lg="6" md="6" sm="6">
              <h3 class="ml-6 mr-12">
                Webinaire - Partez à la découverte du logiciel Opentalent Artist
              </h3>

              <p class="details ml-6 mr-12" >
                Rejoignez notre webinaire, spécialement conçu pour les
                professionnels du secteur culturel, orchestres, chorales,
                compagnies de danse, ainsi que les troupes de théâtre et de
                cirque. Cette session interactive vous offre une occasion unique
                de vous immerger dans les fonctionnalités de notre logiciel, de
                comprendre ses avantages distinctifs et d'explorer les diverses
                versions disponibles. Ne manquez pas cette chance de simplifiez
                votre gestion et de faire évoluer votre pratique artistique avec
                nos solutions technologiques innovantes !
              </p>

              <nuxt-link to="/webinaires">
                <v-btn class="mt-12 ml-6">
                  S'inscrire à nos webinaires
                </v-btn>
              </nuxt-link>
            </v-col>
          </v-row>
        </v-container>
      </div>

      <!--
      TODO: Déplacer le "Quelques chiffres" dans un composant à part,
      voir comment gérer ça avec les anchored sections
      -->
      <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
            cols="3"
            class="d-flex justify-center align-center small-padding"
          >
            <CommonCardStat
              number="184 634"
              text="Utilisateurs"
            />
          </v-col>

          <v-col cols="3" class="d-flex justify-center align-center">
            <CommonCardStat
              number="3 424"
              text="Structures"
            />
          </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 />

      <v-row />

      <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>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";

const items: Ref<Array<{ src: string }>> = ref([
  { src: "/images/reviews/artist/review1.jpeg" },
  { src: "/images/reviews/artist/review2.jpg" },
  { src: "/images/reviews/artist/review3.jpeg" },
  { src: "/images/reviews/artist/review4.jpg" },
  { src: "/images/reviews/artist/review5.png" },
  { src: "/images/reviews/artist/review6.jpeg" },
]);
</script>

<style scoped lang="scss">
.v-container {
  padding: 0 !important;
}

.alt-color {
  color: var(--on-primary-color-alt);
}

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

.formation {
  .v-img {
    width: 600px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border-radius: 10%;
  }

  :deep(.v-img img) {
    object-fit: cover;
  }

  h3 {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 35px;
    color: #ffffff;
    margin-bottom: 1rem;
  }

  .details {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #eff9fb;
    text-align: justify
  }

  .v-btn {
    font-weight: 500;
    font-size: 1rem;
    line-height: 18px;
    background: transparent;
    color: #eff9fb;
    border: 1px solid #eff9fb;
    border-radius: 0.5rem;
    width: 90%;
  }
}

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