site_logiciels/components/Logiciels/Artist/Formations.vue

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

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

          <v-col cols="12" lg="6" md="6" sm="6"
          >
            <h3 class="formation-title">
              Webinaire de découverte - Nouveaux utilisateurs
            </h3>
            <p class="formation-details mb-6">
              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">  S'inscrire à nos webinaires</v-btn>
          </nuxt-link>
          </v-col>
        </v-row>
        </v-container>
  
      </div>
      <v-row>
            <LayoutUISubTitle
              :iconSize="6"
              :iconClasses="iconClasses"
              :titleText="' Quelques chiffres'"
            />
          </v-row>
      <v-row class="card-container mb-12">
        <v-col
          cols="3"
          class="d-flex justify-center align-center small-padding"
        >
          <LayoutCardStat
            :chiffre="'18 4634'"
            text="utilisateurs"
            backgroundColor="#fac20a"
          />
        </v-col>
        <v-col cols="3" class="d-flex justify-center align-center">
          <LayoutCardStat
            :chiffre="'3 424'"
            text="structures"
            backgroundColor="#fac20a"
          />
        </v-col>
        <v-col cols="3" class="d-flex justify-center align-center">
          <LayoutCardStat
            :chiffre="13"
            text="années d'expérience"
            backgroundColor="#fac20a"
          />
        </v-col>
      </v-row>

      <v-row />

      <v-row />
      <LayoutCarouselTrustCompanie  :items="items" :trustMessage="'nous ont déjà adoptées'" :structureCount="'3400 structures'"  />
    </LayoutContainer>
  </div>
</template>

<script setup>
const items = 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>

.v-row{
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}
.carousel-button i {
  color: black;
}

.carousel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid black;
  cursor: pointer;
  margin-right: 1rem;
  margin-top: 1rem;
}
.title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  text-align: center;
  color: #0e2d32;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.chiffre {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 60px;
  line-height: 68px;
  text-align: center;
  color: #091d20;
  margin-bottom: 0.5rem;
}
.formation-btn {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 18px;
  background: transparent;
  color: #eff9fb;
  border: 1px solid #eff9fb;
  border-radius: 0.5rem;
  margin-left: 7rem;
}
.formation-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #eff9fb;
  margin-left: 7rem;
}
.formation-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 26px;
  color: #ffffff;
  margin-left: 7rem;
  margin-bottom: 3rem;
}
.reunion-img {
  width: 600px;
  height: 500px;
  background-position: center;
  background-size: cover;
  border-radius: 10%;
  background-image: url("/images/logiciels/artist/webinaire.jpg");
}
.subtitle {
  font-family: "Barlow";
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2rem;
  font-weight: 600;
  line-height: 16px;
  display: flex;
  align-items: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.icon-title {
  color: #fac20a;
  font-size: 1.5rem;
  margin-right: 0.5rem;
  margin-left: 5rem;
}
.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;
}
.card {
  background: #fac20a;
  border-radius: 10px;
  width: 36rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>