feat: styling hero item

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>

app/components/HeroItem.vue

@@ -1,16 +1,47 @@
 <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>
 </template>
 
 <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>

app/components/SearchItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p-20">
     <p>La recherche</p>
   </div>
 </template>

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": {

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',