change color

src/routes/overview/Overview.vue

@@ -1,13 +1,12 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
-import { useAuthStore } from '@/stores/auth';
 import { onMounted, ref } from 'vue';
+import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
 import StatsOverview from './components/StatsOverview.vue';
 
-const auth = useAuthStore()
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
 
@@ -53,14 +52,14 @@ const fetchDashboardData = async () => {
 onMounted(() => {
     fetchDashboardData();
 });
+
 </script>
 
 <template>
     <div class="dashboard-overview">
-        <PageHeader :title="`Welcome back, ${auth.user?.username}! 👋`" description="Here's what's happening with your videos."
-            :breadcrumbs="[
-                { label: 'Dashboard' }
-            ]" />
+        <PageHeader :title="NameGradient" description="Welcome back, Here's what's happening with your videos." :breadcrumbs="[
+            { label: 'Dashboard' }
+        ]" />
 
         <!-- Stats Grid -->
         <StatsOverview :loading="loading" :stats="stats" />

src/routes/overview/components/NameGradient.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="text-3xl font-bold text-gray-900 mb-1">
+        <span class=":uno: bg-[linear-gradient(130deg,#14a74b_0%,#22c55e_35%,#10b981_65%,#06b6d4_100%)] bg-clip-text text-transparent">Hello, {{ auth.user?.username }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth';
+
+const auth = useAuthStore()
+</script>