site_logiciels/components/Logiciels/Manager/Pyramide.vue

<template>
  <LayoutContainer>
    <v-row>
      <div class="d-flex justify-center align-center">
        <v-icon class="fa-brands fa-react icon-title"></v-icon>
        <h4 class="subtitle-pyramide">Un réseau pyramidal</h4>
      </div>
    </v-row>

    <v-row>
      <v-col cols="4">
        <div class="row-pyramide">
          <h4 class="title-pyramide">Opentalent Manager, un logiciel adapté à chacun</h4>
        <p class="detail-pyramide">
          Notre système s'adapte à toutes les structures de réseau pyramidal,
          quel que soit le nombre de niveau.
        </p>
        </div>

      </v-col>

      <v-col cols="8">
        <v-img
        src="/images/logiciels/manager/schema_manager.png"
        class="schema-manager"
        >

        </v-img>
      </v-col>
    </v-row>

    <v-row >
      <v-col cols="4" class="border" >
        <div class="d-flex justify-center align-center ">
          <v-icon  class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>
      <v-col cols="4" class="border">
        <div class="d-flex justify-center align-center">
          <v-icon  class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>

      <v-col cols="4" class="border">
        <div class="d-flex justify-center align-center">
          <v-icon  class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>

.icon{
  font-size: 3rem;
  color: #0E2D32;
}
.schema-manager{
  width: 70%;
  height: 100%;
}

.row-pyramide{
  margin-left: 2rem;
}

.detail-pyramide{
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  color: #091d20;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 22rem;
}
.title-pyramide{
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  color: #091d20;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 20rem;
}
.icon-title {
  color: #d8050b;
  margin-right: 1rem;
  font-size: 1rem;
  margin-left: 2rem;
}

.subtitle-pyramide {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  color: #091d20;
  margin-top: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
</style>