site_logiciels/components/Webinaire/FAQ.vue

<!--
Foire aux questions
-->
<template>
  <LayoutContainer>
    <v-row class="center-90">
      <LayoutUISubTitle> Des questions ? </LayoutUISubTitle>
    </v-row>

    <v-row class="center-90">
      <v-col cols="12" class="section-title">
        <h3>Tout savoir sur nos webinaires en ligne</h3>

        <div class="strong-label">Les questions les plus fréquentes</div>
      </v-col>
    </v-row>

    <div class="faq center-90">
      <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
        <div
          :class="'question' + (isOpen(index) ? ' open' : '')"
          @click="toggle(index)"
        >
          <v-icon v-if="isOpen(index)" icon="fas fa-angle-down" />
          <v-icon v-else icon="fas fa-angle-right" />
          {{ item.question }}
        </div>

        <div v-if="isOpen(index)" class="answer" v-html="item.answer" />
      </div>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import type { FaqEntry } from '~/types/interface'

const faqItems: Array<FaqEntry> = [
  {
    question: 'Comment s’inscrire à un webinaire?',
    answer:
      'Pour vous inscrire à un webinaire, suivez le lien "Inscrivez-vous" correspondant au cours qui vous intéresse.',
  },
  {
    question: 'Combien de temps dure nos webinaires ?',
    answer:
      'Nos webinaires durent en moyenne 1H30. Les sessions de questions/réponses peuvent parfois prolonger la durée prévue de nos webinaires.',
  },
  {
    question: 'Comment se passe un webinaire ?',
    answer:
      '<strong>Inscription et confirmation</strong>' +
      "<ol style='margin-top:10px;margin-bottom:10px;padding-left: 20px;'><li>Inscrivez-vous à l'un de nos webinaires en choisissant une date sur l'agenda et renseignez vos informations.</li>" +
      "<li>Vous recevrez à la suite de votre inscription sur notre site, un email de confirmation avec un rappel de la date et de l'horaire de participation ainsi que l'URL de connexion pour le webinaire.</li>" +
      '<li>Un mail de relance à J-1 vous sera envoyer vous rappelant votre participation au webinaire.</li></ol>' +
      '<strong>Le jour J</strong>' +
      "<ol style='margin-top:10px;margin-bottom:10px;padding-left: 20px;'><li>Cliquez sur l'URL de connexion." +
      '<li>Nous vous encourageons à arriver quelques minutes en avance pour vous assurer de pouvoir accéder au webinaire sans aucun problème technique.</li>' +
      '<li>Lors du début du webinaire, toutes les instructions nécessaires vous seront fournies.</li></ol>',
  },
  {
    question: 'De quel matériel aurais-je besoin pour suivre le webinaire ?',
    answer:
      "Pour plus de confort, il est recommandé d'être équipé d'un outil (de préférence un ordinateur) disposant d'un micro et de haut-parleurs.",
  },
  {
    question: 'Y a-t-il une limite de participants ?',
    answer:
      "Il n'y a pas de limite de participants lors de nos webinaires. Cependant, nous nous réservons le droit d'annuler une session si le nombre de participants est inférieur à 3 personnes.",
  },
  {
    question: "J'ai besoin d'aide...",
    answer:
      'Notre équipe est là pour vous. <br/><button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;margin-top: 6px;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>',
  },
]

const activeIndex: Ref<number | null> = ref(null)

function toggle(index: number) {
  activeIndex.value = activeIndex.value === index ? null : index
}

function isOpen(index: number) {
  return activeIndex.value === index
}
</script>

<style scoped lang="scss">
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;

  h3 {
    font-size: 42px;
    letter-spacing: 0.1rem;
    line-height: 3.5rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
  }

  .strong-label {
    font-size: 1.5rem;
    font-weight: 400 !important;
    letter-spacing: 0.1rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
  }
}

.faq {
  padding: 1rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.question {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;

  :hover {
    background-color: var(--neutral-color-alt-strong);
  }

  .v-icon {
    font-size: 16px !important;
    color: var(--on-primary-color-alt);
    margin-right: 0.5rem;
  }
}

.question.open {
  border-radius: 4px 4px 0 0;
}

.answer {
  background-color: var(--secondary-color-light);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0 0 4px 4px;
  box-shadow: -1px 2px 6px 3px var(--on-neutral-color-extra-light);
}
</style>