site_logiciels/components/Logiciels/Artist/Formations.vue

<template>
  <AnchoredSection id="webinars">
    <div>
      <LayoutContainer>
        <div class="container-green 2">
          <v-container>
            <v-row class="custom-row">
              <LayoutUISubTitle
                class="mt-12"
                title-color="#fff"
                :iconSize="6"
                :iconClasses="iconClasses"
                :titleText="'Pour aller plus loin'"
                :iconColor="'#fac20a'"
              />
            </v-row>

            <v-row class="mt-12 align-center" no-gutters>
              <v-col cols="12" lg="6" md="6" sm="6">
                <div class="reunion-img mb-12"></div>
              </v-col>

              <v-col cols="12" lg="6" md="6" sm="6">
                <h3 class="formation-title ml-6 mr-12">
                  Webinaire - Partez à la découverte du logiciel Opentalent Artist
                </h3>
                <p
                  class="formation-details ml-6 mr-12"
                  style="text-align: justify"
                >
                  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="formation-btn mt-12 ml-6">
                    S'inscrire à nos webinaires</v-btn
                  >
                </nuxt-link>
              </v-col>
            </v-row>
          </v-container>
        </div>
        <v-row class="custom-row">
          <LayoutUISubTitle
            :iconSize="6"
            :iconClasses="iconClasses"
            :titleText="' Quelques chiffres'"
            class="mb-12"
          />
        </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
                :chiffre="'184 634'"
                text="Utilisateurs"
                backgroundColor="#fac20a"
              />
            </v-col>
            <v-col cols="3" class="d-flex justify-center align-center">
              <CommonCardStat
                :chiffre="'3 424'"
                text="Structures"
                backgroundColor="#fac20a"
              />
            </v-col>
            <v-col cols="3" class="d-flex justify-center align-center">
              <CommonCardStat
                :chiffre="13"
                text="Années d'expérience"
                backgroundColor="#fac20a"
              />
            </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>
    </div>
  </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);
}

@media (min-width: 1000px) {
  .custom-row {
    margin-right: auto;
    margin-left: auto;
  }
}
.custom-row {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.formation-btn {
  font-weight: 500;
  font-size: 1rem;
  line-height: 18px;
  background: transparent;
  color: #eff9fb;
  border: 1px solid #eff9fb;
  border-radius: 0.5rem;
  width: 90%;
}
.formation-details {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #eff9fb;
}
.formation-title {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 35px;
  color: #ffffff;
  margin-bottom: 1rem;
}
.reunion-img {
  width: 600px;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 10%;
  background-image: url("/images/logiciels/artist/webinaire.jpg");
}
.container-green {
  background-color: #0e2d32;
  padding: 20px;
  height: auto;
  margin-bottom: 2rem;
  color: white;
}

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