feat: ajouter la configuration de l'application et les styles principaux, créer les pages mcp et index

app/pages/index.vue

@@ -43,7 +43,7 @@ const resources = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
+  <div class="min-h-screen bg-linear-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
     <!-- Hero Section -->
     <UContainer class="py-16 sm:py-24">
       <div class="text-center">
@@ -71,7 +71,7 @@ const resources = [
 
         <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
           <UButton
-            to="/docs"
+            to="/mcp"
             size="xl"
             icon="i-heroicons-book-open"
             class="shadow-lg"
@@ -98,13 +98,13 @@ const resources = [
             Nuxt 4
           </UBadge>
           <UBadge
-            color="success"
+            color="error"
             variant="subtle"
           >
             MCP Protocol
           </UBadge>
           <UBadge
-            color="primary"
+            color="secondary"
             variant="subtle"
           >
             TypeScript
@@ -135,10 +135,9 @@ const resources = [
           v-for="feature in features"
           :key="feature.title"
           :ui="{
-            body: { padding: 'p-6' },
-            ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-            shadow: 'shadow-lg hover:shadow-xl transition-shadow duration-300'
+            body: 'p-6',
           }"
+          variant="subtle"
         >
           <div class="flex flex-col items-start gap-4">
             <div class="p-3 rounded-lg bg-primary/10">
@@ -178,11 +177,10 @@ const resources = [
           :to="resource.to"
           target="_blank"
           color="neutral"
-          variant="outline"
+          variant="subtle"
           size="lg"
           block
           :ui="{
-            padding: { lg: 'px-4 py-6' },
             base: 'hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200'
           }"
         >
@@ -201,10 +199,9 @@ const resources = [
     <UContainer class="py-16">
       <UCard
         :ui="{
-          body: { padding: 'p-8 sm:p-12' },
-          ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-          background: 'bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20'
+          body: 'p-8 sm:p-12',
         }"
+        variant="outline"
       >
         <div class="grid md:grid-cols-2 gap-8">
           <div>
@@ -214,14 +211,18 @@ const resources = [
             <p class="text-gray-600 dark:text-gray-400 mb-4">
               Configure your MCP client to connect to my server:
             </p>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code>{
+            <UCard 
+            variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto">
+                <code>
+{
   "mcpServers": {
     "artmcp": {
       "url": "https://api.arthurdanjou.fr/mcp/mcp"
     }
   }
-}</code></pre>
+}</code>
+              </pre>
             </UCard>
           </div>
 
@@ -232,12 +233,14 @@ const resources = [
             <p class="text-gray-600 dark:text-gray-400 mb-4">
               Use REST API endpoints in your applications:
             </p>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code># Get profile information
+            <UCard variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto">
+<code># Get profile information
 curl https://api.arthurdanjou.fr/api/profile
 
 # Get technical skills
-curl https://api.arthurdanjou.fr/api/skills</code></pre>
+curl https://api.arthurdanjou.fr/api/skills</code>
+              </pre>
             </UCard>
           </div>
         </div>
@@ -255,7 +258,7 @@ curl https://api.arthurdanjou.fr/api/skills</code></pre>
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
           <UButton
-            to="/docs"
+            to="/mcp"
             size="xl"
             icon="i-heroicons-arrow-right"
             trailing