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 webinaire 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 { 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: 'Inscrivez-vous à l\'un de nos webinaires en choisissant une date sur l\'agenda et renseignez vos informations. ' +
            '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. ' +
            'Un mail de relance à J-1 vous sera envoyer vous rappelant votre participation au webinaire. ' +
            'Le jour J, cliquez sur l\'URL de connexion. Nous vous encourageons à arriver quelques minutes en avance pour vous assurer de pouvoir accéder au webinaire sans aucun problème technique. ' +
            'Lors du début du webinaire, toutes les instructions nécessaires vous seront fournies.'
  },
  {
    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-parleur.',
  },
  {
    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: 2rem;
    letter-spacing: .1rem;
    line-height: 3.5rem;
    margin-bottom: .5rem;
    margin-top: 2rem;
    text-transform: uppercase;
  }

  .strong-label {
    font-size: 1.5rem;
    font-weight: 400 !important;
    letter-spacing: .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 1px var(--on-neutral-color-light);
}
</style>