site_logiciels/components/Logiciels/Artist/Accompagnement.vue

<template>
  <LayoutContainer>
    <div class="container-green">
      <v-row>
        <h6>Accompagnement</h6>
      </v-row>

      <v-row>
        <v-col cols="3">
          <v-img
            src="/images/logiciels/school/reunion.jpg"
            class="reunion-img"
          ></v-img>
        </v-col>

        <v-col cols="6">
          <h3>Formation prise en main du logiciel - En ligne</h3>
          <p>
            Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux
            et que vous n’avez pas de temps à perdre,... Lors de votre
            souscription, nous vous invitons à choisir des dates de formation
            qui se déroulera sous 2 jours non consécutifs. En effet, ce sont des
            journées riches d’informations et nous mettons un point d’honneur à
            vous laisser digérer cette première journée, vous familiariser
            davantage avec vos nouvelles connaissances avant de passer à la
            seconde. 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>S’incrire à une formation</v-btn>
        </v-col>
      </v-row>
    </div>

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

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

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

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


    <v-row>
      <!-- Caroussel-->
      <v-carousel>
        <v-carousel-item
          v-for="(item, i) in items"
          :key="i"
          :src="item.src"
          reverse-transition="fade-transition"
          transition="fade-transition"
        ></v-carousel-item>
      </v-carousel>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>


.container-green {
  background-color: #0e2d32;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
}

.card-container {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20rem;
  margin-right:20rem;
}
.card {
  background: #C3E5E7;
  border-radius: 10px;
  padding-left: 5rem; 
  padding-right: 5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
</style>