Ajout de la propriété 'radius' à l'interface NavColor et mise à jour des couleurs de navigation pour inclure des valeurs de rayon.

app/components/AppBackground.vue

@@ -1,28 +1,28 @@
 <script lang="ts" setup>
-import { navColors } from '~~/types'
+import { navColors, NavColor } from '~~/types'
 
 const route = useRoute()
 const colorMode = useColorMode()
 
 const colors = computed(() => {
   const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors) return navColor.colors
-  
+  if (navColor?.colors) return navColor.colors as Array<NavColor>
+
   const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  return [{ color: fallbackColor, x: 0, y: 0 }, { color: fallbackColor, x: 0, y: 0 }]
+  return [{ color: fallbackColor, x: 0, y: 0, radius: 0 }, { color: fallbackColor, x: 0, y: 0, radius: 0 }] as Array<NavColor>
 })
 
 const backgroundStyle = computed(() => ({
   backgroundImage: colors.value
-    .map(c => `radial-gradient(circle 500px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
-    .join(', ')
+    .map(c => `radial-gradient(circle ${c.radius}px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
+    .join(', '),
+  backgroundSize: '100% 100%, 100% 100%'
 }))
 </script>
 
 <template>
-  <ClientOnly>
-    <div class="min-h-screen w-full absolute inset-0">
-      <div class="absolute inset-0 z-0" :style="backgroundStyle" />
-    </div>
-  </ClientOnly>
+    <div
+      class="fixed  inset-0 z-0"
+      :style="backgroundStyle"
+    />
 </template>

types/index.ts

@@ -172,10 +172,11 @@ interface Nav {
   target?: string
 }
 
-interface NavColor {
+export interface NavColor {
   color: string
   x: number
   y: number
+  radius: number
 }
 
 interface NavColorGroup {
@@ -233,16 +234,32 @@ export const navs: Array<Nav> = [
 ]
 
 export const navColors: Array<NavColorGroup> = [
+  {
+    name: 'index',
+    colors: [{
+      color: '#ffa1ad',
+      x: 20,
+      y: 70,
+      radius: 250,
+    }, {
+      color: '#e7000b',
+      x: 80,
+      y: 20,
+      radius: 500,
+    }],
+  },
   {
     name: 'uses',
     colors: [{
       color: '#00d492',
       x: 60,
       y: 25,
+      radius: 500,
     }, {
       color: '#bbf451',
       x: 40,
-      y: 75,
+      y: 80,
+      radius: 300,
     }],
   },
   {
@@ -251,10 +268,12 @@ export const navColors: Array<NavColorGroup> = [
       color: '#3b82f6',
       x: 20,
       y: 20,
+      radius: 600,
     }, {
       color: '#ec4899',
       x: 80,
       y: 80,
+      radius: 200,
     }],
   },
   {
@@ -263,22 +282,12 @@ export const navColors: Array<NavColorGroup> = [
       color: '#ffd230',
       x: 20,
       y: 50,
+      radius: 400,
     }, {
       color: '#fb64b6',
       x: 80,
       y: 50,
-    }],
-  },
-  {
-    name: 'index',
-    colors: [{
-      color: '#ffa1ad',
-      x: 20,
-      y: 80,
-    }, {
-      color: '#e7000b',
-      x: 80,
-      y: 20,
+      radius: 400,
     }],
   },
 ]