site_logiciels/components/Logiciels/School/Formations.vue

<template>
  <div id="formations">
    <LayoutContainer>
      <div class="container-green mt-12">
        <v-row>
          <LayoutUISubTitle
            :iconSize="6"
            :iconClasses="iconClasses"
            :titleText="'Nos accompagnements sur-mesure'"
            title-color="#fff"
          />
        </v-row>
        <v-row class="mb-6 align-center">
          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
            <div class="image-wrapper mb-6">
              <div :class="formation.overlayClass"></div>
              <div
                :style="{ backgroundImage: 'url(' + formation.image + ')' }"
                class="background-img"
              ></div>
            </div>
            <div class="col-details">
              <h4 class="session-title">
                {{ formation.sessions }}
              </h4>
              <h3 class="formation-title">{{ formation.title }}</h3>
              <p class="formation-details">{{ formation.description }}</p>
              <br />
              <nuxt-link :to="formation.link">
                <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
              </nuxt-link>
            </div>
          </v-col>
        </v-row>
      </div>

      <v-row class="aling-center">
        <v-col cols="4">
          <v-container> </v-container>
          <v-row no-gutters>
            <LayoutUISubTitle
              :iconSize="6"
              :iconClasses="iconClasses"
              :titleText="' Pour les petits comme pour les GRANDS établissements d\'enseignement artistique '"
            />
          </v-row>
        </v-col>
      </v-row>

      <v-container>
        <v-row class="mb-12">
          <v-col
            cols="12"
            lg="3"
            class="d-flex justify-center align-center small-padding"
          >
            <LayoutCardStat
              :chiffre="'30 > 1500'"
              text="élèves"
              backgroundColor="#c3e5e7"
            />
          </v-col>
          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
            <LayoutCardStat
              :chiffre="234"
              text="Clients"
              backgroundColor="#c3e5e7"
            />
          </v-col>
          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
            <LayoutCardStat
              :chiffre="20304"
              text="Utilisateurs"
              backgroundColor="#c3e5e7"
            />
          </v-col>
          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
            <LayoutCardStat
              :chiffre="13"
              text="années d'expérience"
              backgroundColor="#c3e5e7"
            />
          </v-col>
        </v-row>
      </v-container>
      <v-row />
      <LayoutCarouselTrustCompanie :items="items" />
    </LayoutContainer>
  </div>
</template>

<script setup>
const formations = ref([
  {
    id: 1,
    image: "/images/logiciels/school/formation.png",
    overlayClass: "image-overlay1",
    sessions: "3 formations disponibles",
    title: "Des formations adaptées à chacun - en ligne",
    description:
      "Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux et que vous n’avez pas de temps à perdre,...",
    buttonText: "Découvrir toutes nos formations",
    link: "/formations",
  },
  {
    id: 2,
    image: "/images/logiciels/school/webinaire.png",
    overlayClass: "image-overlay2",
    sessions: "Toutes nos sessions",
    title: "Trouvez le webinaire qu'il vous faut ",
    description:
      "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
    buttonText: "Découvrir nos webinaires ",
    link: "/webinaires",
  },
]);
const items = ref([
  { src: "/images/reviews/school/review1.svg" },
  { src: "/images/reviews/school/review2.png" },
  { src: "/images/reviews/school/review3.png" },
  { src: "/images/reviews/school/review4.jpeg" },
  { src: "/images/reviews/school/review5.jpeg" },
  { src: "/images/reviews/school/review6.jpeg" },
]);
</script>

<style scoped>
.v-row {
  max-width: 1600px;
  margin: 0 auto;
}

.background-img {
  width: 600px;
  height: 400px;
  background-size: cover;
  background-position: center;
}

.col-details {
  margin-right: 6rem;
}

.formation-btn {
  font-family: "Barlow";
  font-style: normal;
  width: 30rem;
  height: 4rem;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 18px;
  background: transparent;
  color: #eff9fb;
  border: 1px solid #eff9fb;
  border-radius: 0.5rem;
  text-transform: none;
}
.formation-details {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #eff9fb;
}
.formation-title {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 26px;
  color: #ffffff;
  margin-bottom: 3rem;
}

.session-title {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 26px;
  color: #ffffff;
  margin-bottom: 3rem;
}

.container-green {
  background-color: #0e2d32;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
}

.card-container {
  margin-bottom: 20px;
  margin-left: 10rem;
  margin-right: 0rem;
}
</style>