site_logiciels/components/Home/Reviews.vue

<template>
  <LayoutContainer>
    <div class="container-1">
      <div class="d-flex justify-center align-center flex-column">
        <v-icon
          icon="fa-solid fa-circle"
          size="6"
        />
        <h6>
          Avis Clients
        </h6>
      </div>

      <h3>
        C'est vous qui le dites
      </h3>
    </div>

    <!-- Ecrans larges -->
    <div v-if="mdAndUp" class="container-2">

      <!-- Partie 1 : Avis clients -->
      <v-row justify="center">
        <div class="col-review">
          <v-col cols="6">
            <v-card class="left mx-auto">
              <v-card-title>
                Patrice CATHELIN
              </v-card-title>

              <v-card-text>
                <p>
                  C'est un logiciel très bien conçu et efficace avec une équipe
                  ouverte, dynamique et à l'écoute. L’assistance est très
                  réactive, j'ai toujours eu une réponse rapide à mes besoins,
                  ce qui est fort appréciable.
                </p>
              </v-card-text>

              <div class="card-footer">
                <small class="status">
                  Directeur administratif & pédagogique
                </small>
                <small class="structure">
                  Conservatoire de Musique & de Danse de Sens (78)
                </small>
              </div>
            </v-card>
          </v-col>

          <v-col cols="6">
            <v-card class="right mx-auto">
              <v-card-title>
                Karine GIRAUD
              </v-card-title>

              <v-card-text>
                <p>
                  Étant présente depuis presque le début, je suis fière d'avoir
                  vu grandir ce logiciel et d'avoir évoluée avec lui. De plus,
                  je me suis sentie écoutée lors de mes propositions
                  d'amélioration, car beaucoup ont vu le jour. Enfin,
                  l'accompagnement et la réactivité n'ont jamais faibli depuis
                  toutes ces années
                </p>
              </v-card-text>

              <div class="card-footer">
                <small class="status">
                  Secrétaire administrative
                </small>

                <small class="structure">
                  Association Musicale Sainte Cécile de Lagord (17)
                </small>
              </div>
            </v-card>
          </v-col>
        </div>
      </v-row>

      <v-row justify="center">
        <div class="col-review">
          <v-col cols="6">
            <v-card class="left mx-auto">
              <v-card-title>
                Laurent BEL
              </v-card-title>

              <v-card-text>
                <p>
                  Logiciel très complet qui permet de faire beaucoup de choses.
                  J’apprécie particulièrement la réactivité, la bienveillance et
                  le fait que l’équipe soit à l'écoute pour faire évoluer
                  l'outil en fonction de nos besoins. Si besoin, la FAQ est
                  vraiment utile. Elle permet de trouver rapidement une solution
                  face à un problème rencontré..
                </p>
              </v-card-text>

              <div class="card-footer">
                <small class="status">
                  Directeur administratif & pédagogique
                </small>

                <small class="structure">
                  École de Musique EPIC Musique en 4 Rivières (74)
                </small>
              </div>
            </v-card>
          </v-col>

          <v-col cols="6">
            <v-card class="right mx-auto">
              <v-card-title>
                Philippe BORY
              </v-card-title>

              <v-card-text>
                <p>
                  Opentalent est une entreprise avec de vraies valeurs humaines,
                  à l'écoute de chaque structure et qui ne cesse de s'améliorer
                  pour toujours coller aux besoins de ses clients. Plus qu'une
                  relation commerciale, c'est pour nous un véritable partenaire
                  au quotidien.
                </p>
              </v-card-text>

              <div class="card-footer">
                <small class="status">
                  Personnel administratif
                </small>

                <small class="structure">
                  École d'Arts de Saint-Michel-sur-Orge (91)
                </small>
              </div>
            </v-card>
          </v-col>
        </div>
      </v-row>

      <!-- Partie 1 : Carrousel logos clients -->
      <div class="carousel-clients-container">
        <CommonCarouselClients :items="items" />
      </div>
    </div>

    <!-- Petits écrans -->
    <div v-else class="container-sm">
      <v-row>
        <v-col cols="12">
          <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCarousel">
            <Slide v-for="(card, index) in cards" :key="index">
              <v-card>
                <v-card-title>
                  <span class="review-name">{{ card.name }}</span>
                </v-card-title>

                <v-card-text>
                  <p class="description-review">
                    {{ card.review }}
                  </p>
                </v-card-text>

                <div class="card-footer">
                  <small>{{ card.status }}</small>

                  <small>{{ card.structure }}</small>
                </div>
              </v-card>
            </Slide>
          </Carousel>
        </v-col>
      </v-row>

      <v-row class="justify-center align-center">
        <v-col class="d-flex justify-space-around align-center">
          <v-btn
            icon="fas fa-arrow-left-long"
            @click="goToPrevious"
          />

          <div class="carousel-controls">
            <div
              v-for="(item, index) in cards"
              :key="index"
              :class="{ 'active-control': index === state.activeIndex }"
              class="ml-6"
            />
          </div>

          <v-btn
            icon="fas fa-arrow-right-long"
            @click="goToNext"
          />
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
import { useDisplay } from "vuetify";
import type { Review } from "~/types/interface";

const { mdAndUp } = useDisplay();

const reviewCarousel: Ref<typeof Carousel | null> = ref(null);

const state = ref({
  activeIndex: 0,
});

const goToNext = () => {
  reviewCarousel.value!.next();
  state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
}

const goToPrevious = () => {
  reviewCarousel.value!.prev();
  state.value.activeIndex =
    state.value.activeIndex - 1 < 0
      ? cards.length - 1
      : state.value.activeIndex - 1;
}

const cards: Array<Review> = [
  {
    name: "Patrice CATHELIN",
    review:
      "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
    status: "Directeur administratif & pédagogique",
    structure: "Conservatoire de Musique & de Danse de Sens (78)",
  },
  {
    name: "Karine GIRAUD",
    review:
      "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
    status: "Secrétaire administrative",
    structure: "Association Musicale Sainte Cécile de Lagord (17)",
  },
  {
    name: "Laurent BEL",
    review:
      "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré.",
    status: "Directeur administratif & pédagogique",
    structure: "École de Musique EPIC Musique en 4 Rivières (74)",
  },
  {
    name: "Philippe BORY",
    review:
      "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien.",
    status: "Personnel administratif",
    structure: "École d'Arts de Saint-Michel-sur-Orge (91)",
  },
];

const items: Ref<Array<{ src: string }>> = ref([
  { src: "/images/reviews/school/review1.svg" },
  { src: "/images/reviews/school/review2.png" },
  { src: "/images/reviews/school/review3.png" },
  { src: "/images/reviews/school/review4.jpeg" },
  { src: "/images/reviews/school/review5.jpeg" },
  { src: "/images/reviews/school/review6.jpeg" },
]);
</script>

<style scoped>

.container-1 {
  background-color: #f8f8f8;
  height: 22rem;

  .v-icon {
    margin-top: 1rem;
    color: #64afb7;
  }

  h6 {
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 1rem;
    text-align: center;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  h3 {
    font-size: 2rem;
    line-height: 42px;
    text-align: center;
    color: #071b1f;
  }

  @media (max-width: 600px) {
    margin-bottom: 24px;
  }

}

.container-2 {
  background-color: #0e2d32;
  height: 60rem;

  .col-review {
    display: flex;
    justify-content: center;
    align-items: center;

    .v-card {
      padding-top: 1rem;
      width: 21rem;
      min-height: 21rem;
      max-height: 21rem;
      margin-bottom: 0.9rem;

      .v-card-title {
        margin-left: 1rem;
        font-weight: 500;
        font-family: "Barlow", serif;
        font-style: normal;
        font-size: 1.4rem;
        color: #9edbdd;
      }

      .v-card-text p {
        text-align: justify !important;
        height: 10rem;
        font-size: 1rem;
        color: #071b1f;
        margin: 0 1rem 1rem 1rem;
        line-height: 20px;
      }

      .card-footer {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;

        small {
          position: absolute;
          display: flex;
          align-items: center;
          bottom: 0;
          right: 0;
          font-weight: 600;
          width: 90%;
          color: #071b1f;
        }

        .status {
          margin-top: 1rem;
          font-size: 0.7rem;
          line-height: 15px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          margin-bottom: 2rem;
        }

        .structure {
          font-size: 0.8rem;
          margin-bottom: 1rem;
        }
      }
    }

    .left {
      bottom: 12rem;
      position: relative;
    }

    .right {
      position: relative;
      bottom: 7rem;
    }
  }

  .carousel-clients-container {
    margin-top: -7rem;
  }
}

.container-sm {
  .v-card {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .carousel-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

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

    .active-control {
      background-color: black;
      margin-right: 10px;
    }
  }
}


</style>