site_logiciels/components/Home/Reviews.vue

<template>
  <LayoutContainer>
    <div :class="!smAndDown ? 'container-color' : 'container-color-md'">
      <div class="d-flex justify-center align-center flex-column">
        <v-icon size="6" class="fa-solid fa-circle icon-title" />
        <h6 class="small-title">Avis Clients</h6>
      </div>

      <h1 class="title-review" :class="smAndDown ? 'mb-12 ' : ''">
        C'est vous qui le dites
      </h1>
    </div>

    <div v-if="!smAndDown" class="container-green">
      <v-row justify="center">
        <div class="col-review">
          <v-col cols="6">
            <v-card class="review-card left mx-auto">
              <v-card-title>
                <span class="review-name">Patrice CATHELIN</span>
              </v-card-title>

              <v-card-text>
                <p class="description-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.
                </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="review-card right mx-auto">
              <v-card-title>
                <span class="review-name">Karine GIRAUD </span>
              </v-card-title>

              <v-card-text>
                <p class="description-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
                </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="review-card left mx-auto">
              <v-card-title>
                <span class="review-name">Laurent BEL</span>
              </v-card-title>

              <v-card-text>
                <p class="description-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é..
                </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="review-card right mx-auto">
              <v-card-title>
                <span class="review-name">Philippe BORY</span>
              </v-card-title>

              <v-card-text>
                <p class="description-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.
                </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>

      <div class="content-review">
        <CommonCarouselTrustCompanie
          :items="items"
          :title-color="'#fff'"
          :carousel-border-color="'#fff'"
          :carousel-button-color="'#fff'"
          :icon-color="'#fff'"
        />
      </div>
    </div>

    <div v-if="smAndDown">
      <v-row>
        <v-col cols="12">
          <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCaroussel">
            <Slide v-for="(card, index) in cards" :key="index">
              <div class="card-sm">
                <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>
              </div>
            </Slide>
          </Carousel>
        </v-col>
      </v-row>

      <v-row class="justify-center align-center">
        <v-col class="d-flex justify-space-around align-center">
          <i
            style="cursor: pointer"
            class="fa-solid fa-arrow-left-long"
            @click="goPrevious"
          />
          <div class="custom-controls">
            <div
              v-for="(item, index) in cards"
              :key="index"
              :class="{ 'active-control': index === state.activeIndex }"
              class="ml-6"
            />
          </div>
          <i
            style="cursor: pointer"
            class="fa-solid fa-arrow-right-long"
            @click="goNext"
          />
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>

<script setup>
import { ref } from "vue";
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
import { useDisplay } from "vuetify";

const { smAndDown } = useDisplay();
const reviewCaroussel = ref(null);

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

const goNext = () => {
  if (reviewCaroussel.value) {
    reviewCaroussel.value.next();
    state.value.activeIndex = (state.value.activeIndex + 1) % cards.length;
  }
};

const goPrevious = () => {
  if (reviewCaroussel.value) {
    reviewCaroussel.value.prev();
    state.value.activeIndex =
      state.value.activeIndex - 1 < 0
        ? cards.length - 1
        : state.value.activeIndex - 1;
  }
};

const cards = [
  {
    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([
  { 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>
.custom-controls div {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: grey;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

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

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

.card-sm {
  width: 300px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.v-container {
  padding: 0 !important;
}
.content-review {
  margin-top: -7rem;
}
.card-footer {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.col-review {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

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

.status {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 15px;
  width: 90%;
  display: flex;
  align-items: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #071b1f;
}

.structure {
  position: absolute;
  bottom: 0;
  right: 0;
  font-weight: 600;
  font-size: 0.8rem;
  width: 90%;
  display: flex;
  align-items: center;
  color: #071b1f;
  margin-bottom: 1rem;
}
.description-review {
  text-align: justify !important;
  height: 10rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #071b1f;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  line-height: 20px;
}

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

.container-color-md {
}
.review-card {
  padding-top: 1rem;
  width: 21rem;
  min-height: 21rem;
  max-height: 21rem;
  margin-bottom: 0.9rem;
}
.review-name {
  margin-left: 1rem;
  font-weight: 500;
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.4rem;
  color: #9edbdd;
}

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

.title-review {
  font-size: 2rem;
  line-height: 42px;
  text-align: center;
  color: #071b1f;
}
</style>