site_logiciels/components/Home/Caroussel.vue

<!--
Carrousel de la page d'accueil
-->
<template>
  <div v-intersect="onIntersect">
    <v-carousel
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      :hide-delimiter-background="true"
      :show-delimiters="false"
      :touch="true"
      :height="lgAndUp ? 500 : 600"
      :interval="10000"
      :cycle="true"
    >
      <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">
            <nuxt-link :to="item.link">
              <v-img :src="item.logo" :alt="item.logoAlt" class="logo" />
            </nuxt-link>

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

            <v-btn
              :to="item.link"
              append-icon="fas fa-arrow-right"
              :class="['mt-3 learn-more-btn', item.buttonClass]"
            >
              En savoir plus
            </v-btn>
          </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="item.avatarAlt"
                  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" :alt="item.imageAlt" 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>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import type { Ref } from 'vue'
import type { CarouselItem } from '~/types/interface'
import { useLayoutStore } from '~/stores/layoutStore'

const { mdAndUp, lgAndUp } = useDisplay()

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

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

const carouselItems: Ref<Array<CarouselItem>> = ref([
  {
    logo: '/images/logos/opentalent/Logo_Opentalent_School-gris.png',
    logoAlt:
      'Logo Opentalent School - logiciel de gestion et de communication pour les établissements d’enseignement artistique',
    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 conservatoires.<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 conservatoires.",
    buttonClass: 'btn-school',
    image:
      '/images/pages/home/carousel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png',
    imageAlt: 'Jeune élève de batterie',
    color: 'rgba(32, 147, 190, 0.4)',
    link: '/opentalent-school',
    name: 'Cindy Blanchard',
    school: 'Conservatoire de Musique',
    status: 'élève',
    avatar: '/images/pages/home/carousel/Photo_de_profil_d_une_jeune_fille.png',
    avatarAlt: 'Photo de profil d’une jeune fille',
  },
  {
    logo: '/images/logos/opentalent/Logo_Opentalent_Artist-gris.png',
    logoAlt:
      'Logo Opentalent Artist - logiciel de gestion et de communication pour les orchestres, les chorales, les compagnies artistiques et troupes',
    description:
      'Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, de théâtre et de 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, de théâtre et de cirque.',
    buttonClass: 'btn-artist',
    image:
      '/images/pages/home/carousel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png',
    imageAlt: 'Homme jouant du banjo',
    color: 'rgba(250, 194, 10, 0.4)',
    link: 'opentalent-artist',
    name: 'Thierry Dupont ',
    school: 'Orchestre d’harmonie',
    status: 'Admin',
    avatar:
      '/images/pages/home/carousel/Photo_de_profil_d_un_homme_jouant_du_banjo.png',
    avatarAlt: 'Photo de profil d’un homme jouant du banjo',
  },
  {
    logo: '/images/logos/opentalent/Logo_Opentalent_Manager-gris.png',
    logoAlt:
      'Logo Opentalent Manager - logiciel de gestion et de communication pour les fédérations, les confédérations et les collectivités',
    description:
      'La solution de mise en réseau des organisations culturelles.<br> Fédérations, confédérations et collectivités, adoptez 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/pages/home/carousel/Logiciel_Opentalent_Manager-Administrateur_Federation.png',
    imageAlt: 'Un homme en costard et une femme tailleur souriant',
    color: 'rgba(216, 5, 11, 0.4)',
    link: 'opentalent-manager',
    name: 'Marie Voisin',
    school: "Réseau d'organisations culturelles ",
    status: 'ADMIN',
    avatar:
      '/images/pages/home/carousel/Photo_de_profil_d_une_femme_en_tailleur.png',
    avatarAlt: 'Photo de profil d’une femme en tailleur',
  },
])

const layoutStore = useLayoutStore()
const onIntersect = (isIntersecting: boolean) => {
  layoutStore.setIsBannerVisible(isIntersecting)
}
</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 {
  padding-left: 7rem;

  @media (max-width: 600px) {
    padding-left: 0;
  }

  .logo {
    width: 20rem;
    margin-top: 10px;

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

  .description {
    margin-top: 8px;
    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;

    @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: 5%;
    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>