site_logiciels/components/Logiciels/Manager/Pyramide.vue

<template>
  <div id="détails">
    <LayoutContainer>
      <v-row>
        <div class="d-flex justify-center align-center">
          <v-icon class="fa-brands fa-react icon-title" />
          <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-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" />
          </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" />
          </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" />
          </div>
          <p class="d-flex justify-center align-center">
            Paiement Sécurisé
          </p>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</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>