From b2580a70820d10318366fc59630df5be5c3e836d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 11 Feb 2026 11:20:27 +0100
Subject: [PATCH] feat: styling hero item

---
 app/app.vue                   |  2 +-
 app/components/HeroItem.vue   | 45 +++++++++++++++++++++++++++++------
 app/components/SearchItem.vue |  2 +-
 content/pages/home.json       | 16 ++++++-------
 nuxt.config.ts                |  8 +++++++
 5 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index ccbbedf..4071cb3 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,7 +2,7 @@
   <UApp :locale="fr">
     <HeaderItem />
     <NuxtLayout>
-      <div class="pt-22 px-4">
+      <div class="pt-28 px-4">
         <NuxtPage />
       </div>
     </NuxtLayout>
diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index 9326538..3f7e4b6 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -1,11 +1,30 @@
 <template>
-  <div v-if="data">
-    <h1 class="text-3xl font-heading">{{ data?.hero?.heading }}</h1>
-    <p>{{ data?.hero?.description }}</p>
-    <div v-for="feature in data.features" :key="feature.title">
-      <h3>{{ feature?.title }}</h3>
-      <p>{{ feature?.text }}</p>
-      <NuxtImg :src="feature?.img" :alt="`Image de ${feature?.title}`" height="200" />
+  <div
+    v-if="data"
+    class="mx-auto w-[75%] flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
+  >
+    <div class="w-[30%] h-full flex flex-col gap-4 text-center justify-center mx-12">
+      <h1 class="text-4xl font-heading">{{ data?.hero?.heading }}</h1>
+      <p>{{ data?.hero?.description }}</p>
+    </div>
+    <div class="w-[70%] grid grid-rows-2 grid-cols-3 gap-6 h-full">
+      <NuxtLink
+        v-for="(feature, index) in data.features"
+        :key="feature.title"
+        :to="`#${feature?.title.toLowerCase()}`"
+        :class="getGridClass(index)"
+      >
+        <div class="absolute inset-0">
+          <NuxtImg
+            :src="feature?.img"
+            :alt="`Image de ${feature?.title}`"
+            class="w-full h-full object-cover"
+          />
+        </div>
+        <h3 class="absolute z-10 text-white p-6 text-lg drop-shadow-lg">
+          {{ feature?.title }}
+        </h3>
+      </NuxtLink>
     </div>
   </div>
   <div v-else>No data available</div>
@@ -13,4 +32,16 @@
 
 <script setup="ts">
   const { data } = await useAsyncData('home-hero', () => queryCollection('pages').first())
+
+  const getGridClass = (index) => {
+    const baseClass = 'relative rounded-3xl overflow-hidden'
+    const gridClasses = {
+      0: 'row-span-1 col-start-1 row-start-1 mt-24',
+      1: 'row-span-3 col-start-2 row-start-1',
+      2: 'row-span-1 col-start-3 row-start-1 mt-24',
+      3: 'row-span-2 col-start-1 row-start-2 mb-24',
+      4: 'row-span-1 col-start-3 row-start-2 mb-24',
+    }
+    return `${baseClass} ${gridClasses[index] || ''}`
+  }
 </script>
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index f887d72..13d02b2 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p-20">
     <p>La recherche</p>
   </div>
 </template>
diff --git a/content/pages/home.json b/content/pages/home.json
index 75b8169..26643ed 100644
--- a/content/pages/home.json
+++ b/content/pages/home.json
@@ -2,29 +2,29 @@
   "title": "Weena et la légende de Noor",
   "features": [
     {
-      "title": "Personnages",
-      "img": "/images/personnages.png",
+      "title": "Créatures",
+      "img": "/images/creatures.png",
       "text": "..."
     },
     {
-      "title": "Créatures",
-      "img": "/images/creatures.png",
+      "title": "Personnages",
+      "img": "/images/personnages.png",
       "text": "..."
     },
     {
       "title": "Peuples",
       "img": "/images/peuples.png",
       "text": "..."
-    },
+    },    
     {
       "title": "Lieux",
       "img": "/images/lieux.png",
       "text": "..."
     },
     {
-      "title": "Teste",
-      "text": "...",
-      "img": "/images/test.png"
+      "title": "Généalogie",
+      "img": "/images/test.png",
+      "text": "..."
     }
   ],
   "hero": {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 30137fe..98c35a5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,6 +11,13 @@ export default defineNuxtConfig({
     '@nuxt/ui',
     '@nuxt/fonts',
   ],
+  vite: {
+    server: {
+      watch: {
+        usePolling: true,
+      },
+    },
+  },
   css: ['~/assets/css/main.css'],
   ui: {
     colorMode: false,
@@ -26,6 +33,7 @@ export default defineNuxtConfig({
     ],
   },
   studio: {
+    dev: false,
     repository: {
       provider: 'github',
       owner: 'mathhetru',