site_logiciels/components/Logiciels/Artist/Fonctionnalites.vue

<template>
  <div id="Fonctionnalites">
    <LayoutContainer>
      <div class="container-green">
        <v-row>
          <div class="d-flex justify-center align-center">
            <v-icon class="fa-brands fa-react 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>

        <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:#FAC20A;
}

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

.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>