Integration page home avec crea blandine lang only fr et nl

assets/scss/_variables.scss

@@ -1,6 +1,6 @@
 // * COLORS
 $color-white: #fff;
-$color-light: #f8f9fa;
+$color-light: #dadada;
 $color-dark: #212529;
 $color-success: #198754;
 $color-danger: #dc3545;
@@ -9,6 +9,10 @@ $color-warning: #ffc107;
 $color-primary: #0d6efd;
 $color-secondary: #6c757d;
 
+// * BODY
+$body-bg: $color-light;
+$body-bg-color: $color-light;
+
 // * FONTS
 $font-default-family-base: system-ui, -apple-system, "Segoe UI", "Roboto",
     "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif,

assets/scss/layout.scss

@@ -2,7 +2,8 @@ body {
     @include font-size(1rem);
 
     min-height: 100vh;
-    background-color: unset;
+    // * Use BS var to set BG as on home page
+    // background-color: unset;
 
     @include media-breakpoint-up(lg) {
         @include font-size(2rem);
@@ -34,6 +35,40 @@ body {
                 @include font-size(2.5rem);
             }
         }
+
+        .home-title {
+            position: relative;
+            display: inline-block;
+            font-weight: bold;
+
+            @include media-breakpoint-up(lg) {
+                @include font-size(3rem);
+            }
+
+            @include media-breakpoint-up(xxl) {
+                @include font-size(4rem);
+            }
+
+            &::before,&::after {
+                position: absolute;
+                top: 50%;
+                display: inline-block;
+                width: 100vw;
+                background-color: $color-white;
+                content: ' ';
+                transform: translateY(-50%);
+
+                @include rfs(1rem, height);
+            }
+
+            &::before {
+                left: calc(100% + 4vw);
+            }
+
+            &::after {
+                right: calc(100% + 4vw);
+            }
+        }
     }
 
 }

components/layout/AppHeader.vue

@@ -2,7 +2,7 @@
 <template>
   <nav
     id="top-navbar"
-    class="navbar navbar-expand-lg position-relative"
+    class="navbar navbar-expand-lg position-relative pt-0"
     :style="`background-color: ${activeRange && brandWithMultipleRanges ? activeRange.color : activeBrand?.color} !important`"
   >
     <div class="container-fluid">
@@ -48,11 +48,17 @@
         </div>
       </div>
       <!-- HOME (PAS DE MARQUE) -->
-      <div v-else class="container">
-        <div class="row">
-          <div class="col mx-auto text-center mb-3">
+      <div v-else class="row">
+        <div class="col-12 g-0 pb-5">
+          <img
+            src="assets/pictures/layout/top-hr.png"
+            alt="Top bar"
+            class="img-fluid d-block"
+          >
+        </div>
+        <div class="col-12 mx-auto text-center mb-3 mt-3 pb-5">
+          <div class="d-inline-block bg-white p-4 rounded">
             <img src="assets/pictures/layout/ldc-intl.png" alt="Logo LDC" class="img-fluid main-logo d-inline-block">
-            <span class="sub-title d-block mt-3 mb-5">{{ transField(settings, "sub_title") }}</span>
           </div>
         </div>
       </div>
@@ -70,20 +76,21 @@
       </button>
 
       <div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
-        <div class="btn-group text-bg-light me-4 z-1">
+        <div class="btn-group me-4 z-1">
           <button
             v-for="(localeObject,localeIndex) of locales"
             :key="localeIndex"
             :class="{
-              'btn px-2 shadow': true,
-              'btn-link': locale !== localeObject.iso,
-              'btn-warning': locale === localeObject.iso,
+              'btn px-4 mx-3 shadow fw-bold': true,
+              'btn-white bg-white': locale !== localeObject.iso,
+              'btn-secondary': locale === localeObject.iso,
             }"
             :title="localeObject.label"
             data-bs-toggle="tooltip"
             @click.prevent="switchLocale(localeObject)"
           >
-            <span :class="`fi fi-${localeObject.flag}`" />
+            <span class="text-uppercase fs-1">{{ localeObject.flag }}</span>
+            <!-- <span :class="`fi fi-${localeObject.flag}`" /> -->
           </button>
         </div>
       </div>
@@ -159,7 +166,7 @@ export default defineComponent({
     this.settings = useAppStore().data.settings();
     const { locale, availableLocales } = useI18n({ useScope: "global"});
     this.locale = locale.value;
-    const localeSortArr = ["fr", "nl", "en"];
+    const localeSortArr = ["fr", "nl"];
     this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
       return {
         iso: localeStr,
@@ -263,7 +270,7 @@ export default defineComponent({
   .lang-bar {
     position: absolute;
     right: 0;
-    bottom: -1rem;
+    top: 5rem;
   }
 }
 </style>

i18n.config.ts

@@ -1,14 +1,13 @@
-import en from "./locales/en";
+// import en from "./locales/en";
 import fr from "./locales/fr";
 import nl from "./locales/nl";
 
 export default defineI18nConfig(() => ({
     legacy: false,
     globalInjection: true,
-    locale: "en",
+    locale: "nl",
     fallbackLocale: "fr",
     messages: {
-        en,
         fr,
         nl
     }

locales/en.ts

@@ -13,5 +13,7 @@ export default {
     "more_about_this_product": "More about this product",
     "close_products_modal": "Close products description",
     "products_logo": "Logo for the product {product_name}",
-    "no_products_available": "No products available"
+    "no_products_available": "No products available",
+    "welcome_to_ldc": "welcome to LDC",
+    "discover_our_brands": "Discover our brands"
 };

locales/fr.ts

@@ -13,5 +13,7 @@ export default {
     "more_about_this_product": "En savoir plus sur ce produit",
     "close_products_modal": "Fermer la description du produit",
     "products_logo": "Logo du produit {product_name}",
-    "no_products_available": "Aucun produit disponible"
+    "no_products_available": "Aucun produit disponible",
+    "welcome_to_ldc": "Bienvenue chez LDC",
+    "discover_our_brands": "Découvrez nos différentes marques"
 };

locales/nl.ts

@@ -13,5 +13,7 @@ export default {
     "more_about_this_product": "Meer informatie over dit product",
     "close_products_modal": "Productbeschrijving sluiten",
     "products_logo": "{product_name} productlogo",
-    "no_products_available": "Geen producten beschikbaar"
+    "no_products_available": "Geen producten beschikbaar",
+    "welcome_to_ldc": "Welkom bij LDC",
+    "discover_our_brands": "Ontdek onze verschillende merken"
 };

nuxt.config.ts

@@ -74,7 +74,7 @@ export default defineNuxtConfig({
     },
 
     i18n: {
-        locales: ["en", "fr", "nl"],
+        locales: ["fr", "nl"],
         defaultLocale: "fr",
         // * Ajouter aussi la locale dans ce fichier
         vueI18n: "./i18n.config.ts"

pages/index.vue

@@ -1,53 +1,89 @@
 <template>
   <div class="page-home d-flex">
     <div class="container-fluid justify-content-center d-flex flex-column">
-      <template
-        v-if="appState.brands"
-      >
-        <div class="row">
+      <div class="row">
+        <div class="col-12 text-center overflow-hidden pb-5">
+          <div class="home-title">
+            {{ t('welcome_to_ldc') }}
+          </div>
+        </div>
+        <div class="col-12 text-center pb-5">
+          <video
+            class="object-fit-contain w-100"
+            playsinline
+            autoplay
+            muted
+            loop
+            controls
+            controlsList="nodownload noremoteplayback nofullscreen"
+          >
+            <source src="assets/videos/groupe-ldc-presentation-groupe-V7.webm" type="video/webm">
+            <!-- <source src="assets/videos/groupe-ldc-presentation-groupe-V7.mp4" type="video/mp4"> -->
+          </video>
+        </div>
+      </div>
+      <div v-if="appState.brands" class="row">
+        <div class="col-12 text-center overflow-hidden pb-5">
+          <div class="home-title">
+            {{ t('discover_our_brands') }}
+          </div>
+        </div>
+        <div
+          v-for="(brand, brandIndex) of appState.brands()"
+          :key="brandIndex"
+          :class="{
+            'col-12 col-md-6 px-5 my-3': true,
+          }"
+        >
           <div
-            v-for="(brand, brandIndex) of appState.brands()"
-            :key="brandIndex"
             :class="{
-              'col-12 col-md-6 px-5 my-5': true,
+              'd-flex align-items-center h-100 my-5': true,
+              'justify-content-start': brandIndex %2 !== 0,
+              'justify-content-end': brandIndex %2 === 0,
             }"
           >
             <div
-              :class="{
-                'd-flex align-items-center h-100 my-5': true,
-                'justify-content-start': brandIndex %2 !== 0,
-                'justify-content-end': brandIndex %2 === 0,
-              }"
+              class="d-inline-block text-center"
+              role="button"
+              :title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
+              data-bs-toggle="tooltip"
+              @click="gotoBrand(brand)"
             >
-              <div
-                class="d-inline-block text-center"
-                role="button"
-                :title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
-                data-bs-toggle="tooltip"
-                @click="gotoBrand(brand)"
-              >
+              <div class="d-inline-block brand-picture-wrapper">
                 <img
-                  class="img-fluid d-block"
+                  class="img-fluid"
                   :src="`/data/${brand.picture}`"
                   :alt="t('brands_logo', {'brand_name': transField(brand, 'name')})"
                   :title="t('brands_logo', {'brand_name': transField(brand, 'name')})"
                 >
-                <span
-                  :class="{...{'brand-title fw-bold text-capitalize fs-1 animate__animated p-3 mt-5 d-inline-block': true}, ...titleAnimations(brandIndex)}"
-                  :style="{
-                    'color': getContrastYIQ(brand.color),
-                    'background-color': brand.color
-                  }"
-                >
-                  {{ transField(brand, 'name') }}
-                </span>
               </div>
+              <!-- :class="{...{'brand-title fw-bold text-capitalize fs-1 animate__animated p-3 mt-5 d-inline-block': true}, ...titleAnimations(brandIndex)}" -->
+              <span
+                class="d-none"
+                :style="{
+                  'color': getContrastYIQ(brand.color),
+                  'background-color': brand.color
+                }"
+              >
+                {{ transField(brand, 'name') }}
+              </span>
             </div>
           </div>
         </div>
-      </template>
-      <div v-else>
-        <span class="h4">{{ t('no_brands_available') }}</span>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <span class="h4">{{ t('no_brands_available') }}</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col py-5">
+          <img
+            src="assets/pictures/layout/home-bottom-banner.png"
+            alt="Bottom Banner"
+            class="img-fluid"
+          >
+        </div>
       </div>
     </div>
   </div>
@@ -129,7 +165,25 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/scss/variables";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/vendor/rfs";
+
 .page-home, .page-home>div {
   min-height: 100%;
+
+  .brand-picture-wrapper {
+    @include rfs(5rem, border-radius);
+
+    background-color: $color-white;
+    @include rfs(3rem, padding-top);
+    @include rfs(3rem, padding-bottom);
+    @include rfs(8rem, padding-right);
+    @include rfs(8rem, padding-left);
+  }
 }
 </style>