feat: ✨ update project for sial 2024

2025-06-26 10:48:40 +02:00 · 2025-06-26 10:48:40 +02:00 · 4e7696d23c
commit 4e7696d23c
parent abb1600c94
25 changed files with 796 additions and 151 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,4 +1,5 @@
 {
+    "peacock.remoteColor": "#1fee8e",
    "workbench.colorCustomizations": {
        "activityBar.activeBackground": "#4ef2a6",
        "activityBar.background": "#4ef2a6",
@ -17,6 +18,5 @@
        "titleBar.activeForeground": "#15202b",
        "titleBar.inactiveBackground": "#1fee8e99",
        "titleBar.inactiveForeground": "#15202b99"
-    },
-    "peacock.remoteColor": "#1fee8e"
+    }
 }
--- a/app.vue
+++ b/app.vue
@ -11,7 +11,7 @@
  >
    <template v-if="!loading">
      <AppHeader :active-brand="activeBrand" :active-range="activeRange" />
-      <div class="container-fluid overflow-y-scroll p-0">
+      <div class="container-fluid overflow-auto p-0">
        <NuxtPage :page-key="(route: RouteLocation) => route.fullPath" />
      </div>
      <NavigationMenu v-if="showNavigation" />
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -11,8 +11,8 @@ $color-secondary: #6c757d;

 // * FONTS
 $font-default-family-base: system-ui, -apple-system, "Segoe UI", "Roboto",
-    "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // - The default site font family.
+  "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // - The default site font family.
 // Display tres haute résolution, augmentation de font size 1rem => 1.8rem
 $font-default-size-base: 1.4rem; // Assumes the browser default, typically `16px`
 $line-default-height-base: 1.5;
@ -27,4 +27,4 @@ $container-max-widths: (
  lg: 960px,
  xl: 1140px,
  xxl: 1520px
-);
+);
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@ -1,7 +1,7 @@
 body {
    @include font-size(1rem);

-    min-height: 100vh;
+    max-height: 100vh;
    // * Use BS var to set BG as on home page
    // background-color: unset;

@ -49,7 +49,8 @@ body {
                @include font-size(4rem);
            }

-            &::before,&::after {
+            &::before,
+            &::after {
                position: absolute;
                top: 50%;
                display: inline-block;
--- a/components/NavigationMenu.vue
+++ b/components/NavigationMenu.vue
@ -1,9 +1,9 @@
 <template>
-  <div class="container">
+  <div class="container border-top border-3 border-secondary">
    <div class="row py-4">
      <div class="col arrow pe-3 d-flex align-items-center justify-content-end">
        <button
-          class="rounded-pill btn btn-primary px-4 py-1"
+          class="rounded-pill btn btn-secondary px-4 py-1"
          :disabled="previousRange === null"
          :title="previousRange ? t('view_range_products', {'range_name': transField(previousRange, 'name')}) : ''"
          data-bs-toggle="tooltip"
@ -14,7 +14,7 @@
      </div>
      <div class="col home text-center px-3">
        <button
-          class="rounded-pill btn btn-primary px-4 py-1"
+          class="rounded-pill btn btn-secondary px-4 py-1"
          :title="activeBrand ? t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')}) : ''"
          data-bs-toggle="tooltip"
          @click="gotoBrand(activeBrand)"
@ -24,7 +24,7 @@
      </div>
      <div class="col arrow ps-3 d-flex align-items-center justify-content-start">
        <button
-          class="rounded-pill btn btn-primary px-4 py-1"
+          class="rounded-pill btn btn-secondary px-4 py-1"
          :disabled="nextRange === null"
          :title="nextRange ? t('view_range_products', {'range_name': transField(nextRange, 'name')}) : ''"
          data-bs-toggle="tooltip"
--- a/components/ProductDescriptionModal.vue
+++ b/components/ProductDescriptionModal.vue
@ -1,6 +1,6 @@
 <template>
  <div id="product-modal" ref="modal" class="modal fade" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xxl modal-fullscreen-md-down">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
      <div class="modal-content bg-white">
        <div class="modal-header position-relative">
          <h5
--- a/components/layout/AppFooter.vue
+++ b/components/layout/AppFooter.vue
@ -1,11 +1,15 @@
 <template>
  <footer
+    v-if="brands.length > 1 || versions.isDebug"
    id="footer"
    ref="footer"
    class="container-fluid flex-grow-0"
    :style="`background-color: ${activeRange && brandWithMultipleRanges ? activeRange.color : activeBrand?.color} !important`"
  >
-    <div class="row">
+    <div
+      v-if="brands.length > 1"
+      class="row"
+    >
      <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
        <span
          class="fw-bold d-block px-5"
@ -35,10 +39,10 @@
            },
          }"
        >
-          <SwiperSlide v-for="(brand,brandIndex) of brands" :key="brandIndex">
+          <SwiperSlide v-for="(brand, brandIndex) of brands" :key="brandIndex">
            <NuxtLinkLocale
              class="swiper-slide"
-              :to="`/brands/${brand.slug}`"
+              :to="`/brands/${transField(brand, 'slug')}`"
              data-bs-toggle="tooltip"
              :title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
              @click.prevent="gotoBrand(brand)"
--- a/components/layout/AppHeader-ldcgroup.vue
+++ b/components/layout/AppHeader-ldcgroup.vue
@ -0,0 +1,284 @@
+
+<template>
+  <nav
+    id="top-navbar"
+    class="navbar navbar-expand-lg position-relative p-0"
+    :style="`background-color: ${activeRange && brandWithMultipleRanges ? activeRange.color : activeBrand?.color} !important`"
+  >
+    <div class="container-fluid">
+      <!-- UNE MARQUE EST SELECTIONNEE -->
+      <div
+        v-if="activeBrand"
+        :class="{
+          'd-flex flex-row flex-grow-1 justify-content-center align-items-center': true,
+          'mx-auto': !activeRange,
+        }"
+      >
+        <NuxtLinkLocale
+          :to="`/brands/${transField(activeBrand, 'slug')}`"
+          :class="{
+            'd-inline-block py-3 px-2 text-center': true,
+            'flex-grow-1': !activeRange
+          }"
+          data-bs-toggle="tooltip"
+          :title="t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')})"
+        >
+          <img
+            class="img-fluid main-logo"
+            :src="`/data/${activeBrand.picture}`"
+            :alt="`Marque ${transField(activeBrand, 'name')}`"
+            :title="t('brands_logo', {'brand_name': transField(activeBrand, 'name')})"
+            data-bs-toggle="tooltip"
+          >
+        </NuxtLinkLocale>
+        <div v-if="activeRange && brandWithMultipleRanges" class="flex-grow-1 text-center">
+          <span
+            :class="{...{
+              'title': true,
+              'ps-md-5 d-inline-block px-5 py-3 rounded text-capitalize': true,
+              'text-dark': getContrastYIQ(activeRange.color) === '#000000',
+              'text-light': getContrastYIQ(activeRange.color) === '#FFFFFF',
+            }, ...rangeFont(activeRange.font_id)}"
+            :style="{
+              'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(activeRange.color), 0.8)}`
+            }"
+          >
+            {{ transField(activeRange, 'name') }}
+          </span>
+        </div>
+      </div>
+      <!-- HOME (PAS DE MARQUE) -->
+      <div v-else class="row text-bg-light">
+        <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="`/data/${settings.logo}`" alt="Logo" class="img-fluid main-logo d-inline-block">
+          </div>
+        </div>
+      </div>
+
+      <button
+        class="navbar-toggler"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbar-menu"
+        type="button"
+        aria-controls="navbar-menu"
+        aria-expanded="false"
+        :aria-label="t('show_hide_languages')"
+      >
+        <span class="navbar-toggler-icon" />
+      </button>
+
+      <div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
+        <div class="btn-group z-1">
+          <button
+            v-for="(localeObject,localeIndex) of locales"
+            :key="localeIndex"
+            :class="{
+              'btn ms-3 px-4 mx-0 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="text-uppercase fs-5">{{ localeObject.flag }}</span>
+            <!-- <span :class="`fi fi-${localeObject.flag}`" /> -->
+          </button>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import log from "electron-log";
+import { defineComponent } from "vue";
+import type { RouteLocationNormalizedLoaded } from "vue-router";
+import ToolboxHelper from "~/classes/ToolboxHelper";
+import { useAppStore } from "~/stores/useAppStore";
+import { Tooltips } from "~/vueModules/bsTooltips";
+
+type LocaleParams = {
+  iso: string,
+  flag: string,
+  label: string,
+};
+
+export default defineComponent({
+  name: "AppHeader",
+  props: {
+    activeBrand: {
+      type: Object as PropType<TypeBrand|null>,
+      required: false,
+      default: null
+    },
+    activeRange: {
+      type: Object as PropType<TypeRange|null>,
+      required: false,
+      default: null
+    },
+  },
+  data(): {
+    versions: typeof window.versions;
+    settings: TypeSettings;
+    locales: Array<LocaleParams>,
+    locale: string;
+    route: RouteLocationNormalizedLoaded;
+    tooltips: Tooltips|null;
+  } {
+    return {
+      versions: window.versions,
+      settings: {} as TypeSettings,
+      locales: [],
+      locale: "",
+      route: useRoute(),
+      tooltips: null
+    };
+  },
+  computed: {
+    brandWithMultipleRanges(): boolean {
+      if(!this.activeBrand) {
+        return false;
+      }
+      return this.activeBrand.ranges.length > 1;
+    }
+  },
+  watch: {
+    $route(to: RouteLocationNormalizedLoaded) {
+      log.debug(`Swithing to route ${String(to.name)}`);
+      if(to.name?.toString().startsWith("index")) {
+        // * Reset active Brand on main page
+        useAppStore().setActiveBrand(null);
+      }
+      const { locale } = useAppStore().getI18n();
+      this.locale = locale;
+    },
+  },
+  beforeMount() {
+    this.settings = useAppStore().data.settings();
+    const { locale, availableLocales } = useI18n({ useScope: "global"});
+    this.locale = locale.value;
+    const localeSortArr = ["fr", "nl"];
+    this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
+      return {
+        iso: localeStr,
+        flag: this.t("_flag", {}, localeStr),
+        label: this.t("_lang", {}, localeStr),
+      };
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: "#top-navbar"});});
+  },
+  beforeUnmount() {
+    this.tooltips?.closeBootstrapTooltip();
+  },
+  methods: {
+    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
+      return ToolboxHelper.trans(text, params, localeToUse);
+    },
+    transField(model: Typei18nModel, field: Typei18nFieldList) {
+      return ToolboxHelper.getTranslatableField(model, field);
+    },
+    switchLocale(localeToSwitch:LocaleParams) {
+      const switchLocalePath = useSwitchLocalePath();
+      // Toast.toast(localeToSwitch.label, ToastTypeEnum.default);
+      useAppStore().switchLocale(localeToSwitch.iso);
+      navigateTo(switchLocalePath(localeToSwitch.iso));
+    },
+    rangeFont(fontId: number) {
+      const font = useAppStore().getFont(fontId);
+      const out: Map<string, boolean> = new Map<string, boolean>();
+      if(font) {
+        out.set(`f-${font.font_name}`, true);
+      }
+      return Object.fromEntries(out.entries());
+    },
+    getContrastYIQ(hexcolor: string): string {
+      return ToolboxHelper.getContrastYIQ(hexcolor);
+    },
+    toRGBA(hexcolor: string, alpha: number = 1): string {
+      return ToolboxHelper.toRGBA(hexcolor, alpha);
+    },
+  }
+});
+</script>
+
+<style lang="postcss">
+@import "flag-icons/sass/flag-icons.scss";
+</style>
+
+<style lang="scss" scoped>
+@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";
+#top-navbar {
+  .title {
+    @include rfs(2rem, font-size);
+
+    @include media-breakpoint-up(md) {
+      @include rfs(3rem, font-size);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(5rem, font-size);
+    }
+  }
+
+  .sub-title {
+    @include rfs(1.2rem, font-size);
+
+    @include media-breakpoint-up(md) {
+      @include rfs(1.8rem, font-size);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(3.2rem, font-size);
+    }
+  }
+
+  .main-logo {
+    @include rfs(7rem, max-height);
+    height: 20vh;
+    @include media-breakpoint-up(md) {
+      @include rfs(15rem, max-height);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(30rem, max-height);
+    }
+  }
+  .fi {
+    @include media-breakpoint-up(md) {
+      @include rfs(2em, line-height);
+      @include rfs(4em, width);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(3em, line-height);
+      @include rfs(5em, width);
+    }
+  }
+  .lang-bar {
+    position: absolute;
+    right: 1rem;
+    top: 0;
+  }
+  .lang-bar .btn-group {
+    border-radius: 0;
+  }
+  .lang-bar .btn-group button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+}
+</style>
--- a/components/layout/AppHeader.vue
+++ b/components/layout/AppHeader.vue
@ -47,21 +47,6 @@
          </span>
        </div>
      </div>
-      <!-- HOME (PAS DE MARQUE) -->
-      <div v-else class="row text-bg-light">
-        <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="`/data/${settings.logo}`" alt="Logo" class="img-fluid main-logo d-inline-block">
-          </div>
-        </div>
-      </div>

      <button
        class="navbar-toggler"
@ -75,21 +60,23 @@
        <span class="navbar-toggler-icon" />
      </button>

-      <div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
-        <div class="btn-group me-4 z-1">
+      <div v-if="activeBrand" id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
+        <div class="btn-group z-1">
          <button
-            v-for="(localeObject,localeIndex) of locales"
+            v-for="(localeObject, localeIndex) of locales"
            :key="localeIndex"
            :class="{
-              'btn px-4 mx-3 shadow fw-bold': true,
-              'btn-white bg-white': locale !== localeObject.iso,
-              'btn-secondary': locale === localeObject.iso,
+              'btn ms-3 px-2 mx-0 shadow fw-bold': true,
+              'btn-secondary': locale !== localeObject.iso,
+              'btn-white bg-white': locale === localeObject.iso,
+              'd-none': localeObject.show !== true,
            }"
            :title="localeObject.label"
            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
            @click.prevent="switchLocale(localeObject)"
          >
-            <span class="text-uppercase fs-1">{{ localeObject.flag }}</span>
+            <span class="text-uppercase fs-5">{{ localeObject.flag }}</span>
            <!-- <span :class="`fi fi-${localeObject.flag}`" /> -->
          </button>
        </div>
@ -110,6 +97,7 @@ type LocaleParams = {
  iso: string,
  flag: string,
  label: string,
+  show: boolean,
 };

 export default defineComponent({
@ -166,12 +154,13 @@ export default defineComponent({
    this.settings = useAppStore().data.settings();
    const { locale, availableLocales } = useI18n({ useScope: "global"});
    this.locale = locale.value;
-    const localeSortArr = ["fr", "nl"];
+    const localeSortArr = ["fr", "en", "de", "es", "nl"];
    this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
      return {
        iso: localeStr,
        flag: this.t("_flag", {}, localeStr),
        label: this.t("_lang", {}, localeStr),
+        show: this.t("_show", {}, localeStr) === "true",
      };
    });
  },
@ -189,10 +178,11 @@ export default defineComponent({
      return ToolboxHelper.getTranslatableField(model, field);
    },
    switchLocale(localeToSwitch:LocaleParams) {
-      const switchLocalePath = useSwitchLocalePath();
+      // const switchLocalePath = useSwitchLocalePath();
      // Toast.toast(localeToSwitch.label, ToastTypeEnum.default);
      useAppStore().switchLocale(localeToSwitch.iso);
-      navigateTo(switchLocalePath(localeToSwitch.iso));
+      this.locale = localeToSwitch.iso;
+      // navigateTo(switchLocalePath(localeToSwitch.iso));
    },
    rangeFont(fontId: number) {
      const font = useAppStore().getFont(fontId);
@ -266,11 +256,19 @@ export default defineComponent({
      @include rfs(5em, width);
    }
  }
-
  .lang-bar {
    position: absolute;
-    right: 0;
-    top: 5rem;
+    right: 1rem;
+    top: 0;
+  }
+  .lang-bar .btn-group {
+    border-radius: 0;
+  }
+  .lang-bar .btn-group button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
  }
 }
 </style>
--- a/electron-builder.json5
+++ b/electron-builder.json5
@ -3,7 +3,7 @@
 */
 {
    appId: "com.ldc.app-kiosk",
-    productName: "App Kiosk",
+    productName: "App UWIL Expo",
    asar: false,
    directories: {
        output: "release/${version}",
@ -12,7 +12,7 @@
    mac: {
        artifactName: "${productName}_${version}.${ext}",
        target: ["dmg"],
-        icon: "ldc-intl.png",
+        icon: "uwil-expo-icon.png",
    },
    win: {
        target: [
@ -22,8 +22,8 @@
            },
        ],
        artifactName: "${productName}_${version}.${ext}",
-        icon: "ldc-intl.png",
-        publisherName: "LDC Service Web",
+        icon: "uwil-expo-icon.png",
+        publisherName: "LDC DIGITAL Groupe",
    },
    linux: {
        category: "Utility",
--- a/electron/renderer.ts
+++ b/electron/renderer.ts
@ -1,4 +0,0 @@
-
-
-// console.log("versions.chrome()");
-// console.log(app.chrome());
--- a/i18n.config.ts
+++ b/i18n.config.ts
@ -1,14 +1,19 @@
-// import en from "./locales/en";
+import de from "./locales/de";
+import en from "./locales/en";
+import es from "./locales/es";
 import fr from "./locales/fr";
 import nl from "./locales/nl";

 export default defineI18nConfig(() => ({
    legacy: false,
    globalInjection: true,
-    locale: "nl",
+    locale: "fr",
    fallbackLocale: "fr",
    messages: {
        fr,
-        nl
+        de,
+        en,
+        nl,
+        es
    }
 }));
--- a/ldc-intl.png
+++ b/ldc-intl.png
--- a/locales/de.ts
+++ b/locales/de.ts
@ -0,0 +1,20 @@
+export default {
+    "_flag": "de",
+    "_lang": "Deutsch",
+    "_show": "true",
+    "error_occured": "An error has occured",
+    "loading": "Loading",
+    "show_hide_languages": "Show / Hide languages",
+    "view_brand_ranges": "View ranges of the brand {brand_name}",
+    "brands_logo": "Logo for the brand {brand_name}",
+    "no_brands_available": "No brands available",
+    "view_range_products": "View products of the range {range_name}",
+    "ranges_logo": "Logo for the range {range_name}",
+    "no_ranges_available": "No ranges available",
+    "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",
+    "welcome_to_ldc": "welcome to LDC",
+    "discover_our_brands": "Discover our brands"
+};
--- a/locales/en.ts
+++ b/locales/en.ts
@ -1,6 +1,7 @@
 export default {
-    "_flag": "gb",
+    "_flag": "en",
    "_lang": "English",
+    "_show": "true",
    "error_occured": "An error has occured",
    "loading": "Loading",
    "show_hide_languages": "Show / Hide languages",
--- a/locales/es.ts
+++ b/locales/es.ts
@ -0,0 +1,20 @@
+export default {
+    "_flag": "es",
+    "_lang": "Español",
+    "_show": "true",
+    "error_occured": "Se ha producido un error",
+    "loading": "Loading",
+    "show_hide_languages": "Mostrar / Ocultar idiomas",
+    "view_brand_ranges": "Ver las gamas de la marca {brand_name}",
+    "brands_logo": "Logotipo de la marca {brand_name}",
+    "no_brands_available": "No hay marcas disponibles",
+    "view_range_products": "Ver los productos de la gama {range_name}",
+    "ranges_logo": "Logotipo de la gama {range_name}",
+    "no_ranges_available": "No hay gamas disponibles",
+    "more_about_this_product": "Más información sobre este producto",
+    "close_products_modal": "Cerrar descripción de productos",
+    "products_logo": "Logotipo del producto {product_name}",
+    "no_products_available": "No hay productos disponibles",
+    "welcome_to_ldc": "bienvenido a LDC",
+    "discover_our_brands": "Descubra nuestras marcas"
+};
--- a/locales/fr.ts
+++ b/locales/fr.ts
@ -1,6 +1,7 @@
 export default {
    "_flag": "fr",
    "_lang": "Francais",
+    "_show": "true",
    "error_occured": "Une erreur est survenue",
    "loading": "Chargement",
    "show_hide_languages": "Afficher / Masquer les langues",
--- a/locales/nl.ts
+++ b/locales/nl.ts
@ -1,6 +1,7 @@
 export default {
    "_flag": "nl",
    "_lang": "Nederlands",
+    "_show": "true",
    "error_occured": "Er is een fout opgetreden",
    "loading": "Bezig met laden",
    "show_hide_languages": "Talen tonen/verbergen",
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -1,7 +1,6 @@
 import { resolve } from "path";
 import UnzipData from "./electron/UnzipData";

-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
    hooks: {
@ -45,7 +44,7 @@ export default defineNuxtConfig({
        pageTransition: { name: "page", mode: "out-in" },
        // Global page headers: https://go.nuxtjs.dev/config-head
        head: {
-            title: "showroom",
+            title: "UWIL Expo by LDC",
            meta: [
                { charset: "utf-8" },
                { name: "viewport", content: "width=device-width, initial-scale=1" },
@ -58,7 +57,6 @@ export default defineNuxtConfig({
            }
        },
    },
-
    plugins: [
        { src: "~/plugins/toolboxhelper.ts", mode: "client" },
        { src: "~/plugins/boostrap.ts", mode: "client" },
@ -66,15 +64,13 @@ export default defineNuxtConfig({
        { src: "~/plugins/localStorage.ts", mode: "client" },
        { src: "~/plugins/emitter.ts", mode: "client" },
    ],
-
    alias: {
        // images: resolve(__dirname, "./static/assets/images"),
        data: resolve(__dirname, "./static/data"),
        pinia: "/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs"
    },
-
    i18n: {
-        locales: ["fr", "nl"],
+        locales: ["fr", "en", "de", "es", "nl"],
        defaultLocale: "fr",
        // * Ajouter aussi la locale dans ce fichier
        vueI18n: "./i18n.config.ts"
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
-    "name": "app-kiosk",
-    "version": "1.1.0",
+    "name": "uwil-expo",
+    "version": "2.3.3",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
-            "name": "app-kiosk",
-            "version": "1.1.0",
+            "name": "uwil-expo",
+            "version": "2.3.3",
            "hasInstallScript": true,
            "devDependencies": {
                "@fortawesome/fontawesome-svg-core": "^6.5.1",
@ -63,7 +63,8 @@
                "vite-plugin-electron": "^0.15.5",
                "vite-plugin-electron-renderer": "^0.14.5",
                "vue": "^3.3.4",
-                "vue-router": "^4.2.5"
+                "vue-router": "^4.2.5",
+                "vue-tsc": "^2.2.10"
            }
        },
        "node_modules/@aashutoshrathi/word-wrap": {
@ -480,19 +481,21 @@
            }
        },
        "node_modules/@babel/helper-string-parser": {
-            "version": "7.23.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-            "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+            "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
            "dev": true,
+            "license": "MIT",
            "engines": {
                "node": ">=6.9.0"
            }
        },
        "node_modules/@babel/helper-validator-identifier": {
-            "version": "7.22.20",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-            "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+            "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
            "dev": true,
+            "license": "MIT",
            "engines": {
                "node": ">=6.9.0"
            }
@ -606,10 +609,14 @@
            }
        },
        "node_modules/@babel/parser": {
-            "version": "7.23.9",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-            "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+            "version": "7.27.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
+            "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.27.3"
+            },
            "bin": {
                "parser": "bin/babel-parser.js"
            },
@ -913,14 +920,14 @@
            }
        },
        "node_modules/@babel/types": {
-            "version": "7.23.9",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-            "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+            "version": "7.27.6",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
+            "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
            "dev": true,
+            "license": "MIT",
            "dependencies": {
-                "@babel/helper-string-parser": "^7.23.4",
-                "@babel/helper-validator-identifier": "^7.22.20",
-                "to-fast-properties": "^2.0.0"
+                "@babel/helper-string-parser": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.27.1"
            },
            "engines": {
                "node": ">=6.9.0"
@ -5725,6 +5732,35 @@
                "vue": "^3.0.0"
            }
        },
+        "node_modules/@volar/language-core": {
+            "version": "2.4.15",
+            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
+            "integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@volar/source-map": "2.4.15"
+            }
+        },
+        "node_modules/@volar/source-map": {
+            "version": "2.4.15",
+            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
+            "integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@volar/typescript": {
+            "version": "2.4.15",
+            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.15.tgz",
+            "integrity": "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@volar/language-core": "2.4.15",
+                "path-browserify": "^1.0.1",
+                "vscode-uri": "^3.0.8"
+            }
+        },
        "node_modules/@vue-macros/common": {
            "version": "1.10.1",
            "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.1.tgz",
@ -5873,6 +5909,17 @@
                "@vue/shared": "3.4.15"
            }
        },
+        "node_modules/@vue/compiler-vue2": {
+            "version": "2.7.16",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+            "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "de-indent": "^1.0.2",
+                "he": "^1.2.0"
+            }
+        },
        "node_modules/@vue/devtools-api": {
            "version": "6.5.1",
            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
@ -5903,6 +5950,70 @@
                }
            }
        },
+        "node_modules/@vue/language-core": {
+            "version": "2.2.10",
+            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.10.tgz",
+            "integrity": "sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@volar/language-core": "~2.4.11",
+                "@vue/compiler-dom": "^3.5.0",
+                "@vue/compiler-vue2": "^2.7.16",
+                "@vue/shared": "^3.5.0",
+                "alien-signals": "^1.0.3",
+                "minimatch": "^9.0.3",
+                "muggle-string": "^0.4.1",
+                "path-browserify": "^1.0.1"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
+            "version": "3.5.17",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.17.tgz",
+            "integrity": "sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.27.5",
+                "@vue/shared": "3.5.17",
+                "entities": "^4.5.0",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.2.1"
+            }
+        },
+        "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
+            "version": "3.5.17",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.17.tgz",
+            "integrity": "sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/compiler-core": "3.5.17",
+                "@vue/shared": "3.5.17"
+            }
+        },
+        "node_modules/@vue/language-core/node_modules/@vue/shared": {
+            "version": "3.5.17",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.17.tgz",
+            "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@vue/language-core/node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/@vue/reactivity": {
            "version": "3.4.15",
            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
@ -6061,6 +6172,13 @@
                }
            }
        },
+        "node_modules/alien-signals": {
+            "version": "1.0.13",
+            "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
+            "integrity": "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/animate.css": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
@ -7252,9 +7370,9 @@
            }
        },
        "node_modules/caniuse-lite": {
-            "version": "1.0.30001583",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
-            "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
+            "version": "1.0.30001726",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz",
+            "integrity": "sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==",
            "dev": true,
            "funding": [
                {
@ -7269,7 +7387,8 @@
                    "type": "github",
                    "url": "https://github.com/sponsors/ai"
                }
-            ]
+            ],
+            "license": "CC-BY-4.0"
        },
        "node_modules/chalk": {
            "version": "4.1.2",
@ -8042,6 +8161,13 @@
            "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
            "dev": true
        },
+        "node_modules/de-indent": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+            "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/debug": {
            "version": "4.3.4",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -10770,6 +10896,16 @@
                "node": ">= 0.4"
            }
        },
+        "node_modules/he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "he": "bin/he"
+            }
+        },
        "node_modules/hookable": {
            "version": "5.5.3",
            "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@ -13469,6 +13605,13 @@
            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
            "dev": true
        },
+        "node_modules/muggle-string": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+            "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/mz": {
            "version": "2.7.0",
            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@ -15320,6 +15463,13 @@
                "node": ">= 0.8"
            }
        },
+        "node_modules/path-browserify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+            "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/path-exists": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@ -17591,10 +17741,11 @@
            }
        },
        "node_modules/source-map-js": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
            "dev": true,
+            "license": "BSD-3-Clause",
            "engines": {
                "node": ">=0.10.0"
            }
@ -18870,15 +19021,6 @@
            "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
            "dev": true
        },
-        "node_modules/to-fast-properties": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-            "dev": true,
-            "engines": {
-                "node": ">=4"
-            }
-        },
        "node_modules/to-regex-range": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -20974,6 +21116,23 @@
                "vue": "^3.2.0"
            }
        },
+        "node_modules/vue-tsc": {
+            "version": "2.2.10",
+            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.10.tgz",
+            "integrity": "sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@volar/typescript": "~2.4.11",
+                "@vue/language-core": "2.2.10"
+            },
+            "bin": {
+                "vue-tsc": "bin/vue-tsc.js"
+            },
+            "peerDependencies": {
+                "typescript": ">=5.0.0"
+            }
+        },
        "node_modules/walker": {
            "version": "1.0.8",
            "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
--- a/package.json
+++ b/package.json
@ -1,11 +1,11 @@
 {
    "author": {
-        "name": "LDC Service Web",
-        "email": "equipe.web@ldc.fr"
+        "name": "LDC DIGITAL Groupe",
+        "email": "digitalb@ldc.fr"
    },
-    "description": "Application Kiosk",
-    "version": "1.1.0",
-    "name": "app-kiosk",
+    "description": "UWIL Expo",
+    "version": "2.3.3",
+    "name": "uwil-expo",
    "private": true,
    "type": "commonjs",
    "main": "dist-electron/main.js",
@ -14,7 +14,7 @@
        "static/**/*"
    ],
    "scripts": {
-        "build": "nuxi build --prerender && electron-builder",
+        "build": "nuxi build --prerender && electron-builder -w",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
@ -24,7 +24,7 @@
        "lint:ts": "npm run typecheck",
        "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
        "lint:style": "node ./node_modules/.bin/stylelint --config './.stylelintrc.json' --max-warnings 0 \"assets/**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
-        "lint": "npm run lint:js && npm run lint:style && lint:ts",
+        "lint": "npm run lint:js && npm run lint:style && npm run lint:ts",
        "lint:fix": "npm run lint:js --fix && npm run lint:style --fix",
        "validate": "npm-run-all --parallel lint:js lint:style lint:ts",
        "prepare": "husky install"
@ -84,6 +84,7 @@
        "vite-plugin-electron": "^0.15.5",
        "vite-plugin-electron-renderer": "^0.14.5",
        "vue": "^3.3.4",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue-tsc": "^2.2.10"
    }
 }
--- a/pages/index-ldcgroup.vue
+++ b/pages/index-ldcgroup.vue
@ -0,0 +1,189 @@
+<template>
+  <div class="page-home d-flex text-bg-light">
+    <div class="container-fluid justify-content-center d-flex flex-column">
+      <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
+            :class="{
+              'd-flex align-items-center h-100 my-2': true,
+              'justify-content-start': brandIndex %2 !== 0,
+              'justify-content-end': brandIndex %2 === 0,
+            }"
+          >
+            <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"
+                  :src="`/data/${brand.picture}`"
+                  :alt="t('brands_logo', {'brand_name': transField(brand, 'name')})"
+                  :title="t('brands_logo', {'brand_name': transField(brand, 'name')})"
+                >
+              </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>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <span class="h4">{{ t('no_brands_available') }}</span>
+        </div>
+      </div>
+      <div class="row my-5 pb-5">
+        <div class="col py-5 my-5 pb-5">
+          <img
+            src="assets/pictures/layout/home-bottom-banner.png"
+            alt="Bottom Banner"
+            class="img-fluid"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import type AppState from "~/classes/AppState";
+import ToolboxHelper from "~/classes/ToolboxHelper";
+import { useAppStore } from "~/stores/useAppStore";
+import { Tooltips } from "~/vueModules/bsTooltips";
+
+export default defineComponent({
+  name: "HomePage",
+  data() : {
+    appState: AppState;
+    animateTimeout: NodeJS.Timeout|undefined;
+    animateIndex: number|null;
+    animations: Array<string>;
+    tooltips: Tooltips|null;
+  } {
+    return {
+      appState: {} as AppState,
+      animateTimeout: undefined,
+      animateIndex: null,
+      animations: ["heartBeat", "tada", "shakeX", "rubberBand"],
+      tooltips: null
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: ".page-home"});});
+    this.appState = useAppStore().data;
+
+    // * ANIMATIONS
+    clearTimeout(this.animateTimeout);
+    this.$nextTick(() => {
+      [...document.getElementsByClassName("brand-title")].forEach(el => {
+        el.classList.add("animate__bounce");
+      });
+      this.animateTimeout = setTimeout(() => {
+        [...document.getElementsByClassName("brand-title")].forEach(el => {
+          el.classList.remove("animate__bounce");
+        });
+        this.setBrandToAnimate();
+      }, ToolboxHelper.randomInteger(4000, 8000));
+    });
+  },
+  beforeUnmount() {
+    this.tooltips?.closeBootstrapTooltip();
+    clearTimeout(this.animateTimeout);
+  },
+  methods: {
+    getContrastYIQ(hexcolor: string): string {
+      return ToolboxHelper.getContrastYIQ(hexcolor);
+    },
+    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
+      return ToolboxHelper.trans(text, params, localeToUse);
+    },
+    transField(model: Typei18nModel, field: Typei18nFieldList) {
+      return ToolboxHelper.getTranslatableField(model, field);
+    },
+    setBrandToAnimate(): void {
+      clearTimeout(this.animateTimeout);
+      this.animateIndex = ToolboxHelper.randomInteger(0, this.appState.brands().length -1);
+      this.animateTimeout = setTimeout(this.setBrandToAnimate, ToolboxHelper.randomInteger(2000, 6000));
+    },
+    titleAnimations(brandIndex: number) {
+      const animation = this.animations.at(ToolboxHelper.randomInteger(0, this.animations.length -1));
+      const out: Map<string, boolean> = new Map<string, boolean>();
+      out.set(`animate__${animation}`, this.animateIndex === brandIndex);
+      return Object.fromEntries(out.entries());
+    },
+    gotoBrand(brand: TypeBrand) {
+      useAppStore().setActiveBrand(brand);
+      navigateTo(useLocaleRoute()({"name": "brands-slug", "params": {"slug": this.transField(brand, "slug")}}));
+    }
+  },
+});
+</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>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,49 +1,26 @@
 <template>
-  <div class="page-home d-flex text-bg-light">
-    <div class="container-fluid justify-content-center d-flex flex-column">
-      <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 class="page-home d-flex">
+    <div class="container-fluid">
+      <div v-if="appState.brands" class="row h-100 align-items-center">
        <div
          v-for="(brand, brandIndex) of appState.brands()"
          :key="brandIndex"
          :class="{
-            'col-12 col-md-6 px-5 my-3': true,
+            'align-items-center': true,
+            'col-12': appState.brands().length == 1,
+            'col-12 col-md-6 px-5 my-3': appState.brands().length > 1,
          }"
        >
          <div
            :class="{
-              'd-flex align-items-center h-100 my-5': true,
-              'justify-content-start': brandIndex %2 !== 0,
-              'justify-content-end': brandIndex %2 === 0,
+              'd-flex h-100 my-2': true,
+              'justify-content-start': brandIndex %2 !== 0 && appState.brands().length > 1,
+              'justify-content-end': brandIndex %2 === 0 && appState.brands().length > 1,
+              'justify-content-center': appState.brands().length === 1,
            }"
          >
            <div
-              class="d-inline-block text-center"
+              class="brand d-inline-block text-center shadow"
              role="button"
              :title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
              data-bs-toggle="tooltip"
@ -76,15 +53,6 @@
          <span class="h4">{{ t('no_brands_available') }}</span>
        </div>
      </div>
-      <div class="row my-5 pb-5">
-        <div class="col py-5 my-5 pb-5">
-          <img
-            src="assets/pictures/layout/home-bottom-banner.png"
-            alt="Bottom Banner"
-            class="img-fluid"
-          >
-        </div>
-      </div>
    </div>
  </div>
 </template>
@ -175,7 +143,6 @@ export default defineComponent({

 .page-home, .page-home>div {
  min-height: 100%;
-
  .brand-picture-wrapper {
    @include rfs(5rem, border-radius);

@ -185,5 +152,8 @@ export default defineComponent({
    @include rfs(8rem, padding-right);
    @include rfs(8rem, padding-left);
  }
+  .brand {
+    border-radius: 2rem;
+  }
 }
 </style>
--- a/plugins/emitter.ts
+++ b/plugins/emitter.ts
@ -5,7 +5,6 @@ type Events = {

 const emitter = mitt<Events>();

-
 const $bus = {
    $on: emitter.on,
    $emit: emitter.emit,
--- a/uwil-expo-icon.png
+++ b/uwil-expo-icon.png