site_logiciels/components/Home/Caroussel.vue

<!--
Carrousel de la page d'accueil
-->
<template>
  <v-carousel
    ref="carousel"
    v-model="activeIndex"
    :show-arrows="false"
    :hide-delimiter-background="true"
    :show-delimiters="false"
    :touch="true"
    :height="lgAndUp ? 500 : 800"
    :interval="5000"
  >
    <v-carousel-item
      v-for="(item, index) in carouselItems"
      :key="index"
    >
      <v-row>
        <!-- Partie description (logo, description, bouton 'en savoir plus') -->
        <v-col cols="12" lg="6" class="col presentation">
          <v-img
            :src="item.logo"
            class="logo"
          />

          <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />

          <v-row class="align-start pl-4">
            <v-btn
              :to="item.link"
              append-icon="fas fa-arrow-right"
              :class="['learn-more-btn', item.buttonClass]"
            >
              En savoir plus
            </v-btn>
          </v-row>
        </v-col>

        <!-- Partie Illustration -->
        <v-col cols="12" lg="6" class="col illustration">
          <v-row>
            <div
              class="background-rectangle"
              :style="{ backgroundColor: item.color }"
            />

            <v-card 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="image"
            />
          </v-row>
        </v-col>
      </v-row>
    </v-carousel-item>

    <div class="custom-controls">
      <!--suppress JSUnusedLocalSymbols -->
      <div
        v-for="(_, index) in carouselItems"
        :key="index"
        :class="{ 'active-control': index === activeIndex }"
        @click="setActiveIndex(index)"
      />
    </div>
  </v-carousel>
</template>

<script setup lang="ts">

import { useDisplay } from "vuetify";
import type { CarouselItem } from "~/types/interface";
const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();

// Index de la slide active
let activeIndex: Ref<number> = ref(0);

const setActiveIndex = (index: number) => {
  activeIndex.value = index;
};

const carouselItems: Ref<Array<CarouselItem>> = 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…",
    descriptionSm:
      "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.",
    buttonClass: "btn-school",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.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.",
    descriptionSm:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
    buttonClass: "btn-artist",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.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.",
    descriptionSm:
      "La solution de mise en réseau des organisations culturelles, telles que les fédérations, confédérations et collectivités.",
    buttonClass: "btn-manager",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.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 lang="scss">

/* ============= CAROUSEL ===============  */
:deep(.v-carousel__controls) {
  display: none;
}

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

  div {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--neutral-color-alt-strong);
    cursor: pointer;
    margin-bottom: 0.5rem;
  }

  .active-control {
    background-color: var(--on-neutral-color);
    margin-right: 2rem;
  }
}

/* ============= Colonne gauche - Description ===============  */
.col.presentation {
  .logo {
    width: 20rem;
    margin-top: 10px;
    margin-left: 6rem;

    @media (max-width: 600px) {
      width: 15rem;
      margin-left: 1rem;
    }
  }

  .description {
    text-align: justify;
    margin-top: 8px;
    margin-left: 7rem;
    width: 25vw;
    margin-bottom: 1rem;
  }

  .learn-more-btn {
    display: flex;
    align-items: center;
    margin-top: 16px;
    border-radius: 0.5rem;
    padding: 15px;
    gap: 9px;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 15px;
    width: 10rem;
    height: 2.5rem;
    margin-left: 7rem;

    @media (max-width: 600px) {
      width: 80%;
      margin: 15px auto;
    }
  }

  .learn-more-btn :deep(.v-btn__append) {
    color: var(--on-neutral-color);
    margin-left: 0;
  }

  .btn-school {
    background: var(--school-color-light);
  }

  .btn-artist {
    background: var(--artist-color-light);
  }

  .btn-manager {
    background: var(--manager-color-light);
  }

  @media (max-width: 1280px) {
    padding-bottom: 48px;
    min-height: 50%;

    .description {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/* ============= Colonne droite - Illustration ===============  */
.col.illustration {
  .card {
    position: relative;
    left: 10%;
    height: 100%;
    width: 27%;
    border-radius: 1rem;
    margin-top: 1rem;
  }

  .profile-image {
    width: 100%;
    height: 12vh;
  }

  .name {
    text-align: center;
    font-size: 0.9rem;
    white-space: normal;
    padding: 0 !important;
  }

  .school, .status {
    text-align: center;
    white-space: normal;
  }

  .school {
    color: var(--on-neutral-color-light);
    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: var(--on-neutral-color);
    font-size: 100%;
    margin-top: 0.8rem;
  }

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

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

  @media (max-width: 1280px) {
    .background-rectangle {
      top: 60%;
      height: 14rem;
    }

    .image {
      height: 20rem;
      right: 0;
    }
  }
}
</style>