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">
          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
            <div class="image-wrapper mb-6">
              <v-img :src="formation.image" class="reunion-img1" />
              <div :class="formation.overlayClass"></div>
            </div>
            <div class="col-details">
              <h4 class="session-title">
                {{ formation.sessions }} sessions disponibles
              </h4>
              <h3 class="formation-title">{{ formation.title }}</h3>
              <p class="formation-details">{{ formation.description }}</p>
              <br />
              <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
            </div>
          </v-col>
        </v-row>
      </div>

      <v-row>
        <v-col cols="4">
          <v-row>
            <LayoutUISubTitle
          :iconSize="6"
          :iconClasses="iconClasses"
          :titleText="'QUELQUES CHIFFRES'"
        />
          </v-row>
        </v-col>
      </v-row>
      <v-row justify="center" class="card-container">
    <v-col cols="12" sm="6" md="3" class="my-2">
      <LayoutCardStatCard chiffre="30 <1500" label="élèves" />
    </v-col>
    <v-col cols="12" sm="6" md="3" class="my-2">
      <LayoutCardStatCard chiffre="234" label="Clients" />
    </v-col>
    <v-col cols="12" sm="6" md="3" class="my-2">
      <LayoutCardStatCard chiffre="20304" label="Utilisateurs" />
    </v-col>
    <v-col cols="12" sm="6" md="3" class="my-2">
      <LayoutCardStatCard chiffre="13" label="années d’expériences" />
    </v-col>
  </v-row>
      <v-row>
        <LogicielsSchoolCaroussel />
      </v-row>

      <v-row />
    </LayoutContainer>
  </div>
</template>

<script setup>
const formations = ref([
  {
    id: 1,
    image: "/images/logiciels/school/reunion.jpg",
    overlayClass: "image-overlay1",
    sessions: "2",
    title: "Formation prise en main du logiciel - 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: "S’incrire à une formation",
  },
  {
    id: 2,
    image: "/images/logiciels/school/reunion.jpg",
    overlayClass: "image-overlay2",
    sessions: "10",
    title: "Webinaire - Apprendre à piloter son activité",
    description:
      "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
    buttonText: "S'inscrire au webinaire",
  },
]);
</script>

<style scoped>
.col-details {
  margin-right: 6rem;
  margin-left: 5rem;

}
.image-wrapper {
  position: relative;
}
.formation-btn {
  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;
}
.reunion-img1 {
  width: 80%;
  margin-left: 5rem;
  height: 100%;
}
.container-green {
  background-color: #0e2d32;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
}

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