|
|
@@ -1,53 +1,61 @@
|
|
|
<template>
|
|
|
<LayoutContainer>
|
|
|
- <div :class="!smAndDown ? 'container-color' : 'container-color-md'">
|
|
|
+ <div class="container-1">
|
|
|
<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>
|
|
|
+ <v-icon
|
|
|
+ icon="fa-solid fa-circle"
|
|
|
+ size="6"
|
|
|
+ />
|
|
|
+ <h6>
|
|
|
+ Avis Clients
|
|
|
+ </h6>
|
|
|
</div>
|
|
|
|
|
|
- <h1 class="title-review" :class="smAndDown ? 'mb-12 ' : ''">
|
|
|
+ <h3>
|
|
|
C'est vous qui le dites
|
|
|
- </h1>
|
|
|
+ </h3>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="!smAndDown" class="container-green">
|
|
|
+ <!-- Ecrans larges -->
|
|
|
+ <div v-if="mdAndUp" class="container-2">
|
|
|
+
|
|
|
+ <!-- Partie 1 : Avis clients -->
|
|
|
<v-row justify="center">
|
|
|
<div class="col-review">
|
|
|
<v-col cols="6">
|
|
|
- <v-card class="review-card left mx-auto">
|
|
|
+ <v-card class="left mx-auto">
|
|
|
<v-card-title>
|
|
|
- <span class="review-name">Patrice CATHELIN</span>
|
|
|
+ Patrice CATHELIN
|
|
|
</v-card-title>
|
|
|
|
|
|
<v-card-text>
|
|
|
- <p class="description-review">
|
|
|
+ <p>
|
|
|
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">
|
|
|
- <small class="status"
|
|
|
- >Directeur administratif & pédagogique</small
|
|
|
- >
|
|
|
|
|
|
- <small class="structure"
|
|
|
- >Conservatoire de Musique & de Danse de Sens (78)</small
|
|
|
- >
|
|
|
+ <div class="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-card class="right mx-auto">
|
|
|
<v-card-title>
|
|
|
- <span class="review-name">Karine GIRAUD </span>
|
|
|
+ Karine GIRAUD
|
|
|
</v-card-title>
|
|
|
|
|
|
<v-card-text>
|
|
|
- <p class="description-review">
|
|
|
+ <p>
|
|
|
É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
|
|
|
@@ -58,11 +66,13 @@
|
|
|
</v-card-text>
|
|
|
|
|
|
<div class="card-footer">
|
|
|
- <small class="status">Secrétaire administrative</small>
|
|
|
+ <small class="status">
|
|
|
+ Secrétaire administrative
|
|
|
+ </small>
|
|
|
|
|
|
<small class="structure">
|
|
|
- Association Musicale Sainte Cécile de Lagord (17)</small
|
|
|
- >
|
|
|
+ Association Musicale Sainte Cécile de Lagord (17)
|
|
|
+ </small>
|
|
|
</div>
|
|
|
</v-card>
|
|
|
</v-col>
|
|
|
@@ -72,13 +82,13 @@
|
|
|
<v-row justify="center">
|
|
|
<div class="col-review">
|
|
|
<v-col cols="6">
|
|
|
- <v-card class="review-card left mx-auto">
|
|
|
+ <v-card class="left mx-auto">
|
|
|
<v-card-title>
|
|
|
- <span class="review-name">Laurent BEL</span>
|
|
|
+ Laurent BEL
|
|
|
</v-card-title>
|
|
|
|
|
|
<v-card-text>
|
|
|
- <p class="description-review">
|
|
|
+ <p>
|
|
|
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
|
|
|
@@ -87,26 +97,27 @@
|
|
|
face à un problème rencontré..
|
|
|
</p>
|
|
|
</v-card-text>
|
|
|
+
|
|
|
<div class="card-footer">
|
|
|
- <small class="status"
|
|
|
- >Directeur administratif & pédagogique
|
|
|
+ <small class="status">
|
|
|
+ Directeur administratif & pédagogique
|
|
|
</small>
|
|
|
|
|
|
<small class="structure">
|
|
|
- École de Musique EPIC Musique en 4 Rivières (74)</small
|
|
|
- >
|
|
|
+ É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 class="right mx-auto">
|
|
|
<v-card-title>
|
|
|
- <span class="review-name">Philippe BORY</span>
|
|
|
+ Philippe BORY
|
|
|
</v-card-title>
|
|
|
|
|
|
<v-card-text>
|
|
|
- <p class="description-review">
|
|
|
+ <p>
|
|
|
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
|
|
|
@@ -114,30 +125,32 @@
|
|
|
au quotidien.
|
|
|
</p>
|
|
|
</v-card-text>
|
|
|
+
|
|
|
<div class="card-footer">
|
|
|
- <small class="status">Personnel administratif</small>
|
|
|
+ <small class="status">
|
|
|
+ Personnel administratif
|
|
|
+ </small>
|
|
|
|
|
|
<small class="structure">
|
|
|
- École d'Arts de Saint-Michel-sur-Orge (91)</small
|
|
|
- >
|
|
|
+ École d'Arts de Saint-Michel-sur-Orge (91)
|
|
|
+ </small>
|
|
|
</div>
|
|
|
</v-card>
|
|
|
</v-col>
|
|
|
</div>
|
|
|
</v-row>
|
|
|
|
|
|
+ <!-- Partie 1 : Carrousel logos clients -->
|
|
|
<div class="content-review">
|
|
|
- <CommonCarouselTrustCompanie
|
|
|
+ <CommonCarouselClients
|
|
|
:items="items"
|
|
|
- :title-color="'#fff'"
|
|
|
- :carousel-border-color="'#fff'"
|
|
|
- :carousel-button-color="'#fff'"
|
|
|
- :icon-color="'#fff'"
|
|
|
+ color="#fff"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="smAndDown">
|
|
|
+ <!-- Petits écrans -->
|
|
|
+ <div v-else>
|
|
|
<v-row>
|
|
|
<v-col cols="12">
|
|
|
<Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCaroussel">
|
|
|
@@ -191,13 +204,14 @@
|
|
|
</LayoutContainer>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
+<script setup lang="ts">
|
|
|
import { ref } from "vue";
|
|
|
import { Carousel, Slide } from "vue3-carousel";
|
|
|
import "vue3-carousel/dist/carousel.css";
|
|
|
import { useDisplay } from "vuetify";
|
|
|
|
|
|
-const { smAndDown } = useDisplay();
|
|
|
+const { smAndDown, mdAndUp } = useDisplay();
|
|
|
+
|
|
|
const reviewCaroussel = ref(null);
|
|
|
|
|
|
const state = ref({
|
|
|
@@ -263,6 +277,113 @@ const items = ref([
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+
|
|
|
+.container-1 {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ height: 22rem;
|
|
|
+
|
|
|
+ .v-icon {
|
|
|
+ margin-top: 1rem;
|
|
|
+ color: #64afb7;
|
|
|
+ }
|
|
|
+
|
|
|
+ h6 {
|
|
|
+ font-size: 1rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ margin-top: 1rem;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 2.16px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 2rem;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ color: #071b1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.container-2 {
|
|
|
+ background-color: #0e2d32;
|
|
|
+ height: 60rem;
|
|
|
+
|
|
|
+ .col-review {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .v-card {
|
|
|
+ padding-top: 1rem;
|
|
|
+ width: 21rem;
|
|
|
+ min-height: 21rem;
|
|
|
+ max-height: 21rem;
|
|
|
+ margin-bottom: 0.9rem;
|
|
|
+
|
|
|
+ .v-card-title {
|
|
|
+ margin-left: 1rem;
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: "Barlow", serif;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #9edbdd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-card-text p {
|
|
|
+ text-align: justify !important;
|
|
|
+ height: 10rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #071b1f;
|
|
|
+ margin: 0 1rem 1rem 1rem;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-footer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 1rem;
|
|
|
+
|
|
|
+ small {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 90%;
|
|
|
+ color: #071b1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ margin-top: 1rem;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 0.18em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .structure {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.custom-controls div {
|
|
|
width: 0.6rem;
|
|
|
height: 0.6rem;
|
|
|
@@ -297,16 +418,6 @@ const items = ref([
|
|
|
.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;
|
|
|
@@ -318,94 +429,6 @@ const items = ref([
|
|
|
bottom: 7rem;
|
|
|
}
|
|
|
|
|
|
-.icon-title {
|
|
|
- margin-top: 1rem;
|
|
|
- color: #64afb7;
|
|
|
-}
|
|
|
|
|
|
-.container-green {
|
|
|
- background-color: #0e2d32;
|
|
|
- height: 60rem;
|
|
|
-}
|
|
|
|
|
|
-.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;
|
|
|
-}
|
|
|
-
|
|
|
-.container-color-md {
|
|
|
-}
|
|
|
-.review-card {
|
|
|
- padding-top: 1rem;
|
|
|
- width: 21rem;
|
|
|
- min-height: 21rem;
|
|
|
- max-height: 21rem;
|
|
|
- margin-bottom: 0.9rem;
|
|
|
-}
|
|
|
-.review-name {
|
|
|
- margin-left: 1rem;
|
|
|
- font-weight: 500;
|
|
|
- font-family: "Barlow";
|
|
|
- font-style: normal;
|
|
|
- font-size: 1.4rem;
|
|
|
- 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>
|
Olivier Massot