site_logiciels/components/Logiciels/School/Formations.vue

<template>
  <AnchoredSection id="webinars">
    <LayoutContainer>
      <div class="alt-theme pt-6 mt-12">
        <v-row class="center-90">
          <LayoutUISubTitle> Nos accompagnements sur-mesure </LayoutUISubTitle>
        </v-row>

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

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

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

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

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

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { Formation } from '~/types/interface'

const formations: Array<Formation> = [
  {
    image:
      '/images/components/formations/Formations_en_ligne_et_presentiel.jpg',
    alt: 'Formateur dans une salle avec 5 personnes levant la main',
    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',
  },
  {
    image: '/images/components/formations/Webinaires_visioconferences.jpg',
    alt: 'Femme sur son bureau avec devant deux écrans d’ordinateur de bureau en visioconférence devant 12 personnes',
    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',
  },
]
</script>

<style scoped>
:deep(h2) {
  width: 60rem;
}

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

.alt-color {
  color: var(--on-primary-color-alt);
}

.formation {
  .v-btn {
    width: 26rem;
    height: 44px;
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    background: transparent;
    color: var(--on-primary-color);
    border: 1px solid;
    border-color: var(--on-primary-color);
    border-radius: 0.5rem;
    text-transform: none;
  }

  h3 {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 26px;
    color: var(--secondary-color) !important;
    margin-bottom: 1.5rem;
  }

  h4 {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 26px;
    color: var(--on-primary-color);
    margin-bottom: 3rem;
  }

  .details {
    font-weight: 300;
    font-size: 1.2rem;
    max-width: 650px;
    line-height: 1.5rem;
    color: var(--on-primary-color);
  }

  @media (max-width: 1240px) {
    .background-img,
    h3,
    h4,
    .details {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .v-btn {
      width: 80%;
      margin-left: 10%;
    }
  }

  @media (max-width: 600px) {
    .v-btn {
      height: 96px;
    }

    :deep(.v-btn__content) {
      white-space: pre-wrap;
      line-height: 1.2em;
      padding: initial;
      text-align: center;
    }
  }
}
</style>