various fixes

assets/style/main.scss

@@ -3,7 +3,7 @@
 body {
   font-family: "Barlow", serif;
   font-style: normal;
-
+  text-align: justify;
   --banner-center-image: 20%;
 }
 
@@ -35,6 +35,6 @@ body {
   margin: -12px auto;
 }
 
-* {
-  text-align: justify;
+h1, h2, h3, h4, h5, li, .v-btn {
+  text-align: start;
 }

assets/style/theme.scss

@@ -9,6 +9,7 @@ body {
   --on-primary-color: #ffffff;
   --on-primary-color-alt: #caf5f4;
   --secondary-color: #9edbdd;
+  --secondary-color-light: #c6eaeb;
   --on-secondary-color: #262626;
   --neutral-color-alt: #dbdbdb;
   --neutral-color-alt-strong: #999999;

components/About/FAQ.vue

@@ -36,11 +36,11 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 <style scoped lang="scss">
 .v-col {
-  height: 20rem;
+  height: 25rem;
 }
 
 .v-img {
-  height: 20rem;
+  height: 25rem;
 }
 
 h4 {

components/About/Logiciels.vue

@@ -13,13 +13,13 @@
 
       <v-row class="mb-12 center-90">
         <v-col md="3">
-          <p class="text-justify mr-4 ml-6 mb-6">
+          <p class="text-justify mr-4 ml-2 mb-6">
             Découvrez notre gamme de logiciels de gestion & de communication
             adapté au secteur culturel. <br />
             Des fonctionnalités complètes:
           </p>
 
-          <ul class="ml-6">
+          <ul class="ml-4">
             <li
               v-for="(feature, index) in features"
               :key="index"
@@ -122,7 +122,7 @@ ul {
 li {
   margin-left: 0.8rem;
   position: relative;
-  margin-bottom: 10px;
+  margin-bottom: 6px;
 }
 
 li:before {

components/Common/ActionMenu.vue

@@ -172,7 +172,7 @@ const onActionClick = (action: ActionMenuItem) => {
   cursor: pointer;
 
   transition: transform 0.3s ease-in-out;
-  box-shadow: -1px 2px 4px 2px var(--on-neutral-color-light);
+  box-shadow: -1px 2px 6px 1px var(--on-neutral-color-light);
 }
 
 .square:hover {
@@ -182,6 +182,10 @@ const onActionClick = (action: ActionMenuItem) => {
 .link {
   text-decoration: none;
   color: var(--on-primary-color);
+
+  * {
+    text-align: center;
+  }
 }
 
 .primary {

components/Common/Avantages.vue

@@ -10,7 +10,7 @@
       </LayoutUITitle>
     </v-row>
 
-    <v-row class="center-90">
+    <v-row class="center-90 benefits">
       <v-col
         cols="12"
         md="4"

components/Common/Carousel/Fonctionnalite.vue

@@ -21,7 +21,7 @@
       <v-col cols="12" md="12">
         <Carousel
           ref="carousel"
-          :items-to-show="4"
+          :items-to-show="5"
           :items-to-scroll="1"
           :wrap-around="true"
         >
@@ -174,8 +174,8 @@ const previousAction = () => {
   .v-card{
     min-height: 400px !important;
     max-height: 400px !important;
-    min-width: 400px !important;
-    max-width: 400px !important;
+    min-width: 300px !important;
+    max-width: 300px !important;
   }
 }
 

components/Common/Contact.vue

@@ -11,6 +11,7 @@
           <v-img
             src="/images/contact/contact.jpg"
             alt="Téléphone fixe posé sur un fond bleu comportant des bulles d’onomatopée : HAHA! OH! HEY! WOW! "
+            :cover="mdAndDown"
             class="help-img"
           />
         </v-col>
@@ -96,7 +97,7 @@
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 import { useDisplay } from "vuetify";
 
-const { smAndDown, mdAndUp } = useDisplay()
+const { smAndDown, mdAndDown, mdAndUp } = useDisplay()
 
 </script>
 

components/Common/MenuScroll.vue

@@ -67,7 +67,7 @@ const handleScroll = () => {
 <style scoped lang="scss">
 .sticky-menu {
   position: fixed;
-  top: 0;
+  top: 0 !important;
   left: 0;
   right: 0;
   background: var(--neutral-color);
@@ -75,6 +75,7 @@ const handleScroll = () => {
 }
 
 .menu-container {
+  top: -32px;
   z-index: 3;
   display: flex;
   justify-content: center;

components/Formation/Catalogue.vue

@@ -197,7 +197,7 @@ const courses: Array<Training> = [
 ];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 .catalog {
   padding: 2rem;
@@ -240,7 +240,7 @@ const courses: Array<Training> = [
   .objectives, .program {
     justify-content: space-between;
     align-items: center;
-    background: var(--secondary-color);
+    background: var(--secondary-color-light);
     margin-top: 1rem;
     margin-bottom: 1rem;
     border-radius: 1rem;

components/Formation/Certification.vue

@@ -11,7 +11,7 @@
             Certification Qualiopi : Marque de certification
           </LayoutUITitle>
 
-          <div class="bloc-certif ml-12 mt-6 mr-12">
+          <div class="bloc-certif">
             <p>
               Nos formations sont certifiées Qualiopi - Actions de formation.
             </p>
@@ -52,6 +52,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 <style scoped lang="scss">
 .bloc-certif {
   text-align: justify;
+  margin: 18px;
 }
 
 ul {
@@ -60,6 +61,7 @@ ul {
   line-height: 20px;
   color: var(--primary-color);
   margin-top: 1rem;
+  margin-left: 14px;
 }
 
 .details-certifications {

components/Formation/Presentation.vue

@@ -71,7 +71,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 <style scoped lang="scss">
 .v-img {
-  width: 80%;
+  width: 560px;
   height: 100%;
   border-radius: 10%;
 

components/Home/Solution.vue

@@ -154,8 +154,7 @@ const solutions: Array<SolutionItem> = [
 <style scoped lang="scss">
 .container {
   background: var(--primary-color);
-  margin-bottom: 15rem;
-  height: 36rem;
+  height: 40rem;
   position: relative;
 
   @media (max-width: 1240px) {

components/JoinUs/Form.vue

@@ -196,6 +196,7 @@ const submit = async () => {
   width: 100%;
   margin-bottom: 0 !important;
   height: 55px;
+  background: var(--secondary-color);
 }
 
 .submit:hover {

components/JoinUs/Missions.vue

@@ -164,12 +164,15 @@ const onFormSubmit = () => {
 .v-btn {
   font-weight: 600;
   height: 50px;
-  background: var(--secondary-color);
   border-radius: 6px;
-  color: var(--on-secondary-color);
+  color: var(--on-neutral-color);
   gap: 9px;
 }
 
+.v-btn:hover {
+  background-color: var(--on-neutral-color-extra-light);
+}
+
 .mission-container {
   margin: 64px 12%;
 

components/Layout/FAQ.vue

@@ -91,7 +91,7 @@
 }
 
 h3 {
-  margin-left: 3rem;
+  margin-left: 20px;
   margin-right: 15rem;
   width: 28rem;
   margin-bottom: 3rem;
@@ -108,7 +108,7 @@ h3 {
 .btn-faq {
   width: 14rem;
   height: 3.5rem;
-  margin-left: 3rem;
+  margin-left: 20px;
   border-radius: 6px;
   font-weight: 500;
   font-size: 0.8rem;

components/Layout/UI/SubTitle.vue

@@ -35,7 +35,7 @@ const props = defineProps({
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: 1rem;
+  margin-left: 10px;
   color: var(--primary-color);
   font-size: 10px;
   font-weight: 600;
@@ -45,7 +45,8 @@ const props = defineProps({
 }
 
 .v-icon {
-  color: var(--on-primary-color-alt);
+  color: var(--on-primary-color-alt) !important;
+  margin-top: 1px;
 }
 
 h2 {

components/Logiciels/Artist/Abonnement/ToSubscribe.vue

@@ -57,6 +57,7 @@
   background-color: var(--on-neutral-color);
   border-radius: 50%;
   margin-left: 11rem;
+  padding-top: 12px;
 
   @media (max-width: 1240px) {
     margin-left: auto;
@@ -100,6 +101,7 @@
   border-radius: 5px;
   text-decoration: none;
   display: inline-block;
+  text-align: center;
 }
 
 .subscription-steps ol {

components/Logiciels/Artist/Formations.vue

@@ -14,7 +14,6 @@
               <v-img
                 src="/images/logiciels/artist/webinaire.jpg"
                 alt="Ordinateur avec un écran en visioconférence avec plusieurs personnes posé sur une table de salon devant une fenêtre avec des plantes et une tasse posées à côté"
-                class="meeting-img"
               />
             </v-col>
 
@@ -63,11 +62,12 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 .formation {
   .v-img {
-    width: 600px;
-    height: 500px;
+    width: 500px;
+    height: 440px;
     background-position: center;
     background-size: cover;
     border-radius: 10%;
+    margin-left: 22px;
 
     @media (max-width: 1240px) {
       margin: 0 auto;

components/Logiciels/Artist/Presentation.vue

@@ -34,11 +34,11 @@ const pictos: Array<FeaturePicto> = [
     text: "Logiciel de gestion et communication full web",
   },
   {
-    src: "/images/logiciels/artist/picto2.png",
+    src: "/images/logiciels/artist/picto3.png",
     text: "Site web intégré & simple d'usage",
   },
   {
-    src: "/images/logiciels/artist/picto3.png",
+    src: "/images/logiciels/artist/picto2.png",
     text: "Boostez votre visibilité & communication",
   },
   { src: "/images/logiciels/artist/picto4.png", text: "Communiquez en réseau" },

components/Logiciels/Manager/Formation.vue

@@ -97,10 +97,10 @@ const formations: Array<Formation> = [
 
 .formation {
   .v-btn {
-    width: 30rem;
-    height: 4rem;
+    width: 26rem;
+    height: 44px;
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: 18px;
     line-height: 18px;
     background: transparent;
     color: var(--on-primary-color);

components/Logiciels/School/Comparatif.vue

@@ -113,9 +113,4 @@ const comparisonItems: Array<ComparisonItem> = [
 ];
 </script>
 <style scoped>
-
-.v-container{
-  width: 95%;
-  margin-right: auto;
-  margin-left: auto;
-}</style>
+</style>

components/Logiciels/School/Formations.vue

@@ -95,10 +95,10 @@ const formations: Array<Formation> = [
 
 .formation {
   .v-btn {
-    width: 30rem;
-    height: 4rem;
+    width: 26rem;
+    height: 44px;
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: 18px;
     line-height: 18px;
     background: transparent;
     color: var(--on-primary-color);

components/Logiciels/School/Presentation.vue

@@ -33,11 +33,11 @@ const pictos: Array<FeaturePicto> = [
     text: "Logiciel de gestion et communication full web",
   },
   {
-    src: "/images/logiciels/school/picto2.png",
+    src: "/images/logiciels/school/picto3.png",
     text: "Site web intégré & simple d'usage",
   },
   {
-    src: "/images/logiciels/school/picto3.png",
+    src: "/images/logiciels/school/picto2.png",
     text: "Boostez votre visibilité & communication",
   },
   {

components/Webinaire/Catalogue.vue

@@ -153,10 +153,10 @@ const courses: Array<Training> = [
     description:
       "Ce webinaire est destiné aux acteurs culturels tels que les orchestres, les chorales, les compagnies et troupes de danse, théâtre et cirque. Il vous permettra de découvrir les fonctionnalités du logiciels, les avantages et les différentes versions.. ",
     objectives: [
-      "Découvrir le logiciel Opentalent Artist",
+      "Obtenir une présentation du logiciel Opentalent Artist",
       "Présentation des principales fonctionnalités",
-      "Quelles sont les différences entre les versions Standard & Premium ?",
-      "Qu'est ce que l'Agenda culturel et l'annuaire ? ",
+      "Qu'est ce que l'agenda culturel et l'annuaire ? ",
+      "Quelles différences entre la version Standard & Premium ?",
     ],
     duration: "1H30",
     additionalObjectives: [
@@ -174,8 +174,8 @@ const courses: Array<Training> = [
         objectives: [
           "Parc matériel",
           "Rapport d’activité",
-          "Site internet",
           "Communication",
+          "Site internet",
         ],
       },
     ],
@@ -191,10 +191,10 @@ const courses: Array<Training> = [
     description:
       " Rejoignez notre webinaire dédié aux petits comme aux GRANDS établissements d'enseignement artistique et découvrez comment optimiser votre travail grâce à un outil professionnel.",
     objectives: [
-      "Découvrir le logiciel Opentalent School",
+      "Obtenir une présentation du logiciel Opentalent School",
       "Comprendre l'écosystème de l'outil",
-      "Présentation des principales fonctionnalités",
-      "Identifier les avantages de cet outil pour votre structure",
+      "Identifier les avantages qu'offre ce logiciel pour votre structure",
+      "Apprendre à gérer votre propre site internet",
     ],
     duration: "1h",
     additionalObjectives: [
@@ -211,9 +211,9 @@ const courses: Array<Training> = [
         id: 2,
         objectives: [
           "Parc matériel",
-          "Rapport d’activité",
-          "Site internet",
+          "Facturation",
           "Communication",
+          "Site internet",
         ],
       },
     ],
@@ -230,8 +230,8 @@ const courses: Array<Training> = [
     objectives: [
       "Configurer l'appel de cotisation",
       "Suivre l'appel de cotisation",
-      "Gérer votre site internet (débutants)",
-      "Gérer votre site internet (confirmés)",
+      "Gérer votre site internet (pour les débutants)",
+      "Gérer votre site internet (pour les confirmés)",
     ],
     duration: "1H30",
     additionalObjectives: [
@@ -350,7 +350,7 @@ const closeModal = () => {
   .objectives, .program {
     justify-content: space-between;
     align-items: center;
-    background: var(--secondary-color);
+    background: var(--secondary-color-light);
     margin-top: 1rem;
     margin-bottom: 1rem;
     border-radius: 1rem;

components/Webinaire/FAQ.vue

@@ -28,10 +28,11 @@ Foire aux questions
         class="faq-item"
       >
         <div
-          class="question"
+          :class="'question' + (isOpen(index) ? ' open' : '')"
           @click="toggle(index)"
         >
-          <v-icon icon="fas fa-circle" />
+          <v-icon v-if="isOpen(index)" icon="fas fa-angle-down" />
+          <v-icon v-else icon="fas fa-angle-right" />
           {{ item.question }}
         </div>
 
@@ -142,17 +143,21 @@ function isOpen(index: number) {
   }
 
   .v-icon {
-    font-size: 10px !important;
+    font-size: 16px !important;
     color: var(--on-primary-color-alt);
     margin-right: 0.5rem;
   }
 }
 
+.question.open {
+  border-radius: 4px 4px 0 0;
+}
+
 .answer {
-  background-color: var(--secondary-color);
+  background-color: var(--secondary-color-light);
   padding: 0.5rem 1rem;
-  border: 1px solid var(--neutral-color-alt-strong);
-  border-top: none;
+  border: none;
   border-radius: 0 0 4px 4px;
+  box-shadow: -1px 2px 6px 1px var(--on-neutral-color-light);
 }
 </style>

pages/opentalent_artist.vue

@@ -37,7 +37,7 @@
 
     <CommonContact class="mb-12"/>
 
-    <LogicielsArtistFormations />
+    <LogicielsArtistFormations class="mb-12" />
 
     <LogicielsArtistReviews />
 

pages/opentalent_manager.vue

@@ -93,7 +93,7 @@ const stickyMenuActions: Array<ActionMenuItem> = [
 
   --action-menu-primary-color: var(--manager-color);
   --action-menu-on-primary-color: var(--primary-color);
-  --action-menu-secondary-color: var(--primary-color);
-  --action-menu-on-secondary-color: var(--on-primary-color);
+  --action-menu-secondary-color: var(--on-primary-color);
+  --action-menu-on-secondary-color: var(--primary-color);
 }
 </style>

pages/opentalent_school.vue

@@ -107,7 +107,7 @@ const stickyMenuActions: Array<ActionMenuItem> = [
 
   --action-menu-primary-color: var(--school-color-light);
   --action-menu-on-primary-color: var(--on-secondary-color);
-  --action-menu-secondary-color: var(--primary-color);
-  --action-menu-on-secondary-color: var(--on-primary-color);
+  --action-menu-secondary-color: var(--on-primary-color);
+  --action-menu-on-secondary-color: var(--primary-color);
 }
 </style>