site_logiciels/components/Logiciels/Artist/Formations.vue

<template>
  <div id="Webinaires">
    <LayoutContainer>
      <div class="container-green 2">
        <v-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" 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">
              Webinaire de découverte - Nouveaux utilisateurs
            </h3>
            <p class="formation-details mb-6" 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">
                S'inscrire à nos webinaires</v-btn
              >
            </nuxt-link>
          </v-col>
        </v-row>
      </div>
      <v-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"
          >
            <LayoutCardStat
              :chiffre="'184 634'"
              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-container>
      <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-container {
  padding: 0 !important;
}
.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;
}
.formation-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #eff9fb;
}
.formation-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 26px;
  color: #ffffff;
  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>