site_logiciels/components/Formation/Participation.vue

<template>
  <AnchoredSection id="inscription">
    <LayoutContainer class="alt-theme">
      <v-row class="center-90">
        <v-col cols="12">
          <LayoutUISubTitle> Accessibilité </LayoutUISubTitle>
        </v-col>
      </v-row>

      <v-row class="mb-12 center-90">
        <v-col cols="12" lg="6">
          <v-img
            src="/images/pages/formations/accessibilite/Formations_accessibles_a_tous.jpg"
            alt="Ordinateur avec un écran en visioconférence avec plusieurs personnes posé sur une table avec un pichet posé à côté"
            class="participation-img"
            cover
          />
        </v-col>

        <v-col cols="12" lg="4">
          <h3 class="title-participation text-center mb-8">
            Vous souhaitez participer à une formation ?
          </h3>

          <div class="details-participations">
            <p class="mb-6">
              Nous vous répondons sous 48h (hors week-ends). Délais d'accès:
              après accord, nous mettons tout en oeuvre pour vous mettre à
              disposition un formateur sous 1 mois.
            </p>

            <p class="mb-6">
              Nos formations peuvent être accessibles aux personnes en situation
              de handicap. Chaque situation étant unique, nous vous demandons de
              préciser à l’inscription votre handicap. Nous pourrons ainsi
              confirmer l’ensemble des possibilités afin de vous permettre de
              suivre la formation dans les meilleures conditions, en accord avec
              votre employeur.
            </p>
            <p>
              Pour toutes informations complémentaires, nous vous conseillons
              les structures suivantes : ONISEP, AGEFIPH et FIPHFP. Pour le bon
              déroulement de la formation, il est nécessaire de disposer d’un
              espace de travail calme et équipé d’au moins un ordinateur,
              connecté à internet, et dont le navigateur (Mozilla Firefox,
              Google Chrome, ou Apple Safari) est à jour. Nous recommandons
              d’utiliser un ordinateur par personne. Les participants devront
              également avoir des ordinateurs équipés de micros et de
              haut-parleurs, préférablement des micro-casques pour un meilleur
              confort d’écoute.
            </p>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

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

<style scoped lang="scss">
.container {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
}

.v-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.icon-title {
  font-size: 1rem;
  margin-right: 1rem;
}
.container-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

h3 {
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  text-align: center;
  color: var(--on-primary-color);
}

.details-participations {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  margin: 1rem auto auto auto;
  width: 800px;
  max-width: 100%;
  color: var(--on-primary-color);
}

.participation-img {
  position: relative;
  background-position: center;
  background-size: cover;
  border-radius: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 16px 20% 16px 0;
}

@media (max-width: 1240px) {
  .v-img {
    margin-left: auto;
    margin-right: auto;
  }
}
</style>