site_logiciels/components/Logiciels/Manager/Accompagnement.vue

<template>
  <div id="abonnement">
    <LayoutContainer>
      <div class="container-green">
        <div class="container-title">
          <v-icon class="fa-brands fa-react icon-title"></v-icon>
          <h4 class="subtitle-accompagnement">
            Nos accompagnements pour aller plus loin
          </h4>
        </div>

        <div class="image-container">
          <v-row>
            <v-col cols="6">
              <div class="session-description">
                <v-img
                  src="/images/logiciels/manager/Webinaire.png"
                  class="accompagnement-img left-img"
                ></v-img>

                <small class="session left">X sessions disponibles</small>
                <h5 class="session-name left">
                  Formation prise en main du logiciel
                </h5>
                <p class="session-details left">
                  Destinée aux nouveaux utilisateurs, elle est obligatoire lors
                  de l'acquisition du logiciel. Elle est également utile lors
                  d'un changement de personnel dans la structure.
                </p>
                <v-btn class="session-btn left"
                  >S’incrire à une formation</v-btn
                >
              </div>
            </v-col>

            <v-col cols="6">
              <div class="session-description">
                <v-img
                  src="/images/logiciels/manager/Webinaire.png"
                  class="accompagnement-img"
                ></v-img>

                <small class="session">X sessions disponibles</small>
                <h5 class="session-name">
                  Formation prise en main du logiciel
                </h5>
                <p class="session-details">
                  Destinée aux nouveaux utilisateurs, elle est obligatoire lors
                  de l'acquisition du logiciel. Elle est également utile lors
                  d'un changement de personnel dans la structure.
                </p>
                <v-btn class="session-btn">S’incrire à une formation</v-btn>
              </div>
            </v-col>
          </v-row>
        </div>
      </div>

      <v-row class="card-container">
        <v-col cols="4">
          <div class="card">
            <h3>30 1500</h3>
            <p>elèves</p>
          </div>
        </v-col>

        <v-col cols="4" class="d-flex justify-center align-center">
          <div class="card">
            <h3>30 1500</h3>
            <p>elèves</p>
          </div>
        </v-col>

        <v-col cols="4" class="d-flex justify-center align-center">
          <div class="card">
            <h3>30 1500</h3>
            <p>elèves</p>
          </div>
        </v-col>
      </v-row>

      <h4 class="text-center title-cmf">
        La plus grande Confédération Musicale de France nous fait confiance
      </h4>
      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img"></v-img>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>
.cmf-img {
  width: 30%;
  margin-left: 35rem;
  height: 50%;
  text-align: center;
  margin-bottom: 4rem;
}

.title-cmf {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  margin-left: 25rem;
  margin-right: 25rem;
}
.card-container {
  transform: translateY(-40%);
  margin-left: 25rem;
  margin-right: 25rem;
}
.card {
  background: #d8050b;
  border-radius: 10px;
  padding-left: 5rem;
  padding-right: 5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: white;
}
.session-btn {
  background: transparent;
  border-radius: 1rem;
  border: 1px solid #c1eff0;
  color: #091d20;
  font-family: "Barlow";
  color: #c1eff0;
  margin-bottom: 10rem;
}

.session-name {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  width: 15rem;
  color: #ffffff;
}

.session-details {
  font-family: "Barlow";
  font-style: normal;
  font-weight: normal;
  font-size: 0.8rem;
  width: 17rem;
  color: #eff9fb;
  margin-bottom: 2rem;
}
.left {
  margin-left: 24rem;
}

.session {
  color: #c1eff0;
}

.session-description {
  margin-left: 2rem;
  margin-right: 2rem;
}
.accompagnement-img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 255, 0.1);
  pointer-events: none;
}

.left-img {
  margin-left: 24rem;
}
.image-container {
  display: flex;
  justify-content: space-around;
}

.accompagnement-img {
  width: 50%;
  height: 90%;
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.subtitle-accompagnement {
  color: #ffffff;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;

  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 13rem;
}
.container-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 2rem;
}

.icon-title {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #64afb7;
}

.container-green {
  background: #0e2d32;
}
</style>