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.
2026-04-08 19:54:46 +02:00
parent 355df8dbbe
commit 6b828aff67
45 changed files with 750 additions and 665 deletions
@@ -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>
@@ -20,15 +20,15 @@ const items = computed(() =>
 </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-3xl mx-auto">
-      <div class="text-center mb-14">
-        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">FAQ</span>
-        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ title }}</h2>
-        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3">{{ subtitle }}</p>
+      <div class="text-center mb-16">
+        <span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// faq</span>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ title }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-4 leading-relaxed">{{ subtitle }}</p>
      </div>

-      <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-2">
+      <div class="rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-3 sm:p-4 shadow-sm">
        <UAccordion :items="items" type="single" collapsible />
      </div>
    </div>
@@ -4,27 +4,31 @@ const { featuredProjects } = useProjects()
 </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-7xl mx-auto">
      <!-- Section header -->
-      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14">
+      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
        <div>
-          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Portfolio</span>
-          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.featuredProjects.title') }}</h2>
-          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl">{{ t('home.featuredProjects.subtitle') }}</p>
+          <span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// portfolio</span>
+          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('home.featuredProjects.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl leading-relaxed">{{ t('home.featuredProjects.subtitle') }}</p>
        </div>
-        <UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto">
+        <UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto group">
          {{ t('home.cta.viewProjects') }}
        </UButton>
      </div>

-      <!-- Projects grid -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-        <ProjectCard
-          v-for="project in featuredProjects"
+      <!-- Bento grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6 auto-rows-fr">
+        <div
+          v-for="(project, index) in featuredProjects"
          :key="project.id"
-          :project="project"
-        />
+          :class="[
+            index === 0 ? 'md:col-span-2 md:row-span-1' : '',
+          ]"
+        >
+          <ProjectCard :project="project" :class="{ 'h-full': true }" />
+        </div>
      </div>
    </div>
  </section>
@@ -7,18 +7,22 @@ const localePath = useLocalePath()
  <section class="relative min-h-[80vh] flex items-center overflow-hidden bg-white dark:bg-gray-950">
    <!-- Dot grid background pattern -->
    <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" aria-hidden="true">
-      <div class="absolute inset-0" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
+      <div class="absolute inset-0"
+        style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
    </div>

    <!-- Gradient glow -->
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true" />
+    <div
+      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl pointer-events-none"
+      aria-hidden="true" />

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-16 md:py-24">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Left: Content -->
        <div class="space-y-8">
          <!-- Status badge -->
-          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 dark:bg-brand-500/15 border border-brand-500/20">
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 dark:bg-brand-500/15 border border-brand-500/20">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75" />
              <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500" />
@@ -28,8 +32,11 @@ const localePath = useLocalePath()

          <div class="space-y-4">
            <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]">
-              <span class="text-gray-900 dark:text-white">{{ t('home.title').split(' ').slice(0, -2).join(' ') }} </span>
-              <span class="bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent">{{ t('home.title').split(' ').slice(-2).join(' ') }}</span>
+              <span class="text-gray-900 dark:text-white">{{ t('home.title').split(' ').slice(0, -2).join(' ') }}
+              </span>
+              <span
+                class="bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent">{{
+                  t('home.title').split(' ').slice(-2).join(' ') }}</span>
            </h1>
            <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-xl leading-relaxed">
              {{ t('home.subtitle') }}
@@ -38,15 +45,27 @@ const localePath = useLocalePath()

          <!-- CTA Buttons -->
          <div class="flex flex-col sm:flex-row gap-3">
-            <UButton :to="localePath('/projects')" size="xl" icon="i-lucide-arrow-right" trailing class="font-semibold">
+            <NuxtLink
+              :to="localePath('/projects')"
+              class="inline-flex items-center justify-center gap-2 px-6 py-3 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"
+            >
              {{ t('home.cta.viewProjects') }}
-            </UButton>
-            <UButton :to="localePath('/fiverr')" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing class="font-semibold">
+              <UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
+            </NuxtLink>
+            <NuxtLink
+              :to="localePath('/fiverr')"
+              class="inline-flex items-center justify-center gap-2 px-6 py-3 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"
+            >
              {{ t('nav.fiverr') }}
-            </UButton>
-            <UButton :to="localePath('/contact')" size="xl" variant="ghost" icon="i-lucide-message-circle" trailing class="font-semibold">
+              <UIcon name="i-lucide-external-link" class="w-4 h-4" />
+            </NuxtLink>
+            <NuxtLink
+              :to="localePath('/contact')"
+              class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-gray-600 dark:text-gray-400 hover:text-brand-500 font-semibold text-sm transition-all duration-200"
+            >
              {{ t('home.cta.contactMe') }}
-            </UButton>
+              <UIcon name="i-lucide-message-circle" class="w-4 h-4" />
+            </NuxtLink>
          </div>
        </div>

@@ -54,9 +73,11 @@ const localePath = useLocalePath()
        <div class="hidden lg:block" aria-hidden="true">
          <div class="relative">
            <!-- Terminal window -->
-            <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 shadow-2xl shadow-brand-500/5 overflow-hidden">
+            <div
+              class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 shadow-2xl shadow-brand-500/5 overflow-hidden">
              <!-- Title bar -->
-              <div class="flex items-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700/50">
+              <div
+                class="flex items-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700/50">
                <div class="flex gap-1.5">
                  <div class="w-3 h-3 rounded-full bg-red-400/80" />
                  <div class="w-3 h-3 rounded-full bg-yellow-400/80" />
@@ -75,11 +96,13 @@ const localePath = useLocalePath()
                </div>
                <div class="pl-6">
                  <span class="text-purple-500 dark:text-purple-400">name</span><span class="text-gray-500">: </span>
-                  <span class="text-amber-600 dark:text-amber-400">'Killian Dalcin'</span><span class="text-gray-500">,</span>
+                  <span class="text-amber-600 dark:text-amber-400">'Killian\' DAL-CIN'</span><span
+                    class="text-gray-500">,</span>
                </div>
                <div class="pl-6">
                  <span class="text-purple-500 dark:text-purple-400">role</span><span class="text-gray-500">: </span>
-                  <span class="text-amber-600 dark:text-amber-400">'Full Stack Dev'</span><span class="text-gray-500">,</span>
+                  <span class="text-amber-600 dark:text-amber-400">'Full Stack Dev'</span><span
+                    class="text-gray-500">,</span>
                </div>
                <div class="pl-6">
                  <span class="text-purple-500 dark:text-purple-400">skills</span><span class="text-gray-500">: [</span>
@@ -91,7 +114,8 @@ const localePath = useLocalePath()
                </div>
                <div class="pl-10">
                  <span class="text-amber-600 dark:text-amber-400">'Java'</span><span class="text-gray-500">, </span>
-                  <span class="text-amber-600 dark:text-amber-400">'Hytale Plugins'</span><span class="text-gray-500">,</span>
+                  <span class="text-amber-600 dark:text-amber-400">'Hytale Plugins'</span><span
+                    class="text-gray-500">,</span>
                </div>
                <div class="pl-10">
                  <span class="text-amber-600 dark:text-amber-400">'Docker'</span><span class="text-gray-500">, </span>
@@ -101,7 +125,8 @@ const localePath = useLocalePath()
                  <span class="text-gray-500">],</span>
                </div>
                <div class="pl-6">
-                  <span class="text-purple-500 dark:text-purple-400">available</span><span class="text-gray-500">: </span>
+                  <span class="text-purple-500 dark:text-purple-400">available</span><span class="text-gray-500">:
+                  </span>
                  <span class="text-brand-500">true</span>
                </div>
                <div>
@@ -116,11 +141,13 @@ const localePath = useLocalePath()
            </div>

            <!-- Floating decoration cards -->
-            <div class="absolute -top-4 -right-4 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
+            <div
+              class="absolute -top-4 -right-4 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
              <span class="w-2 h-2 rounded-full bg-brand-500" />
              <span class="text-gray-700 dark:text-gray-300">50+ projects</span>
            </div>
-            <div class="absolute -bottom-3 -left-3 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
+            <div
+              class="absolute -bottom-3 -left-3 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
              <UIcon name="i-lucide-star" class="text-yellow-400 w-3.5 h-3.5" />
              <span class="text-gray-700 dark:text-gray-300">5.0 rating</span>
            </div>
@@ -26,27 +26,36 @@ const services = computed(() => [
 </script>

 <template>
-  <section class="py-20 md:py-28 px-4 bg-gray-50 dark:bg-gray-900/50 rounded-3xl mx-2 md:mx-0">
-    <div class="max-w-7xl mx-auto">
-      <div class="text-center mb-14">
-        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Services</span>
-        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.services.title') }}</h2>
-        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('home.services.subtitle') }}</p>
+  <section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+    <!-- Subtle background gradient -->
+    <div class="absolute inset-0 bg-gray-50/80 dark:bg-gray-900/40" aria-hidden="true" />
+    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-500/5 dark:bg-brand-500/8 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4 pointer-events-none" aria-hidden="true" />
+
+    <div class="relative z-10 max-w-7xl mx-auto">
+      <div class="text-center mb-16">
+        <span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// services</span>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('home.services.title') }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl mx-auto leading-relaxed">{{ t('home.services.subtitle') }}</p>
      </div>

-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-6">
        <div
          v-for="(service, index) in services"
          :key="index"
-          class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5 hover:-translate-y-0.5"
+          class="group relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-7 sm:p-8 transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1"
        >
-          <!-- Icon -->
-          <div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mb-5 transition-colors group-hover:bg-brand-500/20">
-            <UIcon :name="service.icon" class="text-brand-600 dark:text-brand-400 text-xl" />
-          </div>
+          <!-- Hover glow effect -->
+          <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-500/0 to-emerald-500/0 group-hover:from-brand-500/5 group-hover:to-emerald-500/5 transition-all duration-500 pointer-events-none" aria-hidden="true" />

-          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ service.title }}</h3>
-          <p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ service.description }}</p>
+          <div class="relative z-10">
+            <!-- Icon -->
+            <div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mb-6 transition-all duration-300 group-hover:bg-brand-500/20 group-hover:scale-110">
+              <UIcon :name="service.icon" class="text-brand-600 dark:text-brand-400 text-xl" />
+            </div>
+
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">{{ service.title }}</h3>
+            <p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ service.description }}</p>
+          </div>
        </div>
      </div>
    </div>
@@ -5,40 +5,43 @@ const { t } = useI18n()
 </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-7xl mx-auto">
-      <div class="text-center mb-14">
-        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">{{ t('testimonials.title') }}</span>
-        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('testimonials.title') }}</h2>
-        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('testimonials.subtitle') }}</p>
+      <div class="text-center mb-16">
+        <span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// testimonials</span>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('testimonials.title') }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl mx-auto leading-relaxed">{{ t('testimonials.subtitle') }}</p>

        <!-- Stats row -->
-        <div class="flex justify-center gap-10 mt-10">
-          <div class="text-center">
-            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.totalReviews }}</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.clients') }}</p>
+        <div class="flex justify-center gap-8 sm:gap-12 mt-12">
+          <div class="text-center group">
+            <p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.totalReviews }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.clients') }}</p>
          </div>
-          <div class="w-px bg-gray-200 dark:bg-gray-800" />
-          <div class="text-center">
-            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.averageRating }}/5</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.rating') }}</p>
+          <div class="w-px bg-gradient-to-b from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
+          <div class="text-center group">
+            <p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.averageRating }}/5</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.rating') }}</p>
          </div>
-          <div class="w-px bg-gray-200 dark:bg-gray-800" />
-          <div class="text-center">
-            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.projectsCompleted }}</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.projects') }}</p>
+          <div class="w-px bg-gradient-to-b from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
+          <div class="text-center group">
+            <p class="text-4xl sm:text-5xl font-black bg-gradient-to-b from-brand-400 to-brand-600 bg-clip-text text-transparent">{{ testimonialsStats.projectsCompleted }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 font-medium">{{ t('testimonials.stats.projects') }}</p>
          </div>
        </div>
      </div>

      <!-- Horizontal scrolling testimonials -->
-      <div class="flex gap-6 overflow-x-auto pb-4 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
+      <div class="flex gap-5 overflow-x-auto overflow-y-visible pb-8 -mx-4 px-4 pt-2 snap-x snap-mandatory scrollbar-hide">
        <div
          v-for="(testimonial, index) in testimonials"
          :key="index"
-          class="flex-none w-[340px] sm:w-[380px] snap-start"
+          class="flex-none w-[340px] sm:w-[400px] snap-start"
        >
-          <div class="h-full rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 flex flex-col gap-4 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5">
+          <div class="h-full relative rounded-2xl border border-gray-200/80 dark:border-gray-800/50 bg-white/80 dark:bg-gray-900/60 backdrop-blur-sm p-7 flex flex-col gap-5 transition-all duration-300 hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1">
+            <!-- Decorative quote mark -->
+            <div class="absolute top-5 right-6 text-6xl font-serif text-brand-500/10 dark:text-brand-400/10 leading-none select-none pointer-events-none" aria-hidden="true">"</div>
+
            <!-- Rating stars -->
            <div class="flex gap-1">
              <UIcon
@@ -51,23 +54,23 @@ const { t } = useI18n()
            </div>

            <!-- Quote -->
-            <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed flex-1 italic">
+            <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed flex-1 relative z-10">
              "{{ testimonial.content }}"
            </p>

            <!-- Author -->
-            <div class="flex items-center gap-3 pt-2 border-t border-gray-100 dark:border-gray-800">
+            <div class="flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-gray-800/60">
              <NuxtImg
                :src="testimonial.avatar"
                :alt="testimonial.name"
                width="40"
                height="40"
-                class="rounded-full ring-2 ring-gray-100 dark:ring-gray-800"
+                class="rounded-full ring-2 ring-brand-500/20 dark:ring-brand-400/20"
                loading="lazy"
              />
              <div>
                <p class="font-semibold text-sm text-gray-900 dark:text-white">{{ testimonial.name }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
              </div>
            </div>
          </div>