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"></v-icon>
            <h4 class="subtitle-fontionnalite">
              Découvrez toutes les foncitonnalité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"></v-icon>
              <h6 class="title-details">
                Bénéficiez d’un espace dédié pour chacun
              </h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès é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"></v-icon>
              <h6 class="title-details">Gérez les personnes</h6>
              <ul class="list-details">
                <li>Gestion des élèves, parents/tuteurs</li>
                <li>Gestion des professeurs et personnel administratif</li>
                <li>
                  Gestion des contacts extérieurs, donateurs et partenaires
                </li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details"></v-icon>
              <h6 class="title-details">Facilitez l'inscription en ligne</h6>
              <ul class="list-details">
                <li>Paramétrage des formulaires</li>
                <li>Lancement automatisé des réinscriptions</li>
                <li>Validation des inscriptions</li>
                <li>
                  Inscription en ligne optimisée pour les mobiles et tablettes
                </li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details"></v-icon>
              <h6 class="title-details">Administrez votre propre site</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès élèves/familles</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"></v-icon>
              <h6 class="title-details">Planifiez vos évènements</h6>
              <ul class="list-details">
                <li> Gestion intégrée au logiciel</li>
                <li>Simplicité d'utilisation</li>
                <li>Mise à jour automatique</li>
                <li>Multi-utilisateurs</li>
                <li>Sécurisé</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details"></v-icon>
              <h6 class="title-details">Gérez votre matériel</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès é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"></v-icon>
              <h6 class="title-details">Assurez le suivi pédagogique</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès é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"></v-icon>
              <h6 class="title-details">Facturez en tout simplicité</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès élèves/familles</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"></v-icon>
              <h6 class="title-details">Planifiez vos évènements</h6>
              <ul class="list-details">
                <li> Gestion intégrée au logiciel</li>
                <li>Simplicité d'utilisation</li>
                <li>Mise à jour automatique</li>
                <li>Multi-utilisateurs</li>
                <li>Sécurisé</li>
              </ul>
            </div>
          </v-col>

          <v-col cols="3">
            <div class="details-container">
              <v-icon class="fa-brands fa-react icon-details"></v-icon>
              <h6 class="title-details">Gérez votre matériel</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès é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"></v-icon>
              <h6 class="title-details">Assurez le suivi pédagogique</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès é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"></v-icon>
              <h6 class="title-details">Facturez en tout simplicité</h6>
              <ul class="list-details">
                <li>Accès admin</li>
                <li>Accès professeurs</li>
                <li>Accès élèves/familles</li>
              </ul>
            </div>
          </v-col>
        </v-row>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>
.list-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 0.9rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
  width: 14rem;
}
.title-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
  width: 15rem;
}
.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-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
  margin-left: 1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  width: 12rem;
}

.title-fonctionnalite {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  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: 5rem;
  color: #eff9fb;
}
</style>