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"></v-icon>
        <h6 class="small-title">Avis Clients</h6>
      </div>

      <h1 class="title-review">C'est vous qui le dites</h1>
      <div v-if="smAndDown">
        <Carousel
        :itemsToShow="2"
        :itemsToScroll="1"
        ref="carousel"
        >
        <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-img>
            </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-img>
            </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-img>
            </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-img>
            </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-img>
            </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"></i>
              </div>
              <div class="carousel-button" @click="goNext">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </v-col>
      </v-row>

      <Carousel
        class="carousel elevation-6"
        :itemsToShow="4"
        :itemsToScroll="2"
        ref="carousel"
      >
        <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"></i>
              </div>
              <div class="carousel-button-sm" @click="goNext">
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </v-col>
      </v-row>

      <Carousel
        class="carousel-sm "
        :itemsToShow="1"
        :itemsToScroll="1"
        ref="carousel"
      >
        <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 { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
import { useDisplay } from "vuetify";
const { mdAndDown, 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.",
  }

]
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: 40px;
  height: 40px;
  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%;
}
.review-name {
  margin-left: 1rem;
  font-weight: 500;
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.5rem;
  color: #e34461;
}

.small-title {
  font-family: "Barlow";
  font-style: normal;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 1rem;
}

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