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

      <v-row class="mb-12">
        <v-col cols="6">
          <v-img
            src="/images/formation/programme2.jpg"
            class="programme-img1"/>
        </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 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
            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>
        <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">
          <v-img
            src="/images/formation/programme.jpg"
            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-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.v-img {
  width: 80%;
  height: 100%;
  border-radius: 10%;
}

h3, p {
    width: 35rem;
}

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

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

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

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