Add animated text gradient component and update references in content files

app/components/content/AnimatedTextGradient.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  text?: string
-  gradient?: string
-  class?: string
-  speed?: number
-}>(), {
-  text: 'This is a text',
-  gradient: 'bg-radial from-orange-400 to-pink-500',
-  class: 'font-bold',
-  speed: 2,
-})
-
-const styleVars = {
-  '--animated-speed': `${props.speed}s`,
-}
-</script>
-
-<template>
-  <span
-    class="inline-block bg-clip-text text-transparent animate-gradient" :class="[
-      gradient,
-      props.class,
-    ]"
-    :style="styleVars"
-  >
-    <slot>{{ text }}</slot>
-  </span>
-</template>
-
-<style scoped>
-.animate-gradient {
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: animatedTextGradient-to-right var(--animated-speed) linear infinite;
-}
-@keyframes animatedTextGradient-to-right {
-  to {
-    background-position: 200% center;
-  }
-}
-</style>

app/components/home/Name.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const styleVars = {
+  '--animated-speed': '40s',
+}
+</script>
+
+<template>
+  <span
+    class="text-xl inline-block font-bold animate-gradient"
+    :style="styleVars"
+  >
+    <slot>Arthur Danjou</slot>
+  </span>
+</template>
+
+<style scoped>
+.animate-gradient {
+  background-image: linear-gradient(
+    90deg,
+    #f43f5e, #f97316, #f59e0b, #eab308, #84cc16, #22c55e,
+    #10b981, #14b8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1,
+    #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e
+  );
+  background-size: 1400% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-animation var(--animated-speed) linear infinite;
+}
+
+@keyframes gradient-animation {
+  0% { background-position: 0% center; }
+  100% { background-position: 200% center; }
+}
+</style>