site_logiciels/components/Logiciels/Manager/Formation.vue

<template>
  <div id="Formations">
    <LayoutContainer>
      <div class="container-green mt-12">
        <v-row>
          <LayoutUISubTitle
            :iconSize="6"
            :iconClasses="iconClasses"
            :titleText="'Nos accompagnements pour aller plus loin '"
            title-color="#fff"
            class="mb-6 mt-6"
          />
        </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">
              <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 />
            </div>
            <nuxt-link :to="formation.link">
              <v-btn class="formation-btn mt-6">{{ formation.buttonText }}</v-btn>
            </nuxt-link>
          </v-col>
        </v-row>
      </div>
      <v-row>
        <LayoutUISubTitle
          :iconSize="6"
          :iconClasses="iconClasses"
          :titleText="' Quelques chiffres'"
          class="mt-6 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="140"
              text="Structures en réseau"
              backgroundColor="#d8050b"
            />
          </v-col>
          <v-col cols="3" class="d-flex justify-center align-center">
            <LayoutCardStat
              :chiffre="'300 000'"
              text="Utilisateurs"
              backgroundColor="#d8050b"
            />
          </v-col>
          <v-col cols="3" class="d-flex justify-center align-center">
            <LayoutCardStat
              :chiffre="12"
              text="années de collaboration"
              backgroundColor="#d8050b"
            />
          </v-col>
        </v-row>
      </v-container>

      <v-row>
        <v-col cols="12">
          <h2 class="text-center" style="font-size: 2rem">
            La plus grande Confédération Musicale de France nous fait confiance
          </h2>
        </v-col>
      </v-row>

      <!-- <h4 class="text-center title-cmf">
        La plus grande Confédération Musicale de France nous fait confiance
      </h4> -->
      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img mb-6" />
    </LayoutContainer>
  </div>
</template>

<script setup>
const formations = ref([
  {
    id: 1,
    image: "/images/logiciels/school/formation.png",
    overlayClass: "image-overlay1",
    sessions: "Formation sur-mesure",
    title: " Des formations adaptées à votre projet - en ligne",
    description:
      "Chaque projet de solution de mise en réseau d'organisation nécessite un accompagnement sur-mesure par notre équipe de formation en fonction de vos besoins.",
    buttonText: "Formation sur-mesure",
    link: "/nous-contacter",
  },
  {
    id: 2,
    image: "/images/logiciels/school/webinaire.png",
    overlayClass: "image-overlay2",
    sessions: "Webinaire CMF Réseau",
    title: "Trouvez le webinaire qu'il vous faut ",
    description:
      "Des explications précises sur certains modules du logiciel Opentalent Manager, 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>

:deep(.card) {
  color: white;

}

:deep(.chiffre) {
  color: white;

}
.v-container {
  padding: 0 !important;
}
.v-row {
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}
.cmf-img {
  width: 30rem;
  height: 18rem;
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
}
.image-wrapper {
  position: relative;
}
.background-img {
  width: 600px;
  margin-left: 5rem;
  height: 400px;
  background-size: cover;
  background-position: center;
}

.col-details {
  margin-right: 6rem;
  margin-left: 5rem;
  height: 15rem;
}

.formation-btn {
  margin-left: 5rem;
  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-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>