refactor footer and prefooter components

components/Home/Help.vue

@@ -1,3 +1,7 @@
+<!--
+Section "Besoin d'aide" de la page d'accueil
+-->
+
 <template>
   <LayoutContainer>
     <v-row >

components/Layout/Footer/Footer.vue

@@ -1,214 +1,227 @@
 <template>
   <!--suppress VueUnrecognizedDirective -->
-  <footer
-    ref="footerElement"
-    v-intersect="onIntersect"
-  >
+  <footer v-intersect="onIntersect">
     <LayoutContainer>
-      <div >
+      <div>
         <v-row>
-          <v-col
-            :cols="mdAndDown ? 12 : 3"
-            :class="mdAndDown ? 'logo-container' : 'flex-container'"
-          >
+          <!-- Première section : Logo Opentalent -->
+          <v-col cols="12" lg="3" class="logo">
             <nuxt-link to="/">
-              <v-img
-                :class="mdAndDown ? 'logo-md' : 'logo'"
-                src="/images/logo/footer-logo.png"
-              />
+              <v-img src="/images/logo/footer-logo.png" />
             </nuxt-link>
           </v-col>
 
-          <v-col cols=" 2" v-if="!mdAndDown">
-            <v-row class="title-link">
-              <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
+          <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
+          <v-col v-if="mdAndUp" cols="2" >
+            <v-row>
+              <h5>
+                Agenda culturel
+              </h5>
             </v-row>
             <v-row>
-              <router-link to="/annuaire" class="small-link ml-12"
-                >Annuaire</router-link
-              >
+              <nuxt-link to="/annuaire">
+                Annuaire
+              </nuxt-link>
             </v-row>
             <v-row>
-              <router-link to="/actualites" class="small-link ml-12"
-                >Actualités</router-link
-              >
+              <nuxt-link to="/actualites">
+                Actualités
+              </nuxt-link>
             </v-row>
             <v-row>
-              <router-link to="/annonces" class="small-link ml-12"
-                >Annonces</router-link
-              >
+              <nuxt-link to="/annonces">
+                Annonces
+              </nuxt-link>
             </v-row>
           </v-col>
 
-          <v-col cols="2" v-if="!mdAndDown">
-            <v-row class="title-link">
-              <h5 class="ml-12 mt-10 h5-title">Logiciels culturels</h5>
+          <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
+          <v-col v-if="mdAndUp" cols="2">
+            <v-row>
+              <h5>
+                Logiciels culturels
+              </h5>
             </v-row>
             <v-row>
-              <router-link to="/opentalent_artist" class="small-link ml-12"
-                >Opentalent Artist</router-link
-              >
+              <nuxt-link to="/opentalent_artist">
+                Opentalent Artist
+              </nuxt-link>
             </v-row>
             <v-row>
-              <router-link to="/opentalent_school" class="small-link ml-12"
-                >Opentalent School</router-link
+              <nuxt-link to="/opentalent_school">
+                Opentalent School
+              </nuxt-link
               >
             </v-row>
             <v-row>
-              <router-link to="/opentalent_manager" class="small-link ml-12"
-                >Opentalent Manager</router-link
-              >
+              <nuxt-link to="/opentalent_manager">
+                Opentalent Manager
+              </nuxt-link>
             </v-row>
           </v-col>
 
-          <v-col cols="2" v-if="!mdAndDown">
-            <v-row class="title-link">
-              <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
+          <!-- Quatrième section : liens espace client (écrans larges seulement) -->
+          <v-col v-if="mdAndUp" cols="2">
+            <v-row>
+              <h5>
+                Espace client
+              </h5>
             </v-row>
             <v-row>
-              <NuxtLink
-                to="https://ressources.opentalent.fr/display/FAQ/Accueil"
-                class="small-link ml-12"
-                >Foire Aux Questions</NuxtLink
-              >
+              <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil">
+                Foire Aux Questions
+              </nuxt-link>
             </v-row>
             <v-row>
-              <NuxtLink
-                to="https://ressources.opentalent.fr/"
-                class="small-link ml-12"
-                target="_blank"
-                >Support en ligne</NuxtLink
-              >
+              <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
+                Support en ligne
+              </nuxt-link>
             </v-row>
             <v-row>
-              <NuxtLink
-                to="/nous-contacter"
-                class="small-link ml-12"
-                target="_blank"
-                >Nous contacter</NuxtLink
-              >
+              <nuxt-link to="/nous-contacter" target="_blank" >
+                Nous contacter
+              </nuxt-link>
             </v-row>
           </v-col>
 
-          <v-col cols="3" v-if="!mdAndDown">
-            <v-row class="title-link">
-              <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
+          <!-- Cinquième section : liens réseaux sociaux (écrans larges seulement) -->
+          <v-col v-if="mdAndUp" cols="3">
+            <v-row>
+              <h5>
+                Suivez-nous
+              </h5>
             </v-row>
 
-            <v-row class="ml-5" no-gutters>
+            <v-row class="social-networks">
               <v-col cols="2">
-                <a
+                <nuxt-link
                   href="https://www.facebook.com/opentalent"
                   target="_blank"
-                  class="fab fa-facebook brand"
+                  class="fab fa-facebook"
                 />
               </v-col>
               <v-col cols="2">
-                <a
+                <nuxt-link
                   href="https://twitter.com/Opentalent_FRA"
                   target="_blank"
-                  class="fa-brands fa-square-twitter brand"
+                  class="fa-brands fa-square-twitter"
                 />
               </v-col>
               <v-col cols="2">
-                <a
+                <nuxt-link
                   href="https://www.linkedin.com/company/2iopenservice"
                   target="_blank"
-                  class="fab fa-linkedin brand"
+                  class="fab fa-linkedin"
                 />
               </v-col>
 
               <v-col cols="2">
-                <a
+                <nuxt-link
                   href="https://www.youtube.com/@Opentalent74300"
                   target="_blank"
-                  class="fab fa-youtube brand"
+                  class="fab fa-youtube"
                 />
               </v-col>
             </v-row>
           </v-col>
         </v-row>
 
-        <v-row class="justify-center" v-if="mdAndDown">
+        <!-- Deuxième section alt : version petits écrans -->
+        <v-row
+          v-if="mdAndDown"
+          class="justify-center social-networks"
+        >
+          <!-- TODO: voir si faisable de fusionner avec la section précédente -->
           <v-col cols="12" class="text-center">
-            <a
+            <nuxt-link
               href="https://www.facebook.com/opentalent"
               target="_blank"
-              class="fab fa-facebook brand-md"
+              class="fab fa-facebook"
             />
-            <a
+            <nuxt-link
               href="https://twitter.com/Opentalent_FRA"
               target="_blank"
-              class="fa-brands fa-square-twitter brand-md"
+              class="fa-brands fa-square-twitter"
             />
-            <a
+            <nuxt-link
               href="https://www.linkedin.com/company/2iopenservice"
               target="_blank"
-              class="fab fa-linkedin brand-md"
+              class="fab fa-linkedin"
             />
-            <a
+            <nuxt-link
               href="https://www.youtube.com/@Opentalent74300"
               target="_blank"
-              class="fab fa-youtube brand-md"
+              class="fab fa-youtube"
             />
           </v-col>
         </v-row>
       </div>
+
+      <!-- Troisième section alt : version petits écrans -->
       <v-row v-if="mdAndDown">
         <v-col cols="12" >
           <div v-for="(item, index) in footerLinks" :key="index">
             <v-container>
-              <div  class="link-md d-flex justify-space-between align-left" @click="toggle(index)">
-              {{ item.label }}
-              <v-icon>
-                {{
-                  isActive(index) ? "fas fa-chevron-up" : "fas fa-chevron-down"
-                }}
-              </v-icon>
-            </div>
-              <div class="answer" v-if="isActive(index)">
-              <div
-                v-for="(sublink, sublinkIndex) in item.sublink"
-                :key="sublinkIndex"
-                class="mt-3"
-              >
-                <NuxtLink class="small-link-sm" :to="sublink.link">{{ sublink.label }}</NuxtLink>
+              <div class="section" @click="toggleSection(index)">
+                <div class="d-flex flex-row justify-space-between">
+                  {{ item.label }}
+
+                  <v-icon
+                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
+                  />
+                </div>
+
+                <div
+                  v-show="isActive(index)"
+                  v-for="(sublink, sublinkIndex) in item.sublink"
+                  :key="sublinkIndex"
+                  class="mt-3"
+                >
+                  <nuxt-link :to="sublink.link">
+                    {{ sublink.label }}
+                  </nuxt-link>
+                </div>
               </div>
-            </div>
             </v-container>
 
           </div>
         </v-col>
       </v-row>
-      <v-row :class="mdAndDown ? '' : '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 class="mention">2024 &copy; Tous droits réservés par Opentalent</p>
-      </v-row>
+      <div class="footnotes">
+        <v-row justify="center">
+          <p class="mt-6">
+            <a href="/mentions-legales" target="_blank">
+              Mentions légales
+            </a>
+            -
+            <a href="/politiques-de-cookies" target="_blank">
+              Politiques de cookies
+            </a>
+            -
+            <a href="/CGV" target="_blank">
+              Conditions Générales de Ventes
+            </a>
+          </p>
+        </v-row>
+
+        <v-row class="mb-6" justify="center">
+          <p>
+            2024 &copy; Tous droits réservés par Opentalent
+          </p>
+        </v-row>
+      </div>
     </LayoutContainer>
   </footer>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
-import { ref, provide } from "vue";
 import { useLayoutStore } from "~/stores/layoutStore";
 
-const footerElement = ref(null);
+
+const { mdAndDown, mdAndUp } = useDisplay();
+
 const footerLinks = ref([
   {
     label: "AGENDA CULTUREL",
@@ -279,9 +292,9 @@ const footerLinks = ref([
     ],
   },
 ]);
-const activeIndex = ref(-1);
 
-function toggle(index) {
+const activeIndex = ref(-1);
+function toggleSection(index) {
   activeIndex.value = activeIndex.value === index ? -1 : index;
 }
 
@@ -289,124 +302,46 @@ function isActive(index) {
   return activeIndex.value === index;
 }
 
-provide("footerElement", footerElement);
-
-const { mdAndDown } = useDisplay();
-
 const layoutStore = useLayoutStore()
-
 const onIntersect = (isIntersecting) => {
   layoutStore.setIsFooterVisible(isIntersecting)
 }
 
 </script>
 
-<style scoped>
-
-
-.jusitfy-center {
-  justify-content: center;
-}
-.logo-md {
-  width: 18rem;
-}
-.logo-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+<style scoped lang="scss">
 
-.mention {
-  text-decoration: none;
-  color: #ffffff;
-  font-size: 0.8rem;
+.container {
+  background: #091d20;
+  color: aliceblue; // TODO: replace by primary color variable
 }
 
-.brand {
-  color: #ecfbfc;
-  font-size: 1.9rem;
-  text-decoration: none !important;
+.logo .v-img {
+  margin-bottom: 3rem;
+  width: 25rem;
 }
 
-.brand-md {
-  color: #ecfbfc;
-  font-size: 3rem;
-  text-decoration: none !important;
-  margin: 0 1rem;
-}
-/* .flex-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-} */
-
-.vertical-bar {
-  height: 4rem;
-  border: 0.1rem solid #ecfbfc;
-  margin-left: 10px;
-  margin-top: 3rem;
+.v-col {
+  padding: 12px;
 }
 
-.right-reserved {
-  color: rgba(255, 255, 255, 0.6);
-  font-family: Space Grotesk;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-}
-.h5-title {
-  font-size: 1.1rem;
-  font-style: normal;
-  letter-spacing: 1.2px;
-  text-transform: uppercase;
-}
-.link-md {
-  display: flex;
-  flex-direction: row;
-  text-align: left;
-  text-transform: uppercase;
-  font-family: "Barlow";
+.container {
+  font-family: "Barlow", serif;
   font-style: normal;
-  font-weight: 700;
-  font-size: 1.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-
-
+  padding-top: 32px;
 }
 
-.logo-opentalent-md {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.icon:nth-child(2) {
-  margin-left: 10px;
-}
-.title-link,
-.title-link-sm {
-  font-family: "Barlow";
-  font-style: normal;
+h5 {
   font-weight: 500;
-  font-size: 1rem;
   line-height: 20px;
+  margin-top: 20px;
   margin-bottom: 1rem;
+  font-size: 1.1rem;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
 }
 
-.title-link-sm {
-  margin-bottom: 0.1rem;
-}
-.small-link-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.3rem;
-  line-height: 20px;
-  color: #ffffff;
-  text-decoration: none !important;
-  text-align: left;
-}
-.small-link {
-  font-family: "Barlow";
-  font-style: normal;
+a {
   font-weight: 300;
   font-size: 0.9rem;
   line-height: 20px;
@@ -414,87 +349,77 @@ const onIntersect = (isIntersecting) => {
   text-decoration: none !important;
   margin-bottom: 0.5rem;
 }
-.container {
-  background: #091d20;
-  color: aliceblue;
-}
 
-.activities {
-  height: 12rem;
-  background: #091d20;
-  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
+.social-networks {
+  a {
+    color: #ecfbfc;
+    font-size: 1.9rem;
+    text-decoration: none !important;
+  }
 }
 
-.footer {
+.footnotes {
   margin-top: 2rem;
   border-top: 0.4px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
-}
+  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.07);
 
-.logo {
-  margin-bottom: 3rem;
-  width: 25rem;
-}
-
-.logo-jaune {
-  margin-left: 307.74px;
-}
-
-.logo-rouge {
-  margin-left: 117px;
-}
-
-.logo-bleu {
-  margin-left: 91.74px;
-}
-
-.text-logo-jaune {
-  margin-left: 10rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-
-  color: #ecfbfc;
-
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
+  a, p {
+    text-decoration: none;
+    color: #ffffff;
+    font-size: 0.8rem;
+  }
 }
 
-.text-logo-rouge {
-  margin-left: 37.74px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-
-  color: #ecfbfc;
-
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
-}
-
-.text-logo-bleu {
-  height: 24px;
-  left: 897px;
-  top: 7858px;
-  margin-left: 25.74px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-  color: #ecfbfc;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
+@media (max-width: 960px) {
+  .logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 140px;
+  }
+
+  .logo .v-img {
+    width: 18rem;
+  }
+
+  .social-networks {
+    a {
+      font-size: 3rem;
+      margin: 0 1rem;
+    }
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: left;
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 1.5rem;
+    cursor: pointer;
+
+    >div:first-child {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      padding-bottom: 6px;
+      text-transform: uppercase;
+    }
+
+    a {
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 300;
+      font-size: 1.3rem;
+      line-height: 20px;
+      color: #ffffff;
+      text-decoration: none !important;
+      text-align: left;
+    }
+  }
+
+  .footnotes {
+    border: none;
+  }
 }
 </style>

components/Layout/Footer/Prefooter.vue

@@ -1,87 +1,70 @@
+<!--
+Première section du footer (galerie des logiciels)
+-->
+
 <template>
-  <footer ref="footerElement">
+  <footer>
     <LayoutContainer>
-      <div v-if="lgAndUp" class="activities">
-        <v-row class="custom-row">
-          <v-col cols="4" class="text-center">
-            <a href="/opentalent_artist">
-              <v-img
-                class="logo logo-jaune"
-                src="/images/logo/logiciels/Artist-noir.png"
-              />
-            </a>
-            <small class="text-logo"
-              >Orchestres, chorales, danse, théâtre, cirque</small
-            >
-          </v-col>
+      <v-row>
+
+        <v-col cols="4" class="text-center">
+          <nuxt-link href="/opentalent_artist">
+            <v-img src="/images/logo/logiciels/Artist-noir.png"/>
+          </nuxt-link>
+
+          <small class="text-logo">
+            Orchestres, chorales, danse, théâtre, cirque
+          </small>
+        </v-col>
+
+        <v-divider :vertical="true" />
+
+        <v-col cols="4" class="text-center">
+          <nuxt-link href="/opentalent_school">
+            <v-img src="/images/logo/logiciels/School-noir.png"/>
+          </nuxt-link>
 
-          <div class="vertical-bar" />
-          <v-col cols="4" class="text-center">
-            <a href="/opentalent_school">
-              <v-img
-                class="logo logo-bleu"
-                src="/images/logo/logiciels/School-noir.png"
-              />
-            </a>
-            <small class="text-logo"
-              >Tous les établissements d'enseignement artistique</small
-            >
-          </v-col>
+          <small class="text-logo">
+            Tous les établissements d'enseignement artistique
+          </small>
+        </v-col>
 
-          <div class="vertical-bar" />
+        <v-divider :vertical="true" />
 
-          <v-col cols="3" class="text-center">
-            <a href="/opentalent_manager">
-              <v-img
-                class="logo logo-rouge"
-                src="/images/logo/logiciels/Manager-noir.png"
-              />
-            </a>
-            <small class="text-logo"
-              >Fédérations, confédérations, collectivités</small
-            >
-          </v-col>
-        </v-row>
-      </div>
+        <v-col cols="3" class="text-center">
+          <nuxt-link href="/opentalent_manager">
+            <v-img src="/images/logo/logiciels/Manager-noir.png"/>
+          </nuxt-link>
+
+          <small class="text-logo">
+            Fédérations, confédérations, collectivités
+          </small>
+        </v-col>
+      </v-row>
     </LayoutContainer>
   </footer>
 </template>
 
 <script setup>
-import { useDisplay } from "vuetify";
-import { ref, provide } from "vue";
-
-const footerElement = ref(null);
-
-provide("footerElement", footerElement);
-const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
-<style scoped>
-.custom-row {
+<style scoped lang="scss">
+.container {
+  height: 172px;
   width: 90%;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
 }
-.flex-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+
+.v-img {
+  margin-top: 2rem;
+  height: 70px;
 }
 
-.vertical-bar {
+.v-divider {
   height: 4rem;
   border: 0.1rem solid rgb(205, 205, 205);
   margin-top: 3rem;
-}
-
-.activities {
-  height: 10rem;
-  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
-}
-
-.logo {
-  margin-top: 2rem;
-  height: 70px;
+  opacity: 80%;
 }
 </style>

components/Webinaire/FAQ.vue

@@ -14,7 +14,7 @@
         <div class="question" @click="toggle(index)">
           <i class="fa-solid fa-circle question-icon"></i> {{ item.question }}
         </div>
-        <div class="answer" v-if="isActive(index)" v-html="item.answer"></div>
+        <div class="section-content" v-if="isActive(index)" v-html="item.answer"></div>
       </div>
     </div>
   </LayoutContainer>
@@ -90,7 +90,7 @@ function isActive(index) {
 }
 
 .question {
-  background-color: #0E2D32; 
+  background-color: #0E2D32;
   color: #fff;
   padding: 0.75rem 1rem;
   cursor: pointer;
@@ -108,11 +108,11 @@ function isActive(index) {
   margin-right: 0.5rem;
 }
 
-.answer {
-  background-color: #C3E5E7; 
+.section-content {
+  background-color: #C3E5E7;
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;
-  border-top: none; 
+  border-top: none;
   border-radius: 0 0 4px 4px;
 }
 
@@ -132,4 +132,4 @@ function isActive(index) {
   margin-bottom: .5rem;
   text-transform: uppercase;
 }
-</style>
+</style>

pages/index.vue

@@ -9,7 +9,7 @@
     :class="mdAndDown ? 'mt-12' : ''"
   />
 
-  <HomeCaroussel v-if="!mdAndDown"/>
+  <HomeCaroussel v-if="mdAndUp"/>
 
   <HomePromotion />
 
@@ -25,7 +25,7 @@
 
   <HomeHelp />
 
-  <LayoutFooterPrefooter />
+  <LayoutFooterPrefooter v-if="lgAndUp" />
 
   <LayoutFooter />
 </template>
@@ -33,7 +33,7 @@
 <script setup>
 import { useDisplay } from "vuetify";
 
-const { mdAndDown } = useDisplay();
+const { mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>