Use primary color for title

src/components/MainSection.vue

@@ -3,15 +3,20 @@ defineProps<{
   icon: string
   title: string
 }>()
+
+const appConfig = useAppConfig()
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
 </script>
 
 <template>
   <div class="p-4 border border-zinc-100 dark:border-zinc-300/10 rounded-xl flex flex-col justify-between">
-    <div class="flex items-center gap-2">
-      <UIcon :name="icon" class="text-subtitle text-lg" />
+    <div :class="getColor()" class="flex items-center gap-2">
+      <UIcon :name="icon" class="text-2xl" />
       <h1>{{ title }}</h1>
     </div>
-    <div class="text-subtitle mt-2 mb-4">
+    <div class="text-subtitle mt-2 mb-4 text-sm">
       <slot />
     </div>
     <slot name="footer" />

src/pages/talents.vue

@@ -9,7 +9,9 @@ const { getCategories, talents, isFavorite, toggleFavorite, switchCategory, pend
 getCategories.value?.forEach(category => categories.value.push({ label: category.name, slug: category.slug }))
 
 const appConfig = useAppConfig()
-const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
 </script>
 
 <template>
@@ -120,7 +122,7 @@ const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
               {{ category.category.name }}
             </UBadge>
           </div>
-          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor">
+          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ talent.website.replace('https://', '') }}</span>
           </p>

src/pages/work.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 const appConfig = useAppConfig()
-const getColor = computed(() => appConfig.ui.primary)
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
 
 useHead({
   title: 'My work • Arthur Danjou',
@@ -52,7 +54,7 @@ const { data: projects } = await useProjects()
               {{ tag }}
             </UBadge>
           </div>
-          <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor">
+          <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ project.link.replace('https://', '') }}</span>
           </p>