site_logiciels/components/Logiciels/Manager/Accompagnement.vue

<template>
  <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>
</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>