site_logiciels/components/Home/Caroussel.vue

<template>
  <LayoutContainer>
    <h1
      v-if="smAndDown"
      class="title-page"
    >
      Une <span class="color-solution">solution</span> adapatée à chaque
      structure culturelle
    </h1>

    <v-carousel
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      :class="smAndDown ? 'carousel-sm' : 'carousel'"
      :hide-delimiter-background="true"
      :show-delimiters="false"
      :touch="true"
      :cycle="smAndDown ? true : false"
    >
      <v-carousel-item
        v-for="(item, index) in carouselItems"
        :key="index"
      >
        <v-row>
          <v-col :cols="smAndDown ? 12 : 6">
            <v-row :class="!smAndDown ? 'align-start' : ''">
              <v-img
                v-if="!smAndDown"
                class="logo-school"
                :src="item.logo"
              />
            </v-row>

            <v-row class="align-start">
              <p :class="smAndDown ? 'description-sm' : 'description'">
                {{ item.description }}
              </p>
            </v-row>

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

          <v-col :cols="smAndDown ? 12 : 6">
            <v-row class="justify-end">
              <div
                :class="
                  smAndDown ? 'background-rectangle-sm' : 'background-rectangle'
                "
                :style="{ backgroundColor: item.color }"
              />
              <v-card
                v-if="!smAndDown"
                class="card"
                elevation="5"
              >
                <v-img
                  class="profile-image"
                  :src="item.avatar"
                  alt="Profile Image"
                  contain
                  rounded
                />
                <v-card-text>
                  <v-card-title class="name">
                    {{ item.name }}
                  </v-card-title>
                  <p class="school">
                    {{ item.school }}
                  </p>
                  <p class="status">
                    {{ item.status }}
                  </p>
                </v-card-text>
              </v-card>

              <v-img
                :src="item.image"
                :class="smAndDown ? 'image-sm' : 'image'"
              />
            </v-row>
          </v-col>
        </v-row>
      </v-carousel-item>

      <div class="custom-controls">
        <div
          v-for="(item, index) in carouselItems"
          :key="index"
          :class="{ 'active-control': index === activeIndex }"
          @click="changeSlide(index)"
        />
      </div>
    </v-carousel>
  </LayoutContainer>
</template>

<script setup>
import { ref } from "vue";
import { useDisplay } from "vuetify";
const { smAndDown } = useDisplay();

let activeIndex = ref(0);

const changeSlide = (index) => {
  activeIndex.value = index;
};

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)",
    link: "/logiciels/school",
    name: "Cindy Blanchard",
    school: "Conservatoire d'Anemasse",
    status: "Eleve",
    avatar: "/images/carousel/school/avatar.png",
  },
  {
    logo: "/images/carousel/artist/artist.png",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de cirque, théâtre et danse.Gérez votre activité avec un logiciel de gestion et communication au service de votre passion.",
    buttonClass: "btn-artist",
    image: "/images/carousel/artist/musician.png",
    color: "rgba(250, 194, 10, 0.4)",
    link: "/logiciels/artist",
    name: "Thierry Dupont ",
    school: "Orchestre d’harmonie de Cluse",
    status: "Admin",
    avatar: "/images/carousel/artist/avatar.png",
  },
  {
    logo: "/images/carousel/manager/manager.png",
    description:
      "La solution de mise en réseau des organisations culturelles. Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
    buttonClass: "btn-manager",
    image: "/images/carousel/manager/fédération.png",
    color: "rgba(216, 5, 11, 0.4)",
    link: "/logiciels/manager",
    name: "Marie Voisin",
    school: "Confédération Musicale de France",
    status: "ADMIN",
    avatar: "/images/carousel/manager/avatar.png",
  },
]);
</script>

<style scoped>
::v-deep .v-carousel__controls {
  display: none;
}

.color-solution {
  color: rgba(32, 147, 190, 0.9);
}
.title-page {
  font-family: "Barlow";
  font-style: normal;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2.5rem;
  text-align: left;
  color: #000000;
  margin-bottom: 2rem;
  width: 25rem;
}

.card {
  height: 20%;
  width: 27%;
  border-radius: 1rem;
  margin-top: 1rem;
}

.profile-image {
  width: 40%;
  margin: auto;
  height: 12vh;
}

.name {
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 1vh;
  font-family: "Barlow";
  font-style: normal;
}
.school,
.status {
  text-align: center;
  font-size: 80%;
  color: #888888;
  margin-bottom: 1vh;
}

.background-rectangle {
  position: absolute;
  width: 70%;
  height: 20rem;
  left: 72%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 200px 0px 0px 15rem;
  z-index: -1;
}
.background-rectangle-sm {
  position: absolute;
  width: 100%;
  height: 15rem;
  left: 72%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 200px 0px 0px 15rem;
  z-index: -1;
}
.align-start {
  align-items: flex-start;
}

.carousel-sm {
  height: 44rem !important;
  margin-bottom: -14.3rem;
  margin-top: 2rem;
}

.carousel {
  margin-top: 1rem;
  height: 900% !important;
  margin-bottom: -2rem;
}
.logo-school {
  max-width: 35vw;
  height: 25vh;
  margin-top: 10px;
  margin-bottom: 2vh;
}

.image {
  height: 35rem;
  margin-top: 6rem;
  right: 20%;
}

.image-sm {
  height: 20rem;
  margin-top: 9rem;
  left: 10%;
  bottom: 10rem;
}
.description {
  text-align: left;
  margin-right: 9vw;
  margin-left: 7vw;
  width: 25vw;
  margin-bottom: 1rem;
}

.description-sm {
  margin-top: 1rem;
  width: 100%;
  text-align: left;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.custom-controls {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.custom-controls div {
  width: 1vh;
  height: 1vh;
  border-radius: 50%;
  background-color: grey;
  cursor: pointer;
}

.custom-controls .active-control {
  background-color: #000;
  margin-right: 2rem;
}

.btn-school {
  background: rgba(32, 147, 190, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}

.btn-artist {
  background: rgba(250, 194, 10, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 15px;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}

.btn-manager {
  background: rgba(216, 5, 11, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}
</style>