site_logiciels/components/Home/Reviews.vue

<template>
  <LayoutContainer>
    <div :class="smAndDown ? '' : 'container-color'">
      <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">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">
                <!-- 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-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>

              <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-card with client review -->
          <v-col cols="6">
            <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>
              <div class="card-footer">
                <!-- 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">
                <!-- 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>
  </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 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>

.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;
}
.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;
}


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

.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;
}
.review-card {
  width: 21rem;
  min-height: 20rem;
  max-height: 23rem;
  margin-bottom: .9rem;
}
.review-name {
  margin-left: 1rem;
  font-weight: 500;
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.5rem;
  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>