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

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

        <v-col cols="6">
          <h3 class="title-programme mb-6">
            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 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 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>

@media (max-width: 1800px) {
  .custom-row {
  margin-left: auto;
  margin-right: auto;
}
}
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.school {
  color: #64afb7;
}

.manager {
  color: #d8050b;
}


.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;
}


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

.programme-img2 {
  width: 80%;
  height: 100%;
  border-radius: 10%;
}
</style>
