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 v-if="smAndDown">
        <Carousel
          ref="carousel"
          :items-to-scroll="1"
          :autoplay="4000" 
          :items-to-show="2"
          :wrap-around="true"
          :transition="500"
        >
          <Slide
            v-for="(review, index) in reviews"
            :key="index"
          >
            <v-col cols="12">
              <v-card class="review-card-sm">
                <v-avatar
                  size="80"
                  class="profile-img"
                >
                  <v-img :src="review.avatar" />
                </v-avatar>
                <v-card-title>
                  <span class="review-name">{{ review.name }}</span>
                </v-card-title>

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

                <small class="structure">{{ review.structure }}</small>
              </v-card>
            </v-col>
          </Slide>
        </Carousel>
      </div>
    </div>

    <div
      v-if="!smAndDown"
      class="container-green"
    >
      <v-row justify="center">
        <!-- v-card with client review -->
        <v-col
          cols="12"
          md="6"
          lg="4"
        >
          <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">John Doe </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 PÉDAGOGIQUE</small>

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

        <v-col
          cols="12"
          md="6"
          lg="4"
        >
          <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">John Doe</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 PÉDAGOGIQUE</small>

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

      <v-row justify="center">
        <!-- v-card with client review -->
        <v-col
          cols="12"
          md="6"
          lg="4"
        >
          <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">John Doe </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 PÉDAGOGIQUE</small>

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

        <v-col
          cols="12"
          md="6"
          lg="4"
        >
          <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">John Doe</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 PÉDAGOGIQUE</small>

            <small class="structure">Conservatoire Musique & Danse Sens (78)</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>

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

      <Carousel
        ref="carousel"
        class="carousel-sm"
        :items-to-show="1"
        :items-to-scroll="1"
      >
        <Slide
          v-for="(item, index) in items"
          :key="index"
        >
          <v-img
            class="card-img-sm"
            :src="item.src"
            alt="Card image cap"
            contain
            position="center center"
          />
        </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>
.title,
.title-sm {
  font-family: "Barlow";
  font-style: normal;
  font-size: 2rem;
  line-height: 42px;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rem;
}

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

.carousel-button,
.carousel-button-sm {
  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;
}
.carousel-button-sm {
  width: 4rem;
  height: 4rem;
  margin-left: 1rem;
}
.card-img {
  height: 10rem;
  width: 10rem;
  margin-left: auto;
  margin-right: 5rem;
  display: block;
}

.card-img-sm {
  /** center the image */
  height: 10rem;
  width: 10rem;
  margin-right: 25rem;
}

.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;
  padding: 2rem;
  height: 70rem;
}
.container-green-sm {
  background-color: #0e2d32;
  padding: 2rem;
}
.left {
  left: 3rem;
  bottom: 15rem;
}

.right {
  bottom: 9rem;
  right: 5rem;
}
.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;
}
.container-color-sm {
  background: #f8f8f8;
}
.review-card {
  width: 21rem;
  height: 100%;
  margin-bottom: 2rem;
}
.review-card-sm {
  width: 80%;
  height: 100%;
  box-shadow: 0px 4px 4px rgba(21, 65, 79, 0.25);
}
.review-name {
  margin-left: 1rem;
  font-weight: 500;
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.5rem;
  color: #e34461;
}

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

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