Display change from ecoCode

src/App.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { RouterView } from "vue-router";
+import Banner from "@/components/shared/layout/AppBanner.vue";
 import Header from "@/components/shared/layout/AppHeader.vue";
 import Footer from "@/components/shared/layout/AppFooter.vue";
 </script>
 
 <template>
+  <Banner />
   <Header />
   <RouterView />
   <Footer />

src/components/shared/layout/AppBanner.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import BadgeInfoIcon from "@/assets/icons/badge_info.svg";
+</script>
+
+<template>
+  <div class="banner-container" role="alert">
+    <BadgeInfoIcon width="24" height="24" />
+    <p>
+      ecoCode change de nom et devient <strong>Creendengo</strong> ! L'outil ne
+      change pas, seul le nom évolue.
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+  background-color: var(--color-additionnal-1);
+  color: var(--color-on-surface);
+  font-size: 1.05rem;
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -14,7 +14,10 @@ import AppSection from "@/components/shared/AppSection.vue";
     title="Réduisons l'impact environnemental et social des solutions numériques"
     sub-title="Outil Open Source basé sur un référentiel de règles d'éco-conception logicielle"
   >
-    <WhiteLogo width="358" class="hero" />
+    <div class="logo-container">
+      <WhiteLogo width="358" class="hero" />
+      <p class="old-name">Anciennement <strong>ecoCode</strong></p>
+    </div>
   </AppHero>
 
   <div class="block-button-section-1 green">
@@ -137,6 +140,21 @@ import AppSection from "@/components/shared/AppSection.vue";
   padding: 0 0 0 97px;
 }
 
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .old-name {
+    padding: 0.25rem 1rem;
+    border-radius: var(--radius);
+    font-size: 1.5rem;
+    color: var(--color-white);
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+
 @media screen and (max-width: 768px) {
   img.hero {
     max-width: 60%;