site_logiciels/components/Formation/Presentation.vue

<template>
  <div id="Présentation">
    <LayoutContainer>
      <v-row class="custom-row mt-6">
        <LayoutUISubTitle
          :iconSize="6"
          :iconClasses="iconClasses"
          :titleText="'Présentation de nos formations'"
        />
      </v-row>

      <v-row class="container-programme custom-row">
        <v-col cols="6">
          <img class="programme-img1" src="/images/formation/programme2.jpg" />
        </v-col>

        <v-col cols="6">
          <h3 class="title-programme">
            Un programme de formation complet sur nos logiciels
          </h3>
          <p class="details-programme">
            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>
          <br />
          <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
            initiation (individuel, en groupe, pour des évènements particuliers
            tels que des congrès, universités d’été, séminaires...
          </p>
        </v-col>
      </v-row>

      <v-row class="custom-row">
        <v-col cols="6">
          <h3 class="title-programme ml-16">
            Des formations à la demande et sur-mesure
          </h3>
          <p class="details-programme ml-16">
            Afin de prendre en compte les évolutions de votre structure, nous
            pouvons enseuite 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 cols="6">
          <img class="programme-img2" src="/images/formation/programme.jpg" />
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.school {
  color: #64afb7;
}

.manager {
  color: #d8050b;
}
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  width: 25rem;
  margin-left: 2rem;
}

.subtitle {
  color: #071b1f;
  font-family: "Barlow";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.title {
  font-family: "Barlow";
  font-weight: 600;
  font-size: 3rem;
  line-height: 18px;
  color: #091d20;
  margin-bottom: 4rem;
}

.icon-title {
  margin-right: 0.7rem;
  color: #64afb7;
}
.details-programme {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 20px;
  color: #091d20;
  width: 35rem;
  text-align: justify;
}

.title-programme {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: #071b1f;
  width: 35rem;
  margin-bottom: 3rem;
  margin-top: 4rem;
}

.container-programme {
  margin-top: 5%;
  margin-bottom: 5%;
}

.programme-img1 {
  width: 80%;
  height: 100%;
  border-radius: 10%;
  margin-left: 5rem;
}

.programme-img2 {
  width: 60%;
  height: 100%;
  border-radius: 10%;
  margin-left: 5rem;
}
</style>