feat: nuxtUI + tailwind + header styling

.vscode/settings.json

@@ -2,5 +2,13 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": ["class", "ui"],
+  "tailwindCSS.experimental.classRegex": [["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]
 }

app/app.vue

@@ -1,10 +1,15 @@
 <template>
-  <NuxtLayout>
+  <UApp :locale="fr">
     <HeaderItem />
-    <NuxtPage />
-  </NuxtLayout>
+    <NuxtLayout>
+      <div class="pt-22 px-4">
+        <NuxtPage />
+      </div>
+    </NuxtLayout>
+  </UApp>
 </template>
 
 <script setup="ts">
   import HeaderItem from '~/components/HeaderItem.vue'
+  import { fr } from '@nuxt/ui/locale'
 </script>

app/assets/css/main.css

@@ -0,0 +1,30 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--depth);
+}
+
+.font-heading {
+  font-family: var(--font-heading);
+}
+
+@layer base {
+  :root {
+    /* Couleurs */
+    --primary: 59 130 246;
+    --secondary: 139 92 246;
+    --accent: 236 72 153;
+    --depth: #dadada;
+
+    /* Spacing */
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 2rem;
+
+    /* Fonts */
+    --font-main: 'Montserrat', sans-serif;
+    --font-heading: 'Birthstone Bounce', sans-serif;
+  }
+}

app/components/HeaderItem.vue

@@ -1,16 +1,35 @@
 <template>
-  <header v-if="data">
-    <nav>
-      <NuxtLink :to="data.title.link" :aria-label="data.title.ariaLabel">
-        <NuxtImg :src="data.title.img" :alt="data.title.ariaLabel" />
+  <header
+    v-if="data"
+    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/30 rounded-full mt-4 backdrop-blur-sm 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-2xl flex items-center gap-2"
+      >
+        <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+        {{ data.title.text }}
       </NuxtLink>
-      <div v-for="page in data.pages" :key="page.text">
-        <NuxtLink :to="page.link" :aria-label="page.text">
-          <p>{{ page.text }}</p>
+      <div class="flex items-center gap-6">
+        <NuxtLink
+          v-for="page in data.pages"
+          :key="page.text"
+          :to="page.link"
+          :aria-label="page.text"
+          class=""
+        >
+          {{ page.text }}
         </NuxtLink>
       </div>
-      <NuxtLink :to="data.contact.link" :aria-label="data.contact.ariaLabel">
-        <p>{{ data.contact.text }}</p>
+      <NuxtLink
+        :to="data.contact.link"
+        :aria-label="data.contact.ariaLabel"
+        class="flex items-center gap-1 rounded-full px-8 py-2 bg-black text-white"
+      >
+        <!-- <UIcon name="line-md:chat-round-dots-filled" /> -->
+        {{ data.contact.text }}
       </NuxtLink>
     </nav>
   </header>

app/components/HeroItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="data">
-    <h1>{{ data?.hero?.heading }}</h1>
+    <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>

app/pages/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div v-if="data">
-    <p>{{ data.title }}</p>
     <HeroItem />
     <SearchItem />
   </div>

content.config.ts

@@ -11,6 +11,7 @@ export default defineContentConfig({
           img: z.string(),
           ariaLabel: z.string(),
           link: z.string(),
+          text: z.string(),
         }),
         pages: z.array(
           z.object({

content/header/navigation.json

@@ -2,25 +2,26 @@
   "title": {
     "img": "/images/test.png",
     "ariaLabel": "Logo de Weena et la légende de Noor",
+    "text": "Wiki Weëna et la Légende de Noor",
     "link": "/"
   },  
-  "pages": [
+  "pages": [    
     {
-      "link": "/tomes",
-      "text": "Tomes"
+      "link": "/",
+      "text": "Tout l'univers"
     },
     {
-      "link": "/qui-sommes-nous",
-      "text": "Qui sommes-nous ?"
+      "link": "/tomes",
+      "text": "Tomes"
     },
     {
       "link": "/auteurs",
       "text": "Auteurs"
     }
   ],
   "contact": {
-    "text": "Nous contacter",
-    "ariaLabel": "Lien vers page de contact",
-    "link": "/contact"
+    "text": "Qui sommes-nous ?",
+    "ariaLabel": "Lien vers page à propos de nous",
+    "link": "/qui-sommes-nous"
   }
 }

nuxt.config.ts

@@ -2,8 +2,29 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/eslint', '@nuxt/content', 'nuxt-studio', '@nuxt/image', 'nuxt-security'],
-  content: {},
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/content',
+    'nuxt-studio',
+    '@nuxt/image',
+    'nuxt-security',
+    '@nuxt/ui',
+    '@nuxt/fonts',
+  ],
+  css: ['~/assets/css/main.css'],
+  ui: {
+    colorMode: false,
+  },
+  fonts: {
+    families: [
+      { name: 'Birthstone Bounce', provider: 'google', weights: [400, 500] },
+      {
+        name: 'Montserrat',
+        provider: 'google',
+        weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+      },
+    ],
+  },
   studio: {
     repository: {
       provider: 'github',
@@ -12,6 +33,23 @@ export default defineNuxtConfig({
       branch: 'content',
     },
   },
+  app: {
+    head: {
+      script:
+        process.env.NODE_ENV === 'production'
+          ? [
+              {
+                defer: true,
+                src: process.env.NUXT_PUBLIC_UMAMI_URL,
+                'data-website-id': process.env.NUXT_PUBLIC_UMAMI_ID,
+              },
+            ]
+          : [],
+      htmlAttrs: {
+        lang: 'fr',
+      },
+    },
+  },
   security: {
     headers: {
       contentSecurityPolicy: