refactor remaining components of the formations page

app.vue

@@ -4,5 +4,6 @@
 
 <script setup lang="ts"></script>
 
-<!-- TODO: définir la police Barlow de manière générique et la virer partout
-ailleurs -->
+<!-- TODO: définir la police Barlow de manière générique et la virer partout ailleurs -->
+<!-- TODO: voir si possible de factoriser les consignes 'custom-row' un peu partout -->
+<!-- TODO: voir si possible d'utilser des sections pour factoriser les marges entre les sections d'une page -->

assets/style/theme.scss

@@ -19,6 +19,20 @@ body {
 }
 
 body {
+  // Le thème inversé dans le thème standard est équivalent au thème alternatif
+  .inv-theme {
+    background-color: var(--alt-theme);
+    color: var(--on-alt-theme) !important;
+
+    .v-btn {
+      border-color: var(--on-alt-theme);
+    }
+  }
+  .inv-theme * {
+    color: var(--on-alt-theme) !important;
+  }
+
+  // Thème alernatif
   .alt-theme {
     background-color: var(--alt-theme);
     color: var(--on-alt-theme) !important;
@@ -31,6 +45,7 @@ body {
     color: var(--on-alt-theme) !important;
   }
 
+  // Thème inversé
   .alt-theme .inv-theme {
     background-color: var(--standard-theme);
     color: var(--on-standard-theme) !important;

components/Common/ReviewSection.vue

@@ -1,5 +1,5 @@
 <template>
-    <LayoutContainer class="alt-theme">
+    <LayoutContainer>
       <v-row class="custom-row">
         <v-col cols="3">
           <div class="controls-section">
@@ -30,10 +30,10 @@
             <Slide
               v-for="(card, index) in cards"
               :key="index"
-              class="card inv-theme"
+              class="card"
             >
               <v-container>
-                <v-card>
+                <v-card class="inv-theme">
                   <v-card-item>
                     <v-card-text>
                       {{ card.review }}
@@ -64,10 +64,12 @@
 <script setup lang="ts">
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
+import { PropType } from "@vue/runtime-core";
+import { Review } from "~/types/interface";
 
 const props = defineProps({
   cards: {
-    type: Array,
+    type: Array as PropType<Array<Review>>,
     required: true,
   },
 });
@@ -124,7 +126,7 @@ const goNext = () => {
     width: 60px;
     height: 60px;
     background-color: transparent;
-    border: 2px solid #fff;
+    border: 2px solid var(--on-standard-theme);
     cursor: pointer;
     margin-right: 1rem;
     margin-bottom: 2rem;

components/Formation/Certification.vue

@@ -1,23 +1,26 @@
 <template>
   <AnchoredSection id="certification">
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row>
         <v-col cols="5">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'DES FORMATIONS CERTIFIFIÉES'"
-          />
-          <LayoutUITitle title="Certification" />
-          <LayoutUITitle title="Qualiopi : Marque de certification " />
+          <LayoutUISubTitle>
+            DES FORMATIONS CERTIFIÉES
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Certification Qualiopi : Marque de certification
+          </LayoutUITitle>
+
           <div class="bloc-certif ml-12 mt-6 mr-12">
             <p>
               Nos formations sont certifiées Qualiopi - Actions de formation.
             </p>
+
             <p class="details-certifications">
               La marque « Qualiopi » vise à :
             </p>
-            <ul class="list-qualiopi">
+
+            <ul>
               <li>
                 attester de la qualité du processus mis en œuvre par les
                 prestataires d’actions concourant au développement des
@@ -39,33 +42,29 @@
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
-<style scoped>
-
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.qualiopi-img {
-  background-image: url("/images/formation/qualiopi.jpg");
-  width: 600px;
-  top: -15rem;
-}
+
 .bloc-certif {
   text-align: justify;
 }
 
-.list-qualiopi {
+ul {
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   color: #091d20;
   margin-top: 1rem;
 }
+
 .details-certifications {
   font-weight: 300;
   font-size: 16px;

components/Formation/OPCA.vue

@@ -1,24 +1,25 @@
 <template>
   <AnchoredSection id="financing">
-    <LayoutContainer >
+    <LayoutContainer class="alt-theme py-6 my-6">
       <v-row class="custom-row">
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Financement des formations'"
-          :title-color="'#ffffff'"
-        />
+        <LayoutUISubTitle>
+          Financement des formations
+        </LayoutUISubTitle>
       </v-row>
 
       <v-container>
         <v-row class="align-center custom-row">
           <v-col cols="6">
-            <div class="opca-img"></div>
+            <v-img
+              src="/images/formation/programme.jpg"
+              class="opca-img"
+              cover
+            />
           </v-col>
 
           <v-col cols="12" md="6" lg="6">
             <v-row>
-              <h3 class="title-opca mt-6 mb-6 mr-6">
+              <h3 class="mt-6 mb-6 mr-6">
                 Des formations éligibles par votre OPCA
               </h3>
             </v-row>
@@ -50,11 +51,11 @@
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 @media (min-width: 1200px) {
   .custom-row {
     margin-left: auto;
@@ -68,26 +69,12 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 .opca-img {
-  background-image: url("/images/formation/programme.jpg");
-  background-size: cover;
-  background-position: center;
   height: 400px;
   width: 450px;
   border-radius: 10%;
 }
 
-.details-opca {
-  font-size: 16px;
-  line-height: 20px;
-  margin-top: 2rem;
-  color: #ffffff;
-  width: 100%;
-  margin: auto;
-  text-align: justify;
-
-}
-
-.title-opca {
+h3 {
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
@@ -95,9 +82,12 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   margin-top: 0.6rem;
 }
 
-.container {
-  background: #0e2d32;
-  height: 100%;
-  margin-bottom: 1rem;
+.details-opca {
+  font-size: 16px;
+  line-height: 20px;
+  color: #ffffff;
+  width: 100%;
+  margin: auto;
+  text-align: justify;
 }
 </style>

components/Formation/Participation.vue

@@ -1,32 +1,28 @@
 <template>
   <AnchoredSection id="inscription">
-    <LayoutContainer>
-      <v-row class="custom-row">
+    <LayoutContainer class="alt-theme">
+      <v-row>
         <v-col cols="12">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Accessibilité'"
-            :title-color="'#ffffff'"
-          />
+          <LayoutUISubTitle>
+            Accessibilité
+          </LayoutUISubTitle>
         </v-col>
       </v-row>
 
-      <h2 class="title-participation text-center mb-8">
+      <h3 class="title-participation text-center mb-8">
         Vous souhaitez participer à une formation ?
-      </h2>
+      </h3>
 
       <v-row class="mb-12">
         <v-col cols="12">
-          <div class="participation-img"></div>
-          <!-- <v-img
-            class="participation-img"
+          <v-img
             src="/images/formation/participation.jpg"
-          /> -->
+            class="participation-img"
+          />
         </v-col>
       </v-row>
 
-      <v-row class="mb-12 custom-row">
+      <v-row class="mb-12">
         <v-col cols="12">
           <div class="details-participations">
             <p class="mb-6">
@@ -59,27 +55,34 @@
   </AnchoredSection>
 </template>
 
-<style scoped>
-@media (min-width: 1200px) {
-  .custom-row {
-    min-width: 100%;
-    max-width: 100;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.subtitle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: auto;
-  margin-right: auto;
+
+@media (min-width: 1200px) {
+  .v-row {
+    min-width: 100%;
+  }
 }
+
+h3 {
+  font-family: "Barlow", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  text-align: center;
+  color: #ffffff;
+}
+
+
+
+
+
+
 .details-participations {
   display: flex;
   flex-direction: column;
@@ -109,15 +112,8 @@
   margin-left: auto;
   margin-right: auto;
 }
-.title-participation {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  text-align: center;
-  color: #ffffff;
-}
+
+
 .icon-title {
   font-size: 1rem;
   margin-right: 1rem;

components/Formation/Reviews.vue

@@ -6,33 +6,34 @@
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Review } from "~/types/interface";
 
-const cards = [
+const cards: Array<Review> = [
   {
-    description:
+    review:
       "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:
+    review:
       "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:
+    review:
       " 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:
+    review:
       "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",
@@ -40,33 +41,3 @@ const cards = [
   },
 ];
 </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>

pages/opentalent_artist.vue

@@ -28,7 +28,7 @@
 
     <LogicielsArtistFormations />
 
-    <LogicielsArtistReviews />
+    <LogicielsArtistReviews class="alt-theme"/>
 
     <LayoutFAQ />
 

pages/opentalent_manager.vue

@@ -20,7 +20,7 @@
 
     <LogicielsManagerFormation />
 
-    <LogicielsManagerReviews />
+    <LogicielsManagerReviews class="alt-theme"/>
 
     <LayoutFAQ />
 

pages/opentalent_school.vue

@@ -22,7 +22,7 @@
 
     <LogicielsSchoolFormations />
 
-    <LogicielsSchoolReviews />
+    <LogicielsSchoolReviews class="alt-theme"/>
 
     <LayoutFAQ  />