site_logiciels/components/Layout/Caroussel.vue

<template>
  <v-container class="container">
    <v-carousel
      :show-arrows="false"
      class="carousel"
      :hide-delimiter-background="true"
    >
      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <v-row>
          <v-col cols="6">
            <v-row class="align-start">
              <v-img class="logo-school" :src="item.logo"></v-img>
            </v-row>

            <v-row class="align-start">
              <p class="description">{{ item.description }}</p>
            </v-row>

            <v-row class="align-start">
              <v-btn :class="item.buttonClass">En savoir plus</v-btn>
            </v-row>
          </v-col>

          <v-col cols="6">
            <v-row class="justify-end">
              <div
                class="background-rectangle"
                :style="{ backgroundColor: item.color }"
              ></div>
              <v-card class="card">
                <v-img
                  class="profile-image"
                  src="/images/carousel/school/avatar.png"
                  alt="Profile Image"
                  contain
                  rounded
                ></v-img>
                <v-card-text>
                  <v-card-title class="name">Cindy Blanchard</v-card-title>
                  <p class="school">Conservatoire d'Anemasse</p>
                  <p class="status">Eleve</p>
                </v-card-text>
              </v-card>

              <v-img :src="item.image" class="image"></v-img>
            </v-row>
          </v-col>
        </v-row>
      </v-carousel-item>
    </v-carousel>
  </v-container>
</template>

<script setup>
import { ref } from "vue";

const carouselItems = ref([
  {
    logo: "/images/carousel/school/school.png",
    description:
      "Pour les petits comme pour les grans établissements d’enseignement artistique.Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements...",
    buttonClass: "btn-school",
    image: "/images/carousel/school/Fille_School.png",
    color: "rgba(32, 147, 190, 0.4)",
  },
  {
    logo: "/images/carousel/artist/artist.png",
    description:
      "Pour les petits comme pour les grans établissements d’enseignement artistique...",
    buttonClass: "btn-artist",
    image: "/images/carousel/artist/musician.png",
    color: "rgba(250, 194, 10, 0.4)",
  },
  {
    logo: "/images/carousel/manager/manager.png",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres...",
    buttonClass: "btn-manager",
    image: "/images/carousel/manager/fédération.png",
    color: "rgba(216, 5, 11, 0.4)",
  },
]);
</script>

<style scoped>

.card{
  height: 250px;
  left: 150px;
  border-radius: 20px;
}

.profile-image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.name {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: "Barlow";
  font-style: normal;
}

.school {
  text-align: center;
  font-size: 14px;
  color: #888888;
  margin-bottom: 8px;
}

.status {
  text-align: center;
  font-size: 14px;
  color: #888888;
}

.background-rectangle {
  position: absolute;
  width: 801px;
  height: 326px;
  left: 72%;  /* Ajustez cette valeur pour déplacer le rectangle horizontalement */
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 200px 0px 0px 200px;
  z-index: -1;
}

.align-start {
  align-items: flex-start;
}

.description {
  text-align: left;
}

.logo-row,
.text-row,
.btn-row {
  justify-content: flex-start;
}
.container {
  max-width: 1900px;
  height: 800px;
  margin-top: 90px;
}

.logo-school {
  width: 370px;
  height: 199px;
  margin-right: 299px;
  margin-bottom: 30px;
}

.image {
  width: 529px;
  height: 566px;

}

.btn-school {
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  background: rgba(32, 147, 190, 0.4);
  border-radius: 6px;
  margin-left: 100px;
  align-items: center;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 200px;
  height: 56px;
}

.btn-artist {
  font-family: "Barlow";
  font-style: normal;
  border-radius: 6px;
  background: rgba(250, 194, 10, 0.4);
  margin-left: 100px;
  align-items: center;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 200px;
  height: 56px;
}

.btn-manager {
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  background: rgba(216, 5, 11, 0.4);
  border-radius: 6px;
  margin-left: 100px;
  align-items: center;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 200px;
  height: 56px;
}

.description {
  text-align: left;
  margin-right: 290px;
  margin-left: 100px;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}
</style>