feat: improve style on id page

app/assets/css/color/gold.css

@@ -0,0 +1,23 @@
+.golden {
+  background: linear-gradient(90deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #bf953f);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shine 4s linear infinite;
+}
+
+.bg-golden {
+  background: linear-gradient(90deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #bf953f);
+  background-size: 200% 100%;
+  animation: shine 4s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}

app/assets/css/main.css

@@ -1,11 +1,12 @@
 @import 'tailwindcss';
 @import '@nuxt/ui';
+@import './color/gold.css';
 
 body {
   font-family: var(--font-main);
   background-color: var(--depth);
   scroll-behavior: smooth;
-  background-image: url('https://res.cloudinary.com/dbihnwsar/image/upload/f_auto,q_auto/v1772911031/EgNIdozXsAEzP9m-protected-intensity-LOW-V2_q1xony.jpg');
+  background-image: url('https://res.cloudinary.com/dbihnwsar/image/upload/f_auto,q_auto/v1773426387/lineage_by_alice_bobbaji_d4dxgo7-fullview-protected-intensity-LOW-V2_dxdrjv.jpg');
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
@@ -28,13 +29,14 @@ body::before {
 @layer base {
   :root {
     /* Couleurs */
-    --ui-primary: var(--color-indigo-900);
-    --ui-secondary: var(--color-indigo-400);
+    --ui-primary: #bb8f36;
+    --ui-secondary: #d0b173;
+    --ui-tertiary: #fcf6ba;
     --depth: var(--color-slate-200);
-    --ui-success: var(--color-indigo-900);
-    --ui-info: var(--ui-color-teal-500);
-    --ui-warning: var(--ui-color-rose-500);
-    --ui-error: var(--ui-color-red-700);
+    --ui-success: #bf953f;
+    --ui-info: var(--ui-color-amber-900);
+    --ui-warning: var(--ui-color-orange-500);
+    --ui-error: var(--ui-color-red-800);
 
     /* Spacing */
     --spacing-sm: 0.5rem;

app/components/DrawerHeader.vue

@@ -0,0 +1,109 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="entitesStore.isOpenDrawer"
+        class="fixed inset-0 bg-black/30 z-50 backdrop-blur-sm"
+        @click="closeDrawer"
+      />
+    </Transition>
+
+    <Transition name="slide">
+      <div
+        v-if="entitesStore.isOpenDrawer"
+        class="fixed top-0 right-0 h-full w-85 bg-white z-50 shadow-xl p-6 flex flex-col gap-8"
+      >
+        <button
+          class="self-start h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
+          @click="closeDrawer"
+        >
+          <UIcon name="line-md:close" class="text-2xl" />
+        </button>
+
+        <NuxtLink
+          :to="data.title.link"
+          class="font-heading text-2xl flex items-center gap-2"
+          @click="closeDrawer"
+        >
+          <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+          {{ props.data.title.text }}
+        </NuxtLink>
+
+        <nav class="flex flex-col gap-8 text-lg">
+          <NuxtLink
+            v-for="page in props.data.pages"
+            :key="page.text"
+            :to="page.link"
+            class="w-full text-center"
+            @click="closeDrawer"
+          >
+            {{ page.text }}
+          </NuxtLink>
+        </nav>
+
+        <NuxtLink
+          :to="data.contact.link"
+          class="mt-auto rounded-full bg-black text-white text-center py-2 px-4 hover:bg-gray-600 transition-colors"
+          @click="closeDrawer"
+        >
+          {{ props.data.contact.text }}
+        </NuxtLink>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { useEntitesStore } from '../stores/entites.store'
+
+  const entitesStore = useEntitesStore()
+
+  const props = defineProps<{
+    data: {
+      title: {
+        text: string
+        link: string
+        ariaLabel: string
+      }
+      pages: {
+        text: string
+        link: string
+      }[]
+      contact: {
+        text: string
+        link: string
+        ariaLabel: string
+      }
+    }
+  }>()
+
+  const closeDrawer = () => {
+    entitesStore.isOpenDrawer = false
+  }
+
+  defineShortcuts({
+    o: () => (entitesStore.isOpenDrawer = !entitesStore.isOpenDrawer),
+  })
+</script>
+
+<style lang="css">
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: transform 0.3s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    transform: translateX(100%);
+  }
+</style>

app/components/EntitesItem.vue

@@ -3,7 +3,7 @@
     v-for="entite in props.entites"
     :key="entite.id"
     :to="formateLink(entite.id)"
-    class="border rounded-lg p-4 backdrop-blur-xs hover:shadow-lg hover:bg-white transition flex gap-2"
+    class="border border-primary rounded-lg p-4 backdrop-blur-xs hover:shadow-lg hover:bg-white transition flex gap-2"
   >
     <div v-if="entite.image_url" class="w-20 h-20 rounded-full overflow-hidden shrink-0">
       <NuxtImg
@@ -16,24 +16,24 @@
     </div>
     <div class="flex w-full flex-col justify-between">
       <div class="flex justify-between items-start mb-2">
-        <h3 class="font-bold text-lg">{{ entite.nom }}</h3>
-        <span class="text-xs bg-indigo-400 text-white px-2 py-1 rounded">
-          {{ entite.type }}
+        <h3 class="font-bold text-lg text-black leading-none">{{ entite.nom }}</h3>
+        <span class="text-xs bg-secondary text-white px-2 py-1 rounded capitalize">
+          {{ entite.type2 }}
         </span>
       </div>
 
       <div v-if="entite.description">
-        <p class="text-gray-600 text-sm mb-3">
-          {{ entite.description?.substring(0, 60) }}...
-          <a href="#" class="font-bold text-indigo-900 hover:text-indigo-400">Lire la suite</a>
+        <p class="text-gray-600 text-sm mb-3 leading-4">
+          {{ entite.description?.substring(0, 50) }}...
+          <a href="#" class="font-bold text-primary hover:text-secondary">Lire la suite</a>
         </p>
       </div>
 
       <div class="flex flex-wrap gap-1">
         <span
           v-for="tag in entite.tags"
           :key="tag"
-          class="text-xs bg-cyan-100 text-cyan-800 px-2 py-1 rounded"
+          class="text-xs bg-gray-300 text-black px-2 py-1 rounded"
         >
           {{ tag }}
         </span>

app/components/FooterItem.vue

@@ -1,19 +1,34 @@
 <template>
   <footer v-if="data" class="w-full mx-auto bg-white/30 shadow-lg">
-    <nav class="flex items-center justify-between p-4">
-      <p class="text-sm text-gray-700">
-        {{ new Date().getFullYear() }} - Weena et la légende de Noor. Tous droits réservés.
-      </p>
-      <div class="flex gap-4">
-        <a
+    <nav
+      class="flex items-center flex-col lg:flex-row justify-between p-4 text-center gap-3 sm:gap-0"
+    >
+      <div class="flex flex-col lg:items-start">
+        <p class="text-xs sm:text-sm text-gray-700">
+          {{ new Date().getFullYear() }} {{ data.copyright }}
+        </p>
+        <div class="flex sm:gap-4 gap-2 justify-center">
+          <NuxtLink
+            v-for="(link, index) in data.legalLinks"
+            :key="index"
+            :href="link.url"
+            rel="noopener noreferrer"
+            class="text-xs sm:text-sm text-gray-700 hover:text-primary transition-colors duration-200"
+          >
+            {{ link.text }}
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="flex sm:gap-4 gap-2">
+        <NuxtLink
           v-for="(link, index) in data.links"
           :key="index"
           :href="link.url"
           rel="noopener noreferrer"
-          class="text-sm text-gray-700 hover:text-gray-900 transition-colors duration-200"
+          class="text-xs sm:text-sm text-gray-700 hover:text-primary transition-colors duration-200"
         >
           {{ link.text }}
-        </a>
+        </NuxtLink>
       </div>
     </nav>
   </footer>

app/components/HeaderItem.vue

@@ -1,24 +1,26 @@
 <template>
   <header
     v-if="data"
-    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/70 md:bg-white/50 rounded-full mt-4 backdrop-blur-xs z-50 shadow-lg"
+    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/75 md:bg-white/50 rounded-full mt-4 backdrop-blur-xs z-50 shadow-lg"
   >
     <nav class="flex items-center justify-between p-4">
       <NuxtLink
         :to="data.title.link"
         :aria-label="data.title.ariaLabel"
-        class="font-heading text-xl lg:text-2xl flex items-center gap-2"
+        class="font-heading text-xl lg:text-2xl flex items-center gap-2 hover:text-primary transition-colors"
       >
         <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
         {{ data.title.text }}
       </NuxtLink>
 
-      <div class="hidden md:flex items-center text-sm lg:text-base gap-6 lg:gap-9">
+      <div class="hidden md:flex items-center gap-6 lg:gap-9">
         <NuxtLink
           v-for="page in data.pages"
           :key="page.text"
           :to="page.link"
           :aria-label="page.text"
+          class="hover:text-primary text-sm lg:text-base transition-colors"
+          `
         >
           {{ page.text }}
         </NuxtLink>
@@ -27,7 +29,7 @@
       <NuxtLink
         :to="data.contact.link"
         :aria-label="data.contact.ariaLabel"
-        class="hidden md:flex items-center text-xs rounded-full px-4 py-1 bg-black text-white lg:text-sm lg:px-6 hover:bg-gray-600 transition-colors"
+        class="hidden md:flex items-center text-xs rounded-full px-4 py-1 bg-black hover:bg-primary text-white lg:text-sm lg:px-6 transition-colors"
       >
         {{ data.contact.text }}
       </NuxtLink>
@@ -40,94 +42,21 @@
     </nav>
   </header>
 
-  <Teleport v-if="data" to="body">
-    <Transition name="fade">
-      <div
-        v-if="isOpen"
-        class="fixed inset-0 bg-black/30 z-50 backdrop-blur-sm"
-        @click="closeDrawer"
-      />
-    </Transition>
-
-    <Transition name="slide">
-      <div
-        v-if="isOpen"
-        class="fixed top-0 right-0 h-full w-75 bg-white z-50 shadow-xl p-6 flex flex-col gap-8"
-      >
-        <button
-          class="self-end h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
-          @click="closeDrawer"
-        >
-          <UIcon name="line-md:close" class="text-2xl" />
-        </button>
-
-        <NuxtLink
-          :to="data.title.link"
-          class="font-heading text-2xl flex items-center gap-2"
-          @click="closeDrawer"
-        >
-          <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
-          {{ data.title.text }}
-        </NuxtLink>
-
-        <nav class="flex flex-col gap-6 text-lg">
-          <NuxtLink
-            v-for="page in data.pages"
-            :key="page.text"
-            :to="page.link"
-            class="w-full text-center"
-            @click="closeDrawer"
-          >
-            {{ page.text }}
-          </NuxtLink>
-        </nav>
-
-        <NuxtLink
-          :to="data.contact.link"
-          class="mt-auto rounded-full bg-black text-white text-center py-2 px-4 hover:bg-gray-600 transition-colors"
-          @click="closeDrawer"
-        >
-          {{ data.contact.text }}
-        </NuxtLink>
-      </div>
-    </Transition>
-  </Teleport>
+  <DrawerHeader v-if="data" :data="data" />
 </template>
 
 <script setup lang="ts">
-  const { data } = await useAsyncData('header', () => queryCollection('header').first())
-
-  const isOpen = ref(false)
+  import { useEntitesStore } from '../stores/entites.store'
+  import DrawerHeader from './DrawerHeader.vue'
 
-  const closeDrawer = () => {
-    isOpen.value = false
-  }
+  const { data } = await useAsyncData('header', () => queryCollection('header').first())
+  const entitesStore = useEntitesStore()
 
   const openDrawer = () => {
-    isOpen.value = true
+    entitesStore.isOpenDrawer = true
   }
 
   defineShortcuts({
-    o: () => (isOpen.value = !isOpen.value),
+    o: () => (entitesStore.isOpenDrawer = !entitesStore.isOpenDrawer),
   })
 </script>
-
-<style lang="css">
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s ease;
-  }
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.3s ease;
-  }
-  .slide-enter-from,
-  .slide-leave-to {
-    transform: translateX(100%);
-  }
-</style>