From 5d1fa68954a2bba61b7cb7c1008f0a9c27610ebb Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 7 Nov 2024 00:14:01 +0100
Subject: [PATCH] Display change from ecoCode

---
 src/App.vue                                |  2 ++
 src/assets/icons/badge_info.svg            |  1 +
 src/components/shared/layout/AppBanner.vue | 31 ++++++++++++++++++++++
 src/views/HomeView.vue                     | 20 +++++++++++++-
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/icons/badge_info.svg
 create mode 100644 src/components/shared/layout/AppBanner.vue

diff --git a/src/App.vue b/src/App.vue
index 1261c09..c222035 100755
--- a/src/App.vue
+++ b/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 />
diff --git a/src/assets/icons/badge_info.svg b/src/assets/icons/badge_info.svg
new file mode 100644
index 0000000..020f870
--- /dev/null
+++ b/src/assets/icons/badge_info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-info"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><line x1="12" x2="12" y1="16" y2="12"/><line x1="12" x2="12.01" y1="8" y2="8"/></svg>
\ No newline at end of file
diff --git a/src/components/shared/layout/AppBanner.vue b/src/components/shared/layout/AppBanner.vue
new file mode 100644
index 0000000..6e01352
--- /dev/null
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2527660..9af5944 100644
--- a/src/views/HomeView.vue
+++ b/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%;