site_logiciels/components/Home/Reviews.vue

<template>

  <v-container>
    <div class="container">
      <h6 class="small-title">Avis Clients</h6>

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

      <v-row justify="center">
        <!-- v-card with client review -->
        <v-col cols="12" md="6" lg="4">
          <v-card class="review-card mx-auto">
            <v-card-title>
              <v-avatar size="50">
                <v-img src="/images/reviews/1.jpg"></v-img>
              </v-avatar>
              <span class="review-name">John Doe</span>
            </v-card-title>

            <v-card-text>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="12" md="6" lg="4">
          <v-card class="review-card mx-auto">
            <v-card-title>
              <v-avatar size="50">
                <v-img src="/images/reviews/2.jpg"></v-img>
              </v-avatar>
              <span class="review-name">Jane Doe</span>
            </v-card-title>

            <v-card-text>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
            </v-card-text>
          </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 mx-auto">
            <v-card-title>
              <v-avatar size="50">
                <v-img src="/images/reviews/1.jpg"></v-img>
              </v-avatar>
              <span class="review-name">John Doe</span>
            </v-card-title>

            <v-card-text>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="12" md="6" lg="4">
          <v-card class="review-card mx-auto">
            <v-card-title>
              <v-avatar size="50">
                <v-img src="/images/reviews/2.jpg"></v-img>
              </v-avatar>
              <span class="review-name">Jane Doe</span>
            </v-card-title>

            <v-card-text>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>

        <h3 class="title">
          Plus de 5 000 structures nous font confiance
        </h3>

        <!-- caroussel en bandau avec le logo des structures qui nous font confiance-->
        <v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"
            :src="item.src"
          ></v-carousel-item>
        </v-carousel>

    </div>
  </v-container>

</template>

<style scoped> 

.review-card {
  max-width: 500px;
  margin: 10px;
  text-align: center;
}

.review-name {
  margin-left: 15px;
  font-size: 1.2em;
  font-weight: 500;
}

.small-title {
  font-family: "Barlow";
  font-style: normal;
  text-align: center;
}

.title{
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  text-align: center;
}
</style>