site_logiciels/components/Formation/Certification.vue

<template>
  <AnchoredSection id="certification">
    <LayoutContainer>
      <v-row class="center-90 mb-4">
        <v-col cols="12" md="5">
          <LayoutUISubTitle> DES FORMATIONS CERTIFIÉES </LayoutUISubTitle>

          <LayoutUITitle>
            Certification Qualiopi : Marque de certification
          </LayoutUITitle>

          <div class="bloc-certif">
            <p>
              Nos formations sont certifiées Qualiopi - Actions de formations.
            </p>

            <p class="details-certifications">
              La marque « Qualiopi » vise à :
            </p>

            <ul>
              <li>
                Attester de la qualité du processus mis en œuvre par les
                prestataires d’actions concourant au développement des
                compétences ;
              </li>
              <li>
                Permettre une plus grande lisibilité de l’offre de formation
                auprès des entreprises et des usagers.
              </li>
            </ul>
          </div>
        </v-col>

        <v-col cols="12" md="7" class="image-container">
          <v-img
            src="/images/logos/qualiopi/Logo-Qualiopi_Processus_Certifié-Republique_Française.png"
            alt="Deux personnes en train d’échanger sur un projet devant deux ordinateurs dans un open space"
          />

          <v-btn
            max-width="510px"
            :href="
              runtimeConfig.public.fileStorageBaseUrl +
              '/Certificat_de_Conformite_QUALIOPI.pdf'
            "
            target="_blank"
          >
            Visualiser notre certificat Qualiopi
          </v-btn>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

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

const runtimeConfig = useRuntimeConfig()
</script>

<style scoped lang="scss">
.bloc-certif {
  text-align: justify;
  margin: 18px;
}

ul {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: var(--primary-color);
  margin-top: 1rem;
  margin-left: 22px;
}

.details-certifications {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: var(--primary-color);
  margin-top: 1rem;
}

.image-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  .v-img {
    width: 80%;
    max-width: 500px;
    margin: auto;
  }

  .v-btn {
    background: var(--secondary-color);
    color: var(--on-secondary-color);

    @media (max-width: 1024px) {
      margin-top: 24px;
    }
  }
}
</style>