correction v2 homepage

assets/css/main.css

@@ -1,4 +1,7 @@
-h1, h2, h3, h4, h5, h6, p, .btn-contact, td, .button-faq, li {
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
+
+h1, h2, h3, h4, h5, h6, p, .btn-event, .btn-contact, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
+.status {
   font-family: "Barlow";
   font-style: normal;
 }

components/Contact/Banner.vue

@@ -170,6 +170,10 @@
 
 <script setup>
 import { ref, reactive, computed, toRefs } from "vue";
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const defaultRequestType = route.query.request;
 
 const name = ref("");
 const surname = ref("");
@@ -181,7 +185,6 @@ const gender = ref(null);
 const postalCode = ref(null);
 const city = ref("");
 const phone = ref(null);
-const requestType = ref(null);
 const concernedProduct = ref("");
 const newsletterSubscription = ref(false);
 
@@ -213,6 +216,7 @@ const requestTypes = [
   "Demande d'option supplémentaire",
   "Autre",
 ];
+const requestType = ref(defaultRequestType === 'demo' ? "Demande de démonstration" : null );
 
 const formData = reactive({
   gender: null,

components/Home/Besoin.vue

@@ -25,8 +25,8 @@
 
           <p :class="smAndDown ? 'details-sm' : 'details'">
             La satisfaction de nos clients est notre première motivation et nous
-            nous tenons à votre écoute pour faire évoluer notre logiciel. Un
-            besoin ? Notifiez le nous et après l'étude de votre demande en
+            nous tenons à votre écoute pour faire évoluer notre logiciel. <br> <span class="bold">Un
+            besoin ?</span> Notifiez le nous et après l'étude de votre demande en
             interne puis validation, nous intégrerons votre requête à notre
             processus de développement.
           </p>
@@ -42,6 +42,10 @@ const {  smAndDown } = useDisplay();
 </script>
 
 <style scoped>
+
+.bold{
+  
+}
 .btn-event-sm {
   font-family: "Barlow";
   font-style: normal;

components/Home/Caroussel.vue

@@ -1,7 +1,9 @@
 <template>
   <LayoutContainer>
-
-    <LayoutUITitlePage title="LOGICIELS CULTURELS" subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE" />
+    <LayoutUITitlePage
+      title="LOGICIELS CULTURELS"
+      subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
+    />
     <!-- <v-carousel
       ref="carousel"
       v-model="activeIndex"
@@ -22,30 +24,25 @@
       :show-delimiters="false"
       :touch="true"
     >
-      <v-carousel-item
-        v-for="(item, index) in carouselItems"
-        :key="index"
-      >
+      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
           <v-col cols="6">
-            <v-row >
-              <v-img
-                v-if="!smAndDown"
-                class="logo"
-                :src="item.logo"
-              />
+            <v-row>
+              <v-img v-if="!smAndDown" class="logo" :src="item.logo" />
             </v-row>
 
             <v-row class="align-start">
-              <p class="description ml-4 mr-4">
-                {{ item.description }}
-              </p>
+              <p v-html="item.description" class="description"></p>
             </v-row>
 
             <v-row class="align-start">
               <nuxt-link :to="item.link">
                 <v-btn :class="item.buttonClass">
                   En savoir plus
+                  <i
+                    class="fas fa-arrow-right"
+                    style="color: black; margin-left: 8px"
+                  ></i>
                 </v-btn>
               </nuxt-link>
             </v-row>
@@ -57,11 +54,7 @@
                 class="background-rectangle"
                 :style="{ backgroundColor: item.color }"
               />
-              <v-card
-                v-if="!smAndDown"
-                class="card"
-                elevation="5"
-              >
+              <v-card v-if="!smAndDown" class="card" elevation="5">
                 <v-img
                   class="profile-image"
                   :src="item.avatar"
@@ -72,10 +65,11 @@
                 <v-card-text>
                   <v-card-title class="name">
                     {{ item.name }}
+
+                    <p class="school">
+                      {{ item.school }}
+                    </p>
                   </v-card-title>
-                  <p class="school">
-                    {{ item.school }}
-                  </p>
                   <p class="status">
                     {{ item.status }}
                   </p>
@@ -83,9 +77,8 @@
               </v-card>
 
               <v-img
-              :src="item.image"
+                :src="item.image"
                 :class="smAndDown ? 'image-sm' : 'image'"
-
               />
             </v-row>
           </v-col>
@@ -119,26 +112,26 @@ const carouselItems = ref([
   {
     logo: "/images/logo/logiciels/School-noir.png",
     description:
-      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique telle que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire. Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
+      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
     buttonClass: "btn-school",
     image: "/images/carousel/school/Fille_School.png",
     color: "rgba(195, 229, 231, 1)",
     link: "/opentalent_school",
     name: "Cindy Blanchard",
-    school: "Conservatoire d'Anemasse",
+    school: "Conservatoire de Musique",
     status: "Eleve",
     avatar: "/images/carousel/school/avatar.png",
   },
   {
     logo: "/images/logo/logiciels/Artist-noir.png",
     description:
-      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion..",
+      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
     buttonClass: "btn-artist",
     image: "/images/carousel/artist/musician.png",
     color: "rgba(250, 194, 10, 0.4)",
     link: "opentalent_artist",
     name: "Thierry Dupont ",
-    school: "Orchestre d’harmonie de Cluse",
+    school: "Orchestre d’harmonie",
     status: "Admin",
     avatar: "/images/carousel/artist/avatar.png",
   },
@@ -151,7 +144,7 @@ const carouselItems = ref([
     color: "rgba(216, 5, 11, 0.4)",
     link: "opentalent_manager",
     name: "Marie Voisin",
-    school: "Confédération Musicale de France",
+    school: "Réseau d'organisations culturelles ",
     status: "ADMIN",
     avatar: "/images/carousel/manager/avatar.png",
   },
@@ -172,11 +165,10 @@ const carouselItems = ref([
   margin-bottom: 2rem;
 }
 
-
 .subtitle {
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: .5rem;
+  letter-spacing: 0.5rem;
   margin-bottom: 8rem;
 }
 
@@ -196,20 +188,28 @@ const carouselItems = ref([
 
 .name {
   text-align: center;
-  font-size: 100%;
-  font-weight: bold;
-  margin-bottom: 1vh;
-  font-family: "Barlow";
-  font-style: normal;
+  font-size: 1rem;
 }
 .school,
 .status {
   text-align: center;
-  font-size: 80%;
+}
+
+.school {
   color: #888888;
-  margin-bottom: 1vh;
+  margin-top: -0.8rem;
+  font-weight: normal !important;
+  font-size: 0.8rem !important;
+  margin-top: 0.2px;
 }
 
+.status {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: black !;
+  font-size: 100%;
+  margin-top: 0.8rem;
+}
 /* ============= RECTANGLE ===============  */
 .background-rectangle {
   position: absolute;
@@ -221,17 +221,17 @@ const carouselItems = ref([
   border-radius: 200px 0px 0px 15rem;
   z-index: -1;
 
-
-/* ============= LOGO ===============  */}
+  /* ============= LOGO ===============  */
+}
 .logo {
   max-width: 25vw;
   height: 25vh;
   margin-top: 10px;
+  margin-left: 7rem;
 }
 .description {
   text-align: left;
-  margin-right: 9vw;
-  margin-left: 2vw;
+  margin-left: 7rem;
   width: 25vw;
   margin-bottom: 1rem;
 }
@@ -252,14 +252,13 @@ const carouselItems = ref([
   right: 5rem;
 }
 
-
 .custom-controls div {
-  width: .6rem;
-  height: .6rem;
+  width: 0.6rem;
+  height: 0.6rem;
   border-radius: 50%;
   background-color: grey;
   cursor: pointer;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .custom-controls .active-control {
@@ -267,10 +266,8 @@ const carouselItems = ref([
   margin-right: 2rem;
 }
 
-
 /* ============= BUTTON ===============  */
 
-
 .btn-school {
   background: rgba(32, 147, 190, 0.4);
 }
@@ -281,21 +278,20 @@ const carouselItems = ref([
 
 .btn-manager {
   background: rgba(216, 5, 11, 0.4);
-
 }
 
-.btn-school, .btn-artist, .btn-manager{
+.btn-school,
+.btn-artist,
+.btn-manager {
   border-radius: 0.5rem;
   margin-left: 2vw;
-  padding: 25px;
+  padding: 15px;
   gap: 9px;
   font-weight: 700;
-  font-size: .9rem;
+  font-size: 0.7rem;
   line-height: 15px;
   width: 10rem;
-  height: 4rem;
-  font-family: "Barlow";
-  font-style: normal;
+  height: 2.5rem;
+  margin-left: 7rem;
 }
-
 </style>

components/Home/EventAgenda.vue

@@ -59,8 +59,6 @@ const { lgAndUp, smAndDown } = useDisplay();
   padding: 0 20rem;
 }
 .btn-event {
-  font-family: "Barlow";
-  font-style: normal;
   border-radius: 0.5rem;
   margin-left: 9vw;
   gap: 9px;
@@ -69,14 +67,10 @@ const { lgAndUp, smAndDown } = useDisplay();
   line-height: 15px;
   width: 18rem;
   margin-top: 3rem;
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding: 2.4rem 4rem;
+  min-width: 20rem;
 }
 .btn-event-sm {
-  font-family: "Barlow";
-  font-style: normal;
   border-radius: 0.5rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -84,8 +78,6 @@ const { lgAndUp, smAndDown } = useDisplay();
   
 }
 .title {
-  font-family: "Barlow";
-  font-style: normal;
   height: 9rem;
   font-weight: 400;
   font-size: 3rem;

components/Home/Help.vue

@@ -1,8 +1,7 @@
 <template>
   <LayoutContainer>
-      <v-row>
-        <v-container class="container">
-
+    <v-row class="mt-12">
+      <v-container class="container">
         <div class="help-container">
           <v-col cols="6">
             <v-img class="help-img" src="/images/help/Help.png" />
@@ -10,7 +9,8 @@
 
           <v-col cols="6">
             <h4 class="subtitle-team">
-              Notre équipe est à vos côtés pour vous guider
+              Notre équipe est à vos côtés <br />
+              pour vous guider
             </h4>
 
             <p class="need-help">
@@ -32,13 +32,14 @@
             </v-row>
 
             <v-row class="row-faq">
-              <v-btn class="button-faq"> consulter la FAQ </v-btn>
+              <a href="https://ressources.opentalent.fr/" target="_blank">
+                <v-btn class="button-faq">Consulter la FAQ</v-btn>
+              </a>
             </v-row>
           </v-col>
         </div>
       </v-container>
-
-      </v-row>
+    </v-row>
   </LayoutContainer>
 </template>
 <script setup>
@@ -53,7 +54,7 @@ const { smAndDown } = useDisplay();
   margin-right: auto;
   width: auto;
 }
-.help-container{
+.help-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -69,10 +70,8 @@ const { smAndDown } = useDisplay();
   gap: 9px;
 }
 
-
 .details {
   margin-top: 20px;
-  width: 19rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -109,7 +108,7 @@ const { smAndDown } = useDisplay();
 }
 
 .subtitle-team {
-  margin-bottom: .7rem;
+  margin-bottom: 0.7rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;

components/Home/Promotion.vue

@@ -1,44 +1,35 @@
 <template>
   <LayoutContainer>
-    <v-col
-      col="12"
-      class="col-gestion"
-    >
+    <v-col col="12" class="col-gestion">
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon
-          size="8"
-          class="fa-solid fa-circle icon-title"
-        />
-        <h5 class="subtitle">
-          GESTION ET PROMOTION
-        </h5>
+        <v-icon size="8" class="fa-solid fa-circle icon-title" />
+        <h5 class="subtitle">GESTION ET PROMOTION</h5>
       </div>
       <v-row>
-  <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
-    <span class="span-color">Simplifiez</span> vous la vie avec un outil
-    <span class="d-inline-flex align-center">
-      <v-img
-        src="/images/promotion/piano.jpg"
-        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-      />
-    </span>
-    tout en un pour la gestion et la promotion
-    <span class="d-inline-flex align-center">
-      <v-img
-        src="/images/promotion/danse.jpg"
-        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-      />
-    </span>
-    , de votre structure culturelle.
-    <span class="d-inline-flex align-center">
-      <v-img
-        src="/images/promotion/cirque.jpg"
-        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-      />
-    </span>
-  </p>
-</v-row>
-
+        <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
+          <span class="span-color">Simplifiez</span>-vous la vie avec un outil
+          <span class="d-inline-flex align-center">
+            <v-img
+              src="/images/promotion/piano.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            />
+          </span>
+          tout en un pour la gestion et la promotion
+          <span class="d-inline-flex align-center">
+            <v-img
+              src="/images/promotion/danse.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            />
+          </span>
+          , de votre structure culturelle.
+          <span class="d-inline-flex align-center">
+            <v-img
+              src="/images/promotion/cirque.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            />
+          </span>
+        </p>
+      </v-row>
     </v-col>
     <v-row>
       <v-col cols="12">
@@ -56,7 +47,7 @@
 
     <div class="outil">
       <h3 class="text-center text-outil">
-        Un outil complet et intuitif <br>
+        Un outil complet et intuitif <br />
         pour chaque structure
       </h3>
 
@@ -65,20 +56,14 @@
           <v-col cols="6">
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img
-                src="/images/pictoHome/picto1.svg"
-                class="picto"
-              >
+              <img src="/images/pictoHome/picto2.svg" class="picto" />
               <p class="text-outil-details">
                 Logiciel de Gestion et communication en ligne
               </p>
             </v-row>
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img
-                src="/images/pictoHome/picto2.svg"
-                class="picto"
-              >
+              <img src="/images/pictoHome/picto3.svg" class="picto" />
               <p class="text-outil-details">
                 Site Web intégré et simple d’usage
               </p>
@@ -89,24 +74,15 @@
           <v-col cols="6">
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img
-                src="/images/pictoHome/picto3.svg"
-                class="picto"
-              >
+              <img src="/images/pictoHome/picto1.svg" class="picto" />
               <p class="text-outil-details">
-                Boostez votre visibilité et votre communication avec l’agenda
-                culturel
+                Augmentez votre visibilité avec l'agenda culturel
               </p>
             </v-row>
             <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img
-                src="/images/pictoHome/picto4.svg"
-                class="picto"
-              >
-              <p class="text-outil-details">
-                Communiquez en réseau
-              </p>
+              <img src="/images/pictoHome/picto4.svg" class="picto" />
+              <p class="text-outil-details">Communiquez en réseau</p>
             </v-row>
             <div class="horizontal-line" />
           </v-col>
@@ -136,14 +112,15 @@ const zoomOut = () => {
   vertical-align: middle;
 }
 
-.rectangle-img, .rectangle-img-sm {
-  max-width: 100%; 
-  height: auto; 
+.rectangle-img,
+.rectangle-img-sm {
+  max-width: 100%;
+  height: auto;
 }
 
 .align-center {
-  align-items: center; 
-  display: inline-flex; 
+  align-items: center;
+  display: inline-flex;
 }
 
 .picto-container {
@@ -195,13 +172,13 @@ const zoomOut = () => {
   margin-bottom: 8rem;
 }
 .screen {
-  width: 700px;
+  width: 900px;
   object-fit: cover;
   margin: 2rem auto;
   text-align: center;
   border-radius: 20px;
   transition: transform 0.2s;
-  bottom: 25rem;
+  bottom: 32rem;
 }
 
 .screen:hover {
@@ -213,7 +190,7 @@ const zoomOut = () => {
   line-height: 1rem;
   margin-top: 1rem;
   color: #c1eff0;
-  text-align: center;;
+  text-align: center;
   letter-spacing: 2.16px;
   text-transform: uppercase;
 }
@@ -273,7 +250,7 @@ const zoomOut = () => {
   margin: 3rem 2rem 10rem;
 }
 
-.v-container{
+.v-container {
   padding: 0;
 }
 

components/Home/Reviews.vue

@@ -7,17 +7,14 @@
       </div>
 
       <h1 class="title-review">C'est vous qui le dites</h1>
-
     </div>
 
     <div v-if="!smAndDown" class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
-        <div class="content">
-          
-        </div>
-        <v-col cols="5" class='col-review'>
-          <v-card class="review-card left mx-auto ">
+        <div class="content"></div>
+        <v-col cols="5" class="col-review">
+          <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
@@ -35,7 +32,7 @@
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">Directeur pédagogique</small>
+            <small class="status">Directeur administratif & pédagogique</small>
 
             <small class="structure"
               >Conservatoire de Musique & de Danse de Sens (78)</small
@@ -43,7 +40,7 @@
           </v-card>
         </v-col>
 
-        <v-col cols="5" class='col-review'>
+        <v-col cols="5" class="col-review">
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -54,15 +51,16 @@
 
             <v-card-text>
               <p class="description-review">
-                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.
+                É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 d'amélioration, car
+                beaucoup ont vu le jour. Enfin, l'accompagnement et la
+                réactivité n'ont jamais faibli depuis toutes ces années
               </p>
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">Directeur pédagogique</small>
+            <small class="status">Secrétaire administrative</small>
 
             <small class="structure">
               Association Musicale Sainte Cécile de Lagord (17)</small
@@ -73,7 +71,7 @@
 
       <v-row justify="center">
         <!-- v-card with client review -->
-        <v-col cols="5" class='col-review'>
+        <v-col cols="5" class="col-review">
           <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -84,23 +82,25 @@
 
             <v-card-text>
               <p class="description-review">
-                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.
+                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 l'outil
+                en fonction de nos besoins. Si besoin, la FAQ est vraiment
+                utile. Elle permet de trouver rapidement une solution face à un
+                problème rencontré..
               </p>
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+            <small class="status">Directeur administratif & pédagogique </small>
 
-            <small class="structure"
-              > École de Musique EPIC Musique en 4 Rivières (74)</small
+            <small class="structure">
+              École de Musique EPIC Musique en 4 Rivières (74)</small
             >
           </v-card>
         </v-col>
 
-        <v-col cols="5" class='col-review'>
+        <v-col cols="5" class="col-review">
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -111,15 +111,19 @@
 
             <v-card-text>
               <p class="description-review">
-                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. 
+                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 relation
+                commerciale, c'est pour nous un véritable partenaire au
+                quotidien.
               </p>
             </v-card-text>
 
             <!-- card footer-->
             <small class="status">Personnel administratif</small>
 
-            <small class="structure"
-              > École d'Arts de Saint-Michel-sur-Orge (91)</small
+            <small class="structure">
+              École d'Arts de Saint-Michel-sur-Orge (91)</small
             >
           </v-card>
         </v-col>
@@ -156,7 +160,6 @@
         </Slide>
       </Carousel>
     </div>
-
   </LayoutContainer>
 </template>
 
@@ -236,13 +239,11 @@ const items = ref([
 </script>
 
 <style scoped>
-
-.col-review{
+.col-review {
   display: flex;
   justify-content: center;
   align-items: center;
   justify-content: normal;
-
 }
 
 .left {
@@ -253,10 +254,9 @@ const items = ref([
 .right {
   position: relative;
   bottom: 7rem;
-
 }
 
-.title{
+.title {
   font-size: 2rem;
   line-height: 42px;
   text-align: center;
@@ -275,7 +275,7 @@ const items = ref([
   color: #ffffff;
 }
 
-.carousel-button{
+.carousel-button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -297,7 +297,6 @@ const items = ref([
   display: block;
 }
 
-
 .carousel {
   background-color: white;
   margin-top: 2rem;
@@ -385,14 +384,13 @@ const items = ref([
 }
 
 .small-title {
-  font-size: 1.2rem;
+  font-size: 1rem;
   line-height: 1rem;
   margin-top: 1rem;
-  margin-bottom: 2rem;
   text-align: center;
-  font-family: "Barlow";
   letter-spacing: 2.16px;
   text-transform: uppercase;
+  margin-bottom: .5rem;
 }
 
 .title-review {

components/Home/Solution.vue

@@ -1,20 +1,14 @@
 <template>
   <LayoutContainer :overflow="false">
     <div class="d-flex justify-center align-center flex-column">
-      <v-icon
-        size="8"
-        class="fa-solid fa-circle icon-title"
-      />
-      <p class="text-center solution-subtitle">
-        3 solutions
-      </p>
+      <v-icon size="8" class="fa-solid fa-circle icon-title" />
+      <p class="text-center solution-subtitle">3 solutions</p>
     </div>
     <h3
       class="text-center title"
       :style="smAndDown ? '' : 'margin-bottom: 3rem'"
     >
-      Trouvez la solution <br>
-      faite pour vous
+      Trouvez la solution faites pour vous
     </h3>
 
     <v-row v-if="!smAndDown">
@@ -24,23 +18,21 @@
         cols="4"
         class="col-info"
       >
-        <div class="opentalent-container">
+        <v-container>
           <small class="opentalent-small">Opentalent</small>
           <h2 class="logiciel-name">
             {{ solution.name }}
           </h2>
-          <hr class="bar">
+          <hr class="bar" />
           <p class="description-logiciel">
             {{ solution.description }}
           </p>
 
           <nuxt-link :to="solution.link">
             <v-row>
-              <div :class="solution.class">
-                <v-img
-                  :src="solution.image"
-                  class="logo"
-                />
+              <div :class="solution.class" class="image-container">
+                <v-img :src="solution.image" class="logo" />
+                <v-btn  v-on:mouseover="mouseover" class="view-button">Découvrir</v-btn>
               </div>
             </v-row>
           </nuxt-link>
@@ -69,91 +61,9 @@
               </ul>
             </v-col>
           </v-row>
-        </div>
+        </v-container>
       </v-col>
     </v-row>
-
-    <!-- <div v-if="smAndDown">
-      <div class="d-flex justify-center align-center">
-        <div
-          class="carousel-button"
-          @click="goPrevious"
-        >
-          <i class="fas fa-chevron-left" />
-        </div>
-        <div
-          class="carousel-button ml-6"
-          @click="goNext"
-        >
-          <i class="fas fa-chevron-right" />
-        </div>
-      </div>
-      <Carousel
-        ref="carousel"
-        :items-to-show="1.5"
-        :items-to-scroll="1"
-      >
-        <Slide
-          v-for="(solution, index) in solutions"
-          :key="index"
-        >
-          <v-col
-            cols="12"
-            class="col-info-sm"
-          >
-            <div class="opentalent-container">
-              <small class="opentalent-small-sm">Opentalent</small>
-
-              <h2 class="logiciel-name-sm">
-                {{ solution.name }}
-              </h2>
-              <hr class="bar-sm">
-              <p class="description-logiciel-sm">
-                {{ solution.description }}
-              </p>
-
-              <nuxt-link :to="solution.link">
-                <v-row>
-                  <div :class="solution.class">
-                    <v-img
-                      :src="solution.image"
-                      class="logo-sm"
-                    />
-                  </div>
-                </v-row>
-              </nuxt-link>
-              <v-row>
-                <v-col cols="6">
-                  <ul class="list-solutions-sm">
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                      :key="'sol-' + i"
-                      class="details-solution-sm"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-                <v-col
-                  cols="6"
-                  class="solution-column"
-                >
-                  <ul class="list-solutions-sm">
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(4)"
-                      :key="'sol-' + i"
-                      class="details-solution-sm"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-              </v-row>
-            </div>
-          </v-col>
-        </Slide>
-      </Carousel>
-    </div> -->
   </LayoutContainer>
 </template>
 
@@ -177,8 +87,8 @@ const solutions = [
   {
     name: "Artist",
     description: "Orchestres, chorales, compagnies de danse, théâtre et cirque",
-    image: "/images/OpenTalent_LogoNoir_Jaune_white.png",
-    link: "/logiciels/artist",
+    image: "/images/logo/logiciels/Artist-Blanc.png",
+    link: "/opentalent_artist",
     class: "artist-image",
     solutions: [
       "Gestion des membres",
@@ -194,8 +104,8 @@ const solutions = [
   {
     name: "School",
     description: "Petits et grands établissements d'enseignement artistique",
-    image: "/images/logo_school_white.png",
-    link: "/logiciels/school",
+    image: "/images/logo/logiciels/School-Blanc.png",
+    link: "/opentalent_school",
     class: "school-image",
     solutions: [
       "Gestion des membres",
@@ -211,17 +121,18 @@ const solutions = [
   {
     name: "Manager",
     description: "Fédérations, confédérations et collectivités",
-    image: "/images/OpenTalent_LogoNoir_rouge_manager_white.png",
-    link: "/logiciels/manager",
+    image: "/images/logo/logiciels/Manager-Blanc.png",
+    link: "/opentalent_manager",
     class: "manager-image",
     solutions: [
-      "Gestion des personnes",
-      "Agenda",
-      "Suivi pédagogique",
-      "Règlements",
-      "Communication",
-      "Site internet intégré",
+      "Gestion des membres",
+      "Agenda du réseau",
+      "Matériel & médiathèque",
+      "Gestion administrative",
       "Statistiques du réseau",
+      "Cotisations",
+      "Site internet intégré",
+      "Communication"
     ],
   },
 ];
@@ -231,10 +142,27 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.solution-subtitle,
-.title {
-  font-family: "Barlow";
-  font-style: normal;
+
+.image-container {
+  position: relative;
+}
+
+.view-button {
+  position: absolute;
+  z-index: 100;
+  bottom: 40%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+  font-size: .8rem ;
+  border-radius: 6px;
+  background: var(--Vert-60, #64AFB7);
+  color: white;
+}
+
+
+.image-container:hover .view-button {
+  display: block;
 }
 
 .solution-subtitle {
@@ -243,16 +171,16 @@ onMounted(() => {
   margin-top: 1rem;
   color: #c1eff0;
   text-align: center;
-  font-family: "Barlow";
   letter-spacing: 2.16px;
   text-transform: uppercase;
 }
 .title {
-  margin-top: .5rem;
-  font-size: 2.5rem;
+  margin-top: 0.5rem;
+  font-size: 2.8rem;
   line-height: 42px;
   text-align: center;
   color: #ffffff;
+  width: 100%;
 }
 
 .carousel-button {
@@ -281,7 +209,7 @@ onMounted(() => {
   margin-left: 0.5rem;
 }
 .logo {
-  width: 8rem;
+  width: 10rem;
   height: 4rem;
   margin-top: 15rem;
 }
@@ -451,7 +379,7 @@ onMounted(() => {
 }
 
 .details-solution {
-  font-size: .9rem;
+  font-size: 0.9rem;
   width: 10rem;
   margin-left: 1rem;
   font-family: "Barlow";

components/Layout/Footer.vue

@@ -1,17 +1,17 @@
 <template>
   <footer ref="footerElement">
     <LayoutContainer>
-      <div class="footer">
+      <div>
         <div class="content-footer">
           <v-row>
             <v-col
-              :cols="smAndDown ? 12 : 4"
+              :cols="smAndDown ? 12 : 2"
               :class="smAndDown ? 'logo-opentalent-sm' : 'flex-container'"
             >
               <v-img class="logo" src="/images/logo/footer-logo.png" />
-              <small class="ml-12 right-reserved"
+              <!-- <small class="ml-12 right-reserved"
                 >© 2022 Opentalent, Tous droits réservés</small
-              >
+              > -->
             </v-col>
 
             <v-col
@@ -22,13 +22,19 @@
                 <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
               </v-row>
               <v-row>
-                <router-link to="/annuaire" class="small-link ml-12">Annuaire</router-link>
+                <router-link to="/annuaire" class="small-link ml-12"
+                  >Annuaire</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/actualites" class="small-link ml-12">Actualités</router-link>
+                <router-link to="/actualites" class="small-link ml-12"
+                  >Actualités</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/annonces" class="small-link ml-12">Annonces</router-link>
+                <router-link to="/annonces" class="small-link ml-12"
+                  >Annonces</router-link
+                >
               </v-row>
             </v-col>
 
@@ -40,13 +46,19 @@
                 <h5 class="ml-12 mt-10 h5-title">Logiciels culturels</h5>
               </v-row>
               <v-row>
-                <router-link to="/opentalent_artist" class="small-link ml-12">Opentalent Artist</router-link>
+                <router-link to="/opentalent_artist" class="small-link ml-12"
+                  >Opentalent Artist</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/opentalent_school" class="small-link ml-12">Opentalent School</router-link>
+                <router-link to="/opentalent_school" class="small-link ml-12"
+                  >Opentalent School</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/opentalent_manager" class="small-link ml-12">Opentalent Manager</router-link>
+                <router-link to="/opentalent_manager" class="small-link ml-12"
+                  >Opentalent Manager</router-link
+                >
               </v-row>
             </v-col>
 
@@ -58,18 +70,28 @@
                 <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
               </v-row>
               <v-row>
-                <router-link to="/https://ressources.opentalent.fr/display/FAQ/Accueil" class="small-link ml-12">Foire Aux Questions</router-link>
+                <router-link
+                  to="/https://ressources.opentalent.fr/display/FAQ/Accueil"
+                  class="small-link ml-12"
+                  >Foire Aux Questions</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/https://ressources.opentalent.fr/" class="small-link ml-12">Support en ligne</router-link>
+                <router-link
+                  to="/https://ressources.opentalent.fr/"
+                  class="small-link ml-12"
+                  >Support en ligne</router-link
+                >
               </v-row>
               <v-row>
-                <router-link to="/nous-contacter" class="small-link ml-12">Nous contacter</router-link>
+                <router-link to="/nous-contacter" class="small-link ml-12"
+                  >Nous contacter</router-link
+                >
               </v-row>
             </v-col>
 
             <v-col
-              :cols="smAndDown ? 6 : 2"
+              :cols="smAndDown ? 6 : 3"
               :class="smAndDown ? 'link-sm' : ''"
             >
               <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
@@ -78,40 +100,71 @@
 
               <v-row class="ml-5">
                 <v-col :cols="smAndDown ? 4 : 2">
-                  <a href="https://www.facebook.com/opentalent" target="_blank" class="fab fa-facebook brand" />
+                  <a
+                    href="https://www.facebook.com/opentalent"
+                    target="_blank"
+                    class="fab fa-facebook brand"
+                  />
                 </v-col>
-
-                <v-col :cols="smAndDown ? 4 : 2"> 
-                  <a href="https://www.linkedin.com/company/2iopenservice" target="_blank" class="fab fa-linkedin brand" />
+                <v-col :cols="smAndDown ? 4 : 2">
+                  <a
+                    href="https://twitter.com/Opentalent_FRA"
+                    target="_blank"
+                    class="fa-brands fa-square-twitter brand"
+                  />
                 </v-col>
-
                 <v-col :cols="smAndDown ? 4 : 2">
-                  <a href="https://www.youtube.com/@Opentalent74300" target="_blank" class="fab fa-youtube brand" />
+                  <a
+                    href="https://www.linkedin.com/company/2iopenservice"
+                    target="_blank"
+                    class="fab fa-linkedin brand"
+                  />
                 </v-col>
 
                 <v-col :cols="smAndDown ? 4 : 2">
-                  <a href="https://twitter.com/Opentalent_FRA" target="_blank" class="fa-brands fa-square-twitter brand" />
+                  <a
+                    href="https://www.youtube.com/@Opentalent74300"
+                    target="_blank"
+                    class="fab fa-youtube brand"
+                  />
                 </v-col>
               </v-row>
             </v-col>
           </v-row>
-          <hr class="mb-6 mt-4" />
-          <v-row class="mt-2" justify="center">
-            <p>
-              Mentions légales - Politiques de cookies - Conditions Générales de
-              Ventes
-            </p>
-          </v-row>
-          <v-row class="mt-2" justify="center">
-            <p>2024 &copy; Tous droits réservés par Opentalent</p>
-          </v-row>
         </div>
       </div>
+      <v-row class="footer" justify="center">
+        <p class="mt-6">
+          <a
+            class="mention"
+            href="/mentions-legales"
+            target="_blank"
+            >Mentions légales</a
+          >
+          -
+          <a
+            class="mention"
+            href="/politiques-de-cookies"
+            target="_blank"
+            >Politiques de cookies</a
+          >
+          -
+          <a
+            class="mention"
+            href="/CGV"
+            target="_blank"
+            >Conditions Générales de Ventes</a
+          >
+        </p>
+      </v-row>
+
+      <v-row justify="center" class="mb-6">
+        <p>2024 &copy; Tous droits réservés par Opentalent</p>
+      </v-row>
     </LayoutContainer>
   </footer>
 </template>
 
-
 <script setup>
 import { useDisplay } from "vuetify";
 import { ref, provide } from "vue";
@@ -123,8 +176,12 @@ const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
+.mention {
+  text-decoration: none;
+  color: #ffffff;
+}
 
-.brand{
+.brand {
   color: #ecfbfc;
   font-size: 1.9rem;
   text-decoration: none !important;
@@ -191,7 +248,8 @@ const { smAndDown, lgAndUp } = useDisplay();
   font-size: 0.9rem;
   line-height: 20px;
   color: #ffffff;
-  text-decoration: none !important; ;
+  text-decoration: none !important;
+  margin-bottom: 0.5rem;
 }
 .container {
   background: #091d20;
@@ -207,10 +265,12 @@ const { smAndDown, lgAndUp } = useDisplay();
 
 .footer {
   margin-top: 2rem;
-  margin-bottom: 3rem;
+  border-top: 0.4px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
 }
 
 .logo {
+  margin-bottom: 3rem;
 }
 
 .logo-jaune {

components/Layout/Navigation.vue

@@ -1,23 +1,23 @@
 <template>
+     <div class="container-grey">
+  <v-row>
+    <v-col cols="12" class="buttons-col">
+      <nuxt-link to="https://admin.opentalent.fr/#/login/">
+        <v-btn class="btn btn-common btn-login" text>
+          <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
+          logiciels
+        </v-btn>
+      </nuxt-link>
+
+      <div class="vertical-bar" />
+      <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
+        <v-icon left class="fas fa-calendar mr-4"></v-icon> Logiciel Culturel
+      </v-btn>
+    </v-col>
+  </v-row>
+</div>
   <LayoutContainer>
-    <div class="container-grey ">
-      <v-row>
-        <v-col cols="12" class="buttons-col">
-          
-          <nuxt-link to="https://admin.opentalent.fr/#/login/">
-            <v-btn class="btn btn-common btn-login" text>
-              <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
-              logiciels
-            </v-btn>
-          </nuxt-link>
-
-          <div class="vertical-bar" />
-          <v-btn class="btn btn-common btn-subscribe ml-4" text>
-            <v-icon left class="fas fa-calendar mr-4"></v-icon> Agenda Culturel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </div>
+
 
     <v-row class="menu">
       <v-col cols="3">

components/Layout/UI/StickyMenu.vue

@@ -1,14 +1,20 @@
-
 <template>
-  <div :class="stickyClass" >
-    <v-row class="outil-row" >
+  <div :class="stickyClass">
+    <v-row class="outil-row">
       <v-col cols="12">
-        <div class="container-square ">
-          <v-row v-for="square in squares" :key="square.id" :class="square.bgColor">
-            <div>
-              <v-icon :class="square.iconClass" />
-              <p class="text-square">{{ square.text }}</p>
-            </div>
+        <div class="container-square">
+          <v-row
+            v-for="square in squares"
+            :key="square.id"
+            :class="square.bgColor"
+            @click="() => handleSquareClick(square)"
+          >
+            <NuxtLink :to="square.url" class="link">
+              <div>
+                <v-icon :class="square.iconClass" />
+                <p class="text-square">{{ square.text }}</p>
+              </div>
+            </NuxtLink>
           </v-row>
         </div>
       </v-col>
@@ -18,7 +24,9 @@
 
 <script setup lang="ts">
 import { ref, defineProps } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const props = defineProps({
   shouldShowStickyMenu: Boolean,
   squaresData: Array,
@@ -27,10 +35,33 @@ const props = defineProps({
 const stickyClass = ref("sticky-scroll");
 
 const squares = ref(props.squaresData);
-
+const telephoneNumber = "09 72 12 60 17";
+const handleSquareClick = (square) => {
+  if (square.id === 2) {
+    router.push({ path: square.url, query: { request: "demo" } });
+  } else if (square.id === 4) {
+    if (isMobileDevice()) {
+      window.location.href = `tel:${telephoneNumber}`;
+    } else {
+      alert(`Notre numéro de téléphone : ${telephoneNumber}`);
+    }
+  } else {
+    router.push({ path: square.url });
+  }
+};
+
+const isMobileDevice = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+};
 </script>
 
 <style scoped>
+.link {
+  text-decoration: none;
+  color: white;
+}
 
 .container-square {
   display: flex;
@@ -52,7 +83,6 @@ const squares = ref(props.squaresData);
   font-family: "Barlow";
   width: 10rem;
   padding: 1rem;
-
 }
 
 .yellow-square {
@@ -75,5 +105,4 @@ const squares = ref(props.squaresData);
 .text-square {
   margin: 0.5rem 2rem;
 }
-
 </style>

components/Layout/UI/TitlePage.vue

@@ -35,5 +35,7 @@ const props = defineProps({
   line-height: 2rem;
   letter-spacing: .5rem;
   margin-bottom: 8rem;
+  text-transform: uppercase;
+
 }
 </style>

components/Logiciels/School/Formations.vue

@@ -41,7 +41,6 @@
         </v-col>
       </v-row>
 
-
       <v-row class="card-container mb-12">
         <v-col
           cols="3"
@@ -111,7 +110,6 @@ const formations = ref([
 </script>
 
 <style scoped>
-
 .col-details {
   margin-right: 6rem;
   margin-left: 5rem;

pages/actualites/[id].vue

@@ -33,11 +33,10 @@
       </v-row>
 
       <v-row>
-    <p class="description-actu">
-        {{ plainText }}
-    </p>
-</v-row>
-
+        <p class="description-actu">
+          {{ plainText }}
+        </p>
+      </v-row>
 
       <v-row class="d-flex justify-center align-center">
         <v-btn class="btn mb-12" text>
@@ -160,8 +159,8 @@ const getImageUrl = (attachment: string) => {
   return "/images/actu/image.png";
 };
 const plainText = computed(() => {
-    let doc = new DOMParser().parseFromString(actu.value?.bodyText, 'text/html');
-    return doc.body.textContent || "";
+  let doc = new DOMParser().parseFromString(actu.value?.bodyText, "text/html");
+  return doc.body.textContent || "";
 });
 
 const tagColor = (tag) => {
@@ -493,20 +492,20 @@ const goNext = () => carousel.next();
 
 .social-icon i {
   font-size: 1.9em;
-  margin-left: .5rem;
-  margin-top: .5rem
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
-.key-word{
+.key-word {
   color: #000;
-font-family: Barlow;
-font-size: 20px;
-font-style: normal;
-font-weight: 500;
-line-height: 24px;
+  font-family: Barlow;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
 }
 
-.title-other{
+.title-other {
   color: #fff;
 }
 </style>

pages/index.vue

@@ -7,47 +7,57 @@
     />
   </div>
   <HomeCaroussel />
-  
+
   <HomePromotion />
   <HomeSolution />
   <HomeEventAgenda />
   <HomeBesoin />
   <HomeReviews />
   <!-- <HomeNews /> -->
-  <HomeHelp id="layout-footer"/>
-  <LayoutPrefooter id="layout-footer"/>
-  <LayoutFooter id="layout-footer"/>
+  <HomeHelp id="layout-footer" />
+  <LayoutPrefooter id="layout-footer" />
+  <LayoutFooter id="layout-footer" />
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const shouldShowStickyMenu = ref(true);
 
+
 const squaresData = [
   {
     id: 1,
     bgColor: "blue-square",
     iconClass: "fa-regular fa-comments icon",
     text: "Nous contacter",
+    url: "/nous-contacter",
   },
   {
     id: 2,
     bgColor: "blue-square",
     iconClass: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
+    url: "/nous-contacter",
+
   },
   {
     id: 3,
     bgColor: "blue-square",
     iconClass: "fa-brands fa-readme icon",
     text: "Brochure",
+    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
+
   },
   {
     id: 4,
     bgColor: "darkblue-square",
     iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler",
+    text: "Nous Appeler"
+
   },
 ];
 
@@ -74,8 +84,14 @@ onMounted(() => {
   position: sticky;
   top: 25rem;
   z-index: 1;
-  margin-bottom: -30rem;
+  margin-bottom: -32rem;
   float: right;
 }
 
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 20rem;
+    margin-bottom: -28rem;
+  }
+}
 </style>

pages/opentalent_school.vue

@@ -75,7 +75,7 @@ onMounted(() => {
 <style scoped>
 #sticky-menu {
   position: sticky;
-  top: 20rem;
+  top: 25rem;
   z-index: 1;
   margin-bottom: -30rem;
   float: right;