refactor titles and banners

assets/style/main.scss

@@ -3,6 +3,8 @@
 body {
   font-family: "Barlow", serif;
   font-style: normal;
+
+  --banner-center-image: 20%;
 }
 
 .table-row {
@@ -23,3 +25,5 @@ body {
 .v-row.center-90 {
   margin: -12px auto;
 }
+
+

components/About/Banner.vue

@@ -1,28 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage class="mb-12">
-      Qui sommes-nous ?
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/banner/about_opentalent.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-:deep(.logiciel) {
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  width: 100%;
-}
-</style>

components/Common/Banner/Banner.vue → components/Common/Banner.vue

@@ -27,6 +27,10 @@
           <div v-if="logoSrc" :class="'logo-square' + (logoAltTheme ? ' alt-theme' : '')">
             <img :src="logoSrc" :alt="logoAlt"/>
           </div>
+
+          <div class="image-text mt-12">
+            <slot name="watermark" />
+          </div>
         </div>
       </v-col>
     </v-row>
@@ -69,6 +73,18 @@ const props = defineProps({
 .banner-container {
   position: relative;
   overflow: hidden;
+
+  .image-text {
+    position: absolute;
+    top: 40px;
+    left: 20px;
+    color: white;
+    font-size: 3rem;
+    width: 30rem;
+    font-style: italic;
+    font-weight: 300;
+    line-height: 40px;
+  }
 }
 
 .cover-image {
@@ -76,7 +92,7 @@ const props = defineProps({
   min-height: 400px;
   max-height: 400px;
   object-fit: cover;
-  object-position: center 20%;
+  object-position: center var(--banner-center-image);
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);

components/Formation/Banner.vue

@@ -1,52 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Formation
-      <template #subtitle>
-        Prise en main ou piqûre de rappel,on est toujours à vos côtés.
-      </template>
-    </LayoutUITitlePage>
-
-    <v-row>
-      <!-- TODO: remplacer par le component CommonBanner comme dans WebinaireBanner -->
-      <v-col cols="12" class="banner-container">
-        <v-img
-          src="/images/formation/banner.jpg"
-          alt="banner"
-          cover
-          class="cover-image"
-        />
-
-        <div class="image-text mt-12">
-          Et si vous passiez rapidement à la vitesse supérieure...
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped lang="scss">
-  .banner-container {
-    position: relative;
-    height: 35rem;
-
-    :deep(img) {
-      width: 100%;
-      height: 100%;
-      object-position: center 30%;
-      transform: scaleX(-1);
-    }
-
-    .image-text {
-      position: absolute;
-      top: 40px;
-      left: 20px;
-      color: white;
-      font-size: 3rem;
-      width: 30rem;
-      font-style: italic;
-      font-weight: 300;
-      line-height: 40px;
-    }
-  }
-</style>

components/JoinUs/Banner.vue

@@ -1,50 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Nous rejoindre
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/join/join.jpg"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
-    <h3 id="join-us-anchor" class="mt-6">
-      Opentalent, où l'innovation & la passion se rencontrent !
-    </h3>
-
-    <span class="subtitle">
-      Découvrez nos opportunités et rejoignez-nous dans cette aventure
-      passionnante.
-    </span>
-  </LayoutContainer>
-</template>
-
-<script setup>
-</script>
-
-<style scoped>
-
-h3, .subtitle {
-  line-height: 2.5rem;
-  text-align: center;
-}
-
-
-h3 {
-  font-weight: 600;
-  font-size: 1.5rem;
-}
-
-.subtitle {
-  display: block;
-  font-weight: 300;
-  font-size: 1.5rem;
-  width: 100%;
-}
-
-</style>

components/JoinUs/MissionDetail.vue

@@ -1,14 +1,5 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/actu/pub.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
     <div class="job-section">
       <v-row class="mb-6">
         <v-col class="d-flex align-items-center">

components/Logiciels/Artist/Banner.vue

@@ -1,14 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          image-src="/images/logiciels/artist/banner.jpg"
-          image-alt="banner artist"
-          square-text="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
-          logo-src="/images/logo/logiciels/Artist-noir.png"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>

components/Logiciels/Manager/Banner.vue

@@ -1,31 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <CommonBannerTitle
-        :leftText="'School'"
-        :title="'Opentalent Manager'"
-        :rightText="'Artist'"
-      />
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          :imageSrc="'/images/logiciels/manager/banner-manager.png'"
-          imageAlt="'line'"
-          :squareText="'Fédérations, confédérations et collectivités'"
-          :logoSrc="'/images/logo/logiciels/Manager-noir.png'"
-          :squareColor="'#d8050b'"
-          :blueSquareColor="'#FFF'"
-          :textColor="'#FFF'"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped>
-:deep(.cover-image) {
-  object-position: center 40% !important;
-}
-</style>

components/Logiciels/School/Banner.vue

@@ -1,36 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <CommonBannerTitle
-        title="Opentalent School"
-        left-text="Artist"
-        right-text="Manager"
-      />
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          image-src="/images/solutions/school.jpg"
-          image-alt="line"
-          square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
-          logo-src="/images/logo/logiciels/School-Blanc.png"
-          :logo-alt-theme="true"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped lang="scss">
-.v-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-:deep(.cover-image) {
-  object-position: center 40% !important;
-}
-</style>
-<script setup lang="ts">
-</script>

components/Common/Banner/BannerTitle.vue → components/Logiciels/Title.vue

@@ -4,43 +4,24 @@
     <div class="container-title">
       <v-col cols="3" class="lateral-text">
         <span>
-          {{ leftText }}
+          <slot name="left-text"/>
         </span>
       </v-col>
       <v-col cols="6">
         <h1>
-          {{ title }}
+          <slot />
         </h1>
       </v-col>
       <v-col cols="3" class="lateral-text">
         <span>
-          {{ rightText }}
+          <slot name="right-text" />
         </span>
       </v-col>
     </div>
   </LayoutContainer>
 </template>
 
-<script setup lang="ts">
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-  leftText: {
-    type: String,
-    required: false,
-    default: ""
-  },
-  rightText: {
-    type: String,
-    required: false,
-    default: ""
-  },
-});
-</script>
-
-<style scoped>
+<style scoped lang="scss">
 .container-title {
   display: flex;
   justify-content: space-around;

components/Webinaire/Banner.vue

@@ -1,18 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Webinaires
-      <template #subtitle>Partez à la découverte de vos logiciels Opentalent.</template>
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="images/banner/Visuel_page_Webinaires.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
-  </LayoutContainer>
-</template>

pages/formations.vue

@@ -1,7 +1,21 @@
 <template>
   <LayoutNavigation />
 
-  <FormationBanner />
+  <LayoutUITitlePage>
+    Formation
+    <template #subtitle>
+      Prise en main ou piqûre de rappel,on est toujours à vos côtés.
+    </template>
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="images/formation/banner.jpg"
+    imageAlt="banner"
+  >
+    <template #watermark>
+      Et si vous passiez rapidement à la vitesse supérieure...
+    </template>
+  </CommonBanner>
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/index.vue

@@ -3,11 +3,10 @@
 
   <CommonStickyMenu />
 
-  <LayoutUITitlePage
-    title="LOGICIELS CULTURELS"
-    subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
-    :class="mdAndDown ? 'mt-12' : ''"
-  />
+  <LayoutUITitlePage :class="mdAndDown ? 'mt-12' : ''">
+    LOGICIELS CULTURELS
+    <template #subtitle>UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</template>
+  </LayoutUITitlePage>
 
   <HomeCaroussel v-if="mdAndUp"/>
 

pages/nous-rejoindre/[id].vue

@@ -1,6 +1,11 @@
 <template>
   <LayoutNavigation />
 
+  <CommonBanner
+    imageSrc="/images/actu/pub.png"
+    imageAlt="banner"
+  />
+
   <JoinUsMissionDetail />
 
   <LayoutFooterPrefooter />

pages/nous-rejoindre/index.vue

@@ -1,7 +1,23 @@
 <template>
   <LayoutNavigation />
 
-  <JoinUsBanner />
+  <LayoutUITitlePage>
+    Nous rejoindre
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="/images/join/join.jpg"
+    imageAlt="banner"
+  />
+
+  <h3 id="join-us-anchor" class="mt-6">
+    Opentalent, où l'innovation & la passion se rencontrent !
+  </h3>
+
+  <span class="subtitle">
+    Découvrez nos opportunités et rejoignez-nous dans cette aventure
+    passionnante.
+  </span>
 
   <JoinUsMissions />
 
@@ -9,3 +25,22 @@
 
   <LayoutFooter />
 </template>
+
+<style scoped lang="scss">
+h3, .subtitle {
+  line-height: 2.5rem;
+  text-align: center;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.subtitle {
+  display: block;
+  font-weight: 300;
+  font-size: 1.5rem;
+  width: 100%;
+}
+</style>

pages/opentalent_artist.vue

@@ -4,14 +4,19 @@
 
     <CommonStickyMenu :actions="stickyMenuActions" />
 
-    <CommonBannerTitle
-      title="Opentalent Artist"
-      leftText="School"
-      rightText="Manager"
+    <LogicielsTitle>
+      <template #left-text>School</template>
+      Opentalent Artist
+      <template #right-text>Manager</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      image-src="/images/logiciels/artist/banner.jpg"
+      image-alt="banner artist"
+      square-text="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
+      logo-src="/images/logo/logiciels/Artist-noir.png"
     />
 
-    <LogicielsArtistBanner />
-
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
     <LogicielsArtistPresentation />
@@ -73,7 +78,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 ];
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .theme-artist {
   --primary-color: #ffffff;
   --secondary-color: #fef3ce;

pages/opentalent_manager.vue

@@ -2,7 +2,26 @@
   <div class="theme-manager">
     <LayoutNavigation />
 
-    <LogicielsManagerBanner />
+    <CommonBannerTitle
+      leftText="School"
+      title="Opentalent Manager"
+      rightText="Artist"
+    />
+    <LogicielsTitle>
+      <template #left-text>School</template>
+      Opentalent Manager
+      <template #right-text>Artist</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      imageSrc="/images/logiciels/manager/banner-manager.png"
+      imageAlt="line"
+      squareText="Fédérations, confédérations et collectivités"
+      logoSrc="/images/logo/logiciels/Manager-noir.png"
+      squareColor="#d8050b"
+      blueSquareColor="#FFF"
+      textColor="#FFF"
+    /> <!-- TODO: theming -->
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/opentalent_school.vue

@@ -2,7 +2,19 @@
   <div class="theme-school">
     <LayoutNavigation />
 
-    <LogicielsSchoolBanner />
+    <LogicielsTitle>
+      <template #left-text>Artist</template>
+      Opentalent School
+      <template #right-text>Manager</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      image-src="/images/solutions/school.jpg"
+      image-alt="line"
+      square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
+      logo-src="/images/logo/logiciels/School-Blanc.png"
+      :logo-alt-theme="true"
+    />
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
@@ -88,5 +100,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --on-primary-color: #0e2d32;
   --primary-color-alt: #262626;
   --on-primary-color-alt: #c3e5e7;
+
+  --banner-center-image: 40%;
 }
 </style>

pages/qui-sommes-nous.vue

@@ -5,7 +5,14 @@
 <template>
   <LayoutNavigation />
 
-  <AboutBanner />
+  <LayoutUITitlePage class="mb-12">
+    Qui sommes-nous ?
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="/images/banner/about_opentalent.png"
+    imageAlt="banner"
+  />
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/webinaires.vue

@@ -1,12 +1,17 @@
-<!--
-  Page FAQ
--->
 <template>
   <LayoutNavigation />
 
   <CommonStickyMenu />
 
-  <WebinaireBanner />
+  <LayoutUITitlePage>
+    Webinaires
+    <template #subtitle>Partez à la découverte de vos logiciels Opentalent.</template>
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="images/banner/Visuel_page_Webinaires.png"
+    imageAlt="banner"
+  />
 
   <WebinaireCatalogue />