<template>
  <AnchoredSection id="testimonials">
    <LayoutContainer>
      <CommonReviewSection :cards="cards" />
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup>
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";

const cards = [
  {
    description:
      "Formation très personnalisée et très productive. Tout à fait adaptée à nos besoins actuels.",
    name: "Jocelyne DELAPORTE ",
    status: "Responsable administrative",
    structure: "École de Musique Municipale De Pecquencourt (59)",
  },
  {
    description:
      "Merci à Johan d'avoir pris le temps de nous former, de rentrer dans les détails des questions abordées. Et merci à l'équipe pour votre réactivité lorsque l'on demande à être aidés",
    name: "Claire CAGNON ",
    status: "Secrétaire administrative",
    structure: "École de Musique, Théâtre et Cirque Alsace Rhin Brisach (68)",
  },
  {
    description:
      " Une journée de formation précieuse pour un point complet de la prise en main du logiciel et des réponses utiles aux questions et problématiques rencontrées.",
    name: "Sayuri OKA NICOLEAU",
    status: "Directrice administrative & pédagogique",
    structure: "École Municipale de Musique de Croissy-sur-Seine (78)",
  },
  {
    description:
      "Un formateur à l'écoute des besoins de notre structure et des besoins de nous deux débutants sur le logiciel. Besoin compris pour une journée de formation complémentaire pour lancer la campagne d'inscription courant le deuxième trimestre 2022. Merci pour la patience de Johan, pédagogue et fin connaisseur de son logiciel.",
    name: "Alain BATS",
    status: "Président adjoint",
    structure: "L'École Intercommunale de Musique LEIM (74)",
  },
];
</script>

<style scoped>
:deep().container-green {
  background-color: white !important;
}

:deep().reviews-title {
  color: black !important;
}

:deep().v-card,
.reviewer-name {
  background-color: #0e2d32;
  color: white !important;
}

:deep().reviewer-name {
  color: white !important;
}

:deep().carousel-button i {
  color: #0e2d32 !important;
}
:deep().carousel-button {
  border: 2px solid #0e2d32;
}
.v-container {
  padding: 0 !important;
}
</style>
