site_logiciels/components/Logiciels/School/Fonctionnalites.vue

<template>
  <div id="Fonctionnalites">
    <LayoutContainer>
      <div class="container-green">
        <v-row>
          <div class="d-flex justify-center align-center">
            <v-icon size="10" class="fa-solid fa-circle icon-title" />
            <h4 class="subtitle-fontionnalite">
              Découvrez toutes les fonctionnalités de notre solution
            </h4>
          </div>
        </v-row>

        <v-row>
          <h2 class="title-fonctionnalite">
            Des fonctionnalités adaptées à vos besoins
          </h2>
        </v-row>

        <v-row>
          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">ESPACES DÉDIÉS :</h6>
              <ul class="list-details">
                <li class="li-details">Administration</li>
                <li class="li-details">Professeurs</li>
                <li class="li-details">Élèves/Familles</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">RÉPERTOIRE</h6>
              <ul class="list-details">
                <li class="li-details">Élèves et responsable légaux</li>
                <li class="li-details">Personnel administratif et professeurs</li>
                <li class="li-details">Contacts extérieurs, partenaires & donateurs</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">PRÉINSCRIPTION EN LIGNE</h6>
              <ul class="list-details">
                <li class="li-details">Parametrage personnalisé des formulaires & mails automatiques</li>
                <li class="li-details">Gestion des réinscriptions et des nouvelles inscriptions</li>
                <li class="li-details">Gestion des quotas et du suivi des préinscription en ligne</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">AGENDA :</h6>
              <ul class="list-details">
                <li class="li-details">Création et gestion des cours, examens, événements et prestations pédagogiques</li>
                <li class="li-details">Planning interactif avec un contrôle de cohérence</li>
                <li class="li-details">Gestion des présences et absences</li>
              </ul>
            </div>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">PARC MATÉRIEL :  </h6>
              <ul class="list-details">
                <li class="li-details">Gestion de votre parc matériel (instruments, costumes, accessoires..)</li>
                <li class="li-details">Locations et prêts de matériel</li>
                <li class="li-details">Planification de la maintenance et entretien de matériel</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">SUIVI PÉDAGOGIQUE : </h6>
              <ul class="list-details">
                <li class="li-details">Gestion du cursus pédagogique (critères personnalisables)</li>
                <li class="li-details">Création des examens et envoi des convocations</li>
                <li class="li-details">Édition des bulletins de notes</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">FACTURATION :</h6>
              <ul class="list-details">
                <li class="li-details">Facturation automatisée selon différents critères </li>
                <li class="li-details">Suivi des règlements et gestion des relances</li>
                <li class="li-details">En options : de nombreux moyens de paiement</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">COMMUNICATION :</h6>
              <ul class="list-details">
                <li class="li-details">Édition et envoi de courriers, de mails ou de SMS*(*en option)</li>
                <li class="li-details">Création de modèles de courriers, mails ou SMS</li>
                <li class="li-details">Outil de publipostage intégré pour un envoi personnalisé</li>
              </ul>
            </div>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">SITE INTERNET : </h6>
              <ul class="list-details">
                <li class="li-details">Gestion intégrée au logiciel</li>
                <li class="li-details">Mise à jour automatique des membres et événements sur votre site</li>
                <li class="li-details">Possibilité de personnalisé votre template</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">STATISTIQUE : </h6>
              <ul class="list-details">
                <li class="li-details">Rapport d'activité complet en fonction de vos activités</li>
                <li class="li-details">Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement</li>
                <li class="li-details">Export des données du logiciel pour une analyse complète</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">RÉSEAU CMF : </h6>
              <ul class="list-details">
                <li class="li-details">Accès au répertoire du réseau</li>
                <li class="li-details">Renouvellement de votre adhésion fédérale</li>
                <li class="li-details">Gestion de l'assurance CMF</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details" />
              <h6 class="title-details">PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS :  </h6>
              <ul class="list-details">
                <li class="li-details">Sur votre site internet intégré</li>
                <li class="li-details">Sur l'agenda de la CMF</li>
                <li class="li-details">Sur l'Agenda culturel Opentalent </li>
              </ul>
            </div>
          </v-col>
        </v-row>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>

.li-details{
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
}
.list-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.2rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
  width: 14rem;
}
.title-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
  width: 15rem;
  text-transform: uppercase;
}
.icon-details {
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
  color: #c1eff0;
}

.icon-title {
  font-size: 0.8rem;
  margin-bottom: 2rem;
  color: #c1eff0;
}

.subtitle-fontionnalite {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-family: "Barlow";
  margin-left: 1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  width: 22rem;
}

.title-fonctionnalite {
  font-family: "Barlow";
  font-weight: 600;
  font-size: 3rem;
  font-style: normal;
  font-size: 2rem;
  line-height: 1.9rem;
  margin-left: 1rem;
  margin-top: -1rem;
  width: 25rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.container-green {
  background-color: #0e2d32;
  padding: 4rem;
  color: #eff9fb;
}
</style>