site_logiciels/components/Home/Caroussel.vue

<template>
  <LayoutContainer>
    <LayoutUITitlePage
      title="LOGICIELS CULTURELS"
      subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
    />
    <v-carousel
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      :class="smAndDown ? 'carousel-sm' : 'carousel'"
      :hide-delimiter-background="true"
      :show-delimiters="false"
      :touch="true"
    >
      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <v-row>
          <v-col cols="6">
            <v-row>
              <v-img v-if="!smAndDown" class="logo" :src="item.logo" />
            </v-row>

            <v-row class="align-start">
              <p v-html="item.description" class="description" style="text-align: justify;"></p>
            </v-row>

            <v-row class="align-start">
              <nuxt-link :to="item.link">
                <v-btn :class="item.buttonClass">
                  En savoir plus
                  <i
                    class="fas fa-arrow-right"
                    style="color: black; margin-left: 8px"
                  ></i>
                </v-btn>
              </nuxt-link>
            </v-row>
          </v-col>

          <v-col cols="6">
            <v-row class="justify-end">
              <div
                class="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 }}

                    <p class="school">
                      {{ item.school }}
                    </p>
                  </v-card-title>
                  <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/logo/logiciels/School-noir.png",
    description:
      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> 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: "/opentalent_school",
    name: "Cindy Blanchard",
    school: "Conservatoire de Musique",
    status: "élève",
    avatar: "/images/carousel/school/avatar.png",
  },
  {
    logo: "/images/logo/logiciels/Artist-noir.png",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. <br> Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
    buttonClass: "btn-artist",
    image: "/images/carousel/artist/musician.png",
    color: "rgba(250, 194, 10, 0.4)",
    link: "opentalent_artist",
    name: "Thierry Dupont ",
    school: "Orchestre d’harmonie",
    status: "Admin",
    avatar: "/images/carousel/artist/avatar.png",
  },
  {
    logo: "/images/logo/logiciels/Manager-noir.png",
    description:
      "La solution de mise en réseau des organisations culturelles.<br> 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: "opentalent_manager",
    name: "Marie Voisin",
    school: "Réseau d'organisations culturelles ",
    status: "ADMIN",
    avatar: "/images/carousel/manager/avatar.png",
  },
]);
</script>

<style scoped>


::v-deep .v-carousel__controls {
  display: none;
}

/* ============= TITLE ===============  */
.title {
  font-size: 4rem;
  line-height: 3.5rem;
  letter-spacing: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.5rem;
  margin-bottom: 8rem;
}

/* ============= CARD ===============  */
.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: 1rem;
  white-space: normal;
}
.school,
.status {
  text-align: center;
  white-space: normal;
}

.school {
  color: #888888;
  margin-top: -0.8rem;
  font-weight: normal !important;
  font-size: 0.8rem !important;
  margin-top: 0.2px;
  line-height: 1rem !important;
}

.status {
  text-transform: uppercase;
  font-weight: bold;
  color: black !;
  font-size: 100%;
  margin-top: 0.8rem;
}
/* ============= RECTANGLE ===============  */
.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;

  /* ============= LOGO ===============  */
}
.logo {
  max-width: 25vw;
  height: 20vh;
  margin-top: 10px;
  margin-left: 4rem;
}
.description {
  text-align: left;
  margin-left: 7rem;
  width: 25vw;
  margin-bottom: 1rem;
}

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

.image {
  height: 35rem;
  right: 5rem;
}

.custom-controls div {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: grey;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

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

/* ============= BUTTON ===============  */

.btn-school {
  background: rgba(32, 147, 190, 0.4);
}

.btn-artist {
  background: rgba(250, 194, 10, 0.4);
}

.btn-manager {
  background: rgba(216, 5, 11, 0.4);
}

.btn-school,
.btn-artist,
.btn-manager {
  border-radius: 0.5rem;
  margin-left: 2vw;
  padding: 15px;
  gap: 9px;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 15px;
  width: 10rem;
  height: 2.5rem;
  margin-left: 7rem;
}
</style>