site_logiciels/components/Logiciels/Manager/Fonctionnalites.vue

<template>
  <div id="Presentation">
  <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">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">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">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-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">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">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">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-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;
}
.title-details{
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0.7rem;
}
.icon-details {
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
  color: #D8050B;
}

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

.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;
  margin-left: 1rem;
  margin-top: -1rem;
  width: 25rem;
  margin-bottom: 2rem;
}


.container-green {
  background-color: #0E2D32;
  padding: 5rem;
  color: #EFF9FB;
}
</style>