site_logiciels/components/Home/Reviews.vue

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

      <h1 class="title-review">C'est vous qui le dites</h1>
    </div>

    <div v-if="!smAndDown" class="container-green">
      <v-row justify="center">
        <!-- v-card with client review -->
        <div class="content"></div>
        <v-col cols="5" class="col-review">
          <v-card class="review-card left mx-auto">
            <v-avatar size="80" class="profile-img">
              <v-img src="/images/reviews/photo1.jpg" />
            </v-avatar>
            <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>

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

            <small class="structure"
              >Conservatoire de Musique & de Danse de Sens (78)</small
            >
          </v-card>
        </v-col>

        <v-col cols="5" class="col-review">
          <v-card class="review-card right mx-auto">
            <v-avatar size="80" class="profile-img">
              <v-img src="/images/reviews/photo1.jpg" />
            </v-avatar>
            <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>

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

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

      <v-row justify="center">
        <!-- v-card with client review -->
        <v-col cols="5" class="col-review">
          <v-card class="review-card left mx-auto">
            <v-avatar size="80" class="profile-img">
              <v-img src="/images/reviews/photo1.jpg" />
            </v-avatar>
            <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>

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

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

        <v-col cols="5" class="col-review">
          <v-card class="review-card right mx-auto">
            <v-avatar size="80" class="profile-img">
              <v-img src="/images/reviews/photo1.jpg" />
            </v-avatar>
            <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>

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

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

      <v-row>
        <v-col cols="12">
          <div class="d-flex justify-center align-center flex-column">
            <h2 class="title text-center">
              Plus de 5 000 structures nous font confiance
            </h2>
            <div class="d-flex justify-center align-center">
              <div class="carousel-button" @click="goPrevious">
                <i class="fas fa-chevron-left" />
              </div>
              <div class="carousel-button" @click="goNext">
                <i class="fas fa-chevron-right" />
              </div>
            </div>
          </div>
        </v-col>
      </v-row>

      <Carousel
        ref="carousel"
        class="carousel elevation-6"
        :items-to-show="4"
        :items-to-scroll="2"
      >
        <Slide v-for="(item, index) in items" :key="index">
          <div class="card">
            <v-img class="card-img" :src="item.src" alt="Card image cap" />
          </div>
        </Slide>
      </Carousel>
    </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 carousel = ref(null);

const goPrevious = () => {
  carousel.value.prev();
};

const goNext = () => {
  carousel.value.next();
};

const reviews = [
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    description:
      "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.",
    avatar: "/images/reviews/photo1.jpg",
  },
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    avatar: "/images/reviews/photo1.jpg",
    description:
      "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.",
  },
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    avatar: "/images/reviews/photo1.jpg",
    description:
      "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.",
  },
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    avatar: "/images/reviews/photo1.jpg",
    description:
      "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.",
  },
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    avatar: "/images/reviews/photo1.jpg",
    description:
      "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.",
  },
  {
    name: "John Doe",
    status: "DIRECTEUR PÉDAGOGIQUE",
    structure: "Conservatoire Musique & Danse Sens (78)",
    avatar: "/images/reviews/photo1.jpg",
    description:
      "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.",
  },
];
const items = ref([
  { src: "/images/reviews/review1.png" },
  { src: "/images/reviews/review2.png" },
  { src: "/images/reviews/review3.png" },
  { src: "/images/reviews/review4.png" },
  { src: "/images/reviews/review5.png" },
]);
</script>

<style scoped>
.col-review {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: normal;
}

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

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

.title {
  font-size: 2rem;
  line-height: 42px;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-title {
  margin-top: 1rem;
  color: #64afb7;
}
.carousel-button i,
.carousel-button-sm i {
  color: #ffffff;
}

.carousel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  margin-left: 1.5rem;
  background-color: transparent;
  border: 2px solid #ffffff;
  cursor: pointer;
  margin-right: 1rem;
  margin-top: 1rem;
}

.card-img {
  height: 10rem;
  width: 10rem;
  margin-left: auto;
  margin-right: 5rem;
  display: block;
}

.carousel {
  background-color: white;
  margin-top: 2rem;
  border-radius: 20px;
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: #071b1f;
}
.carousel-sm {
  background-color: white;
  margin-top: 2rem;
  border-radius: 20px;
  box-shadow: #071b1f;
}
.container-green {
  background-color: #0e2d32;
  height: 70rem;
}
.container-green-sm {
  background-color: #0e2d32;
}

.status {
  margin-top: 1rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 15px;
  margin-left: 2rem;
  display: flex;
  align-items: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #071b1f;
}

.structure {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  margin-left: 2rem;
  display: flex;
  align-items: center;

  color: #071b1f;
  margin-bottom: 1rem;
}
.description-review {
  font-family: "Barlow";
  font-size: 1rem;
  line-height: 1.5rem;
  color: #071b1f;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  line-height: 20px;
}

.profile-img {
  border-radius: 50%;
  width: 3rem;
  height: 4rem;
  margin-left: 2rem;
}
.container-color {
  background: #f8f8f8;
  height: 25rem;
}
.review-card {
  width: 21rem;
  height: 100%;
  margin-bottom: 2rem;
}
.review-name {
  margin-left: 1rem;
  font-weight: 500;
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.5rem;
  color: #e34461;
}

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

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