site_logiciels/components/Logiciels/Manager/Formation.vue

<template>
  <AnchoredSection id="webinars">
    <LayoutContainer>
      <div class="alt-theme pt-6 mt-12">
        <v-row>
          <LayoutUISubTitle class="mb-6 mt-6">
            Nos accompagnements pour aller plus loin
          </LayoutUISubTitle>
        </v-row>

        <v-row class="formation pb-6 align-center">
          <v-col
            cols="6"
            v-for="(formation, index) in formations"
            :key="index"
          >
            <div class="mb-6">
              <v-img
                :src="formation.image"
                class="background-img"
              />
            </div>

            <div>
              <h4>
                {{ formation.sessions }}
              </h4>

              <h3>
                {{ formation.title }}
              </h3>

              <p class="details mb-5">
                {{ formation.description }}
              </p>

              <v-btn :to="formation.link">
                {{ formation.buttonText }}
              </v-btn>
            </div>
          </v-col>
        </v-row>
      </div>

      <v-row class="align-center">
        <LayoutUISubTitle>
          Quelques chiffres
        </LayoutUISubTitle>
      </v-row>

      <v-container>
        <v-row class="card-container justify-center mb-12">
          <v-col
            cols="3"
            class="d-flex justify-center align-center small-padding"
          >
            <CommonCardStat
              number="140"
              text="Structures en réseau"
              backgroundColor="#d8050b"
            />
          </v-col>
          <v-col cols="3" class="d-flex justify-center align-center">
            <CommonCardStat
              number="300 000"
              text="Utilisateurs"
              backgroundColor="#d8050b"
            />
          </v-col>
          <v-col cols="3" class="d-flex justify-center align-center">
            <CommonCardStat
              number="12"
              text="Années de collaboration"
              backgroundColor="#d8050b"
            />
          </v-col>
        </v-row>
      </v-container>

      <v-row>
        <v-col cols="12" class="justify-center">
          <span class="cmf-trust-statement">
            La plus grande Confédération Musicale de France nous fait confiance
          </span>
        </v-col>
      </v-row>

      <v-img
        src="/images/logiciels/manager/cmf.jpg"
        class="cmf-img mb-6"
      />
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup>
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";

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>
.v-row {
  max-width: 1600px;
  margin: 0 auto;
}

:deep(h2) {
  width: 60rem;
}

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

.formation {
  .v-btn {
    font-family: "Barlow", serif;
    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;
  }

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

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

  .details {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #eff9fb;
  }
}

.cmf-img {
  width: 30rem;
  height: 18rem;
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
}

.cmf-trust-statement {
  font-size: 2rem;
  text-align: center;
}
</style>