fix: update portfolio branding to "Killian' DAL-CIN" across all documentation and components

- Corrected the name in various files including CLAUDE.md, README.md, and configuration files to reflect the updated branding.
- Ensured consistency in the use of the new name throughout the project, enhancing brand identity.

app/components/sections/CTASection.vue

@@ -1,26 +1,62 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const localePath = useLocalePath()
+
+interface Props {
+  title?: string
+  subtitle?: string
+  primaryText?: string
+  primaryTo?: string
+  secondaryText?: string
+  secondaryTo?: string
+  external?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  primaryText: '',
+  primaryTo: '/contact',
+  secondaryText: '',
+  secondaryTo: '/about',
+  external: false,
+})
+
+const resolvedTitle = computed(() => props.title || t('home.cta2.title'))
+const resolvedSubtitle = computed(() => props.subtitle || t('home.cta2.subtitle'))
+const resolvedPrimaryText = computed(() => props.primaryText || t('home.cta2.startProject'))
+const resolvedSecondaryText = computed(() => props.secondaryText || t('home.cta2.learnMore'))
 </script>
 
 <template>
-  <section class="py-20 md:py-28 px-4">
+  <section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8">
     <div class="max-w-5xl mx-auto">
-      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-emerald-500 px-8 py-16 sm:px-16 sm:py-20 text-center">
-        <!-- Decorative shapes -->
-        <div class="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" aria-hidden="true" />
-        <div class="absolute bottom-0 right-0 w-96 h-96 bg-black/10 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" aria-hidden="true" />
+      <div class="relative overflow-hidden rounded-3xl px-8 py-20 sm:px-16 sm:py-24 text-center border border-gray-200/60 dark:border-gray-800/40 bg-gray-50 dark:bg-gray-900">
+        <!-- Subtle dot pattern -->
+        <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" aria-hidden="true"
+          style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 24px 24px;" />
+        <!-- Brand glow -->
+        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-brand-500/8 dark:bg-brand-500/15 rounded-full blur-3xl pointer-events-none" aria-hidden="true" />
 
         <div class="relative z-10">
-          <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ t('home.cta2.title') }}</h2>
-          <p class="text-lg text-white/80 mb-10 max-w-2xl mx-auto">{{ t('home.cta2.subtitle') }}</p>
+          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-5 tracking-tight">{{ resolvedTitle }}</h2>
+          <p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">{{ resolvedSubtitle }}</p>
           <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <UButton :to="localePath('/contact')" size="xl" color="white" class="font-semibold">
-              {{ t('home.cta2.startProject') }}
-            </UButton>
-            <UButton :to="localePath('/about')" size="xl" variant="outline" color="white" class="font-semibold">
-              {{ t('home.cta2.learnMore') }}
-            </UButton>
+            <NuxtLink
+              :to="external ? props.primaryTo : localePath(props.primaryTo)"
+              :target="external ? '_blank' : undefined"
+              :rel="external ? 'noopener noreferrer' : undefined"
+              class="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40"
+            >
+              {{ resolvedPrimaryText }}
+              <UIcon :name="external ? 'i-lucide-external-link' : 'i-lucide-arrow-right'" class="w-4 h-4" />
+            </NuxtLink>
+            <NuxtLink
+              :to="localePath(props.secondaryTo)"
+              class="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-brand-500/50 hover:text-brand-500 font-semibold text-sm transition-all duration-200"
+            >
+              {{ resolvedSecondaryText }}
+            </NuxtLink>
           </div>
         </div>
       </div>