site_logiciels/components/Formation/Presentation.vue

<template>
  <AnchoredSection id="presentation">
    <LayoutContainer>
      <v-row class="mt-6 center-90">
        <LayoutUISubTitle> Présentation de nos formations </LayoutUISubTitle>
      </v-row>

      <v-row class="mb-12 center-90">
        <v-col md="6">
          <v-img
            src="/images/pages/formations/presentation/Un_programme_de_formation_complet_sur_nos_logiciels_Opentalent.jpg"
            alt="Mains tapant sur un clavier d’ordinateur portable"
            class="programme-img1"
          />
        </v-col>

        <v-col md="6">
          <h3 class="title-programme mb-6">
            Un programme de formation complet sur nos logiciels
          </h3>

          <p class="details-programme mb-4">
            Nous avons défini un programme de formation complet pour
            l’utilisation de notre logiciel
            <span class="school"> Opentalent School </span>pour lequel la
            formation est nécessaire lors de sa mise en place. Au terme de cette
            formation, votre logiciel sera complètement paramétré et vous serez
            complètement autonome.
          </p>

          <p class="details-programme">
            Dans le cadre de notre solution
            <span class="manager">Opentalent Manager</span> , nous pouvons
            organiser, selon vos besoins, des sessions de formation et
            d'initiation individuelles, en groupe, pour des événements
            particuliers tels que des congrès, séminaires...
          </p>
        </v-col>
      </v-row>

      <v-row class="center-90">
        <v-col md="6">
          <h3 class="title-programme mb-6 mt-4">
            Des formations à la demande et sur-mesure
          </h3>

          <p class="details-programme">
            Afin de prendre en compte les évolutions de votre structure, nous
            pouvons ensuite organiser des sessions de formations spécifiques
            pour répondre à vos besoins : outils complets, mise en route,
            fonctionnalités spécifiques, utilisation du site web...
          </p>
        </v-col>

        <v-col md="6">
          <v-img
            src="/images/pages/formations/presentation/Des_formations_sur-mesure.jpg"
            alt="Deux personnes en train d’échanger sur un projet devant deux ordinateurs dans un open space"
            class="programme-img2"
          />
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
</script>

<style scoped lang="scss">
.v-img {
  width: 560px;
  height: 100%;
  border-radius: 10%;

  @media (max-width: 600px) {
    margin-left: auto;
    margin-right: auto;
  }
}

h3,
p {
  width: 35rem;
  max-width: 100%;

  @media (max-width: 1240px) {
    width: 100%;
  }
}

h3 {
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
}

p {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 20px;
}

.school {
  color: var(--school-color);
}

.manager {
  color: var(--manager-color);
}
</style>