✨ Add testimonials page with personality-styled cards (Story 2.6)

- Add testimonials table migration with personality enum
- Create Testimonial model with HasTranslations trait
- Add TestimonialSeeder with 4 test testimonials
- Create TestimonialController and TestimonialResource
- Add useFetchTestimonials composable
- Create TestimonialCard component with personality-based styling
- Add temoignages.vue page with loading/error states
- Add testimonials translations in FR/EN

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/components/feature/TestimonialCard.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { Testimonial, PersonalityType } from '~/types/testimonial'
+
+interface Props {
+  testimonial: Testimonial
+}
+
+const props = defineProps<Props>()
+
+const personalityConfig: Record<PersonalityType, { border: string; avatar: string; badge: string; icon: string }> = {
+  sage: {
+    border: 'border-emerald-500/30',
+    avatar: 'ring-emerald-500',
+    badge: 'bg-emerald-500/20 text-emerald-400',
+    icon: '🧙',
+  },
+  sarcastique: {
+    border: 'border-purple-500/30',
+    avatar: 'ring-purple-500',
+    badge: 'bg-purple-500/20 text-purple-400',
+    icon: '😏',
+  },
+  enthousiaste: {
+    border: 'border-amber-500/30',
+    avatar: 'ring-amber-500',
+    badge: 'bg-amber-500/20 text-amber-400',
+    icon: '🎉',
+  },
+  professionnel: {
+    border: 'border-sky-500/30',
+    avatar: 'ring-sky-500',
+    badge: 'bg-sky-500/20 text-sky-400',
+    icon: '💼',
+  },
+}
+
+const config = computed(() => personalityConfig[props.testimonial.personality])
+
+const initials = computed(() => {
+  const names = props.testimonial.name.split(' ')
+  return names.map(n => n[0]).join('').toUpperCase().slice(0, 2)
+})
+</script>
+
+<template>
+  <article
+    class="testimonial-card group relative rounded-xl border bg-sky-dark/50 p-6 transition-all duration-300 hover:bg-sky-dark/70"
+    :class="config.border"
+  >
+    <!-- Personality badge -->
+    <span
+      class="absolute right-4 top-4 rounded-full px-2 py-1 text-xs font-medium"
+      :class="config.badge"
+    >
+      {{ config.icon }} {{ testimonial.personality }}
+    </span>
+
+    <!-- Quote icon -->
+    <div class="mb-4 text-4xl text-sky-500/30">"</div>
+
+    <!-- Testimonial text -->
+    <blockquote class="mb-6 text-lg italic text-gray-300 leading-relaxed">
+      {{ testimonial.text }}
+    </blockquote>
+
+    <!-- Author info -->
+    <footer class="flex items-center gap-4">
+      <!-- Avatar -->
+      <div
+        v-if="testimonial.avatar"
+        class="h-12 w-12 overflow-hidden rounded-full ring-2"
+        :class="config.avatar"
+      >
+        <img
+          :src="testimonial.avatar"
+          :alt="testimonial.name"
+          class="h-full w-full object-cover"
+        >
+      </div>
+      <div
+        v-else
+        class="flex h-12 w-12 items-center justify-center rounded-full bg-sky-dark ring-2 text-sm font-bold text-sky-400"
+        :class="config.avatar"
+      >
+        {{ initials }}
+      </div>
+
+      <!-- Name and role -->
+      <div class="flex-1">
+        <cite class="block font-semibold text-white not-italic">
+          {{ testimonial.name }}
+        </cite>
+        <div class="text-sm text-gray-400">
+          {{ testimonial.role }}
+          <template v-if="testimonial.company">
+            · {{ testimonial.company }}
+          </template>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Project link if available -->
+    <NuxtLink
+      v-if="testimonial.project"
+      :to="`/projets/${testimonial.project.slug}`"
+      class="mt-4 inline-flex items-center gap-2 text-sm text-sky-400 transition-colors hover:text-sky-300"
+    >
+      <span>📁</span>
+      <span>{{ testimonial.project.title }}</span>
+      <span class="transition-transform group-hover:translate-x-1">→</span>
+    </NuxtLink>
+  </article>
+</template>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+  .testimonial-card {
+    transform: translateY(0);
+  }
+
+  .testimonial-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 40px rgba(14, 165, 233, 0.1);
+  }
+}
+</style>

frontend/app/composables/useFetchTestimonials.ts

@@ -0,0 +1,15 @@
+import type { TestimonialsResponse } from '~/types/testimonial'
+
+export function useFetchTestimonials() {
+  const config = useRuntimeConfig()
+  const { locale } = useI18n()
+
+  return useFetch<TestimonialsResponse>('/testimonials', {
+    baseURL: config.public.apiUrl as string,
+    headers: {
+      'X-API-Key': config.public.apiKey as string,
+      'Accept-Language': locale.value,
+    },
+    transform: (response) => response,
+  })
+}

frontend/app/pages/temoignages.vue

@@ -1,16 +1,128 @@
 <template>
-  <div class="min-h-screen p-8">
-    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.testimonials.title') }}</h1>
-    <p class="mt-4 text-sky-text/70">{{ $t('pages.testimonials.description') }}</p>
+  <div class="min-h-screen">
+    <!-- Hero section -->
+    <section class="relative overflow-hidden bg-gradient-to-b from-sky-dark to-sky-darker py-16">
+      <div class="container mx-auto px-4">
+        <h1 class="text-center text-4xl font-narrative font-bold text-white md:text-5xl">
+          {{ $t('testimonials.page_title') }}
+        </h1>
+        <p class="mx-auto mt-4 max-w-2xl text-center text-lg text-gray-400">
+          {{ $t('testimonials.page_description') }}
+        </p>
+      </div>
+
+      <!-- Decorative elements -->
+      <div class="absolute -left-20 top-20 h-40 w-40 rounded-full bg-sky-500/5 blur-3xl" />
+      <div class="absolute -right-20 bottom-10 h-60 w-60 rounded-full bg-purple-500/5 blur-3xl" />
+    </section>
+
+    <!-- Testimonials grid -->
+    <section class="container mx-auto px-4 py-12">
+      <!-- Loading state -->
+      <div v-if="status === 'pending'" class="grid gap-6 md:grid-cols-2">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="h-64 animate-pulse rounded-xl bg-sky-dark/50"
+        />
+      </div>
+
+      <!-- Error state -->
+      <div
+        v-else-if="error"
+        class="mx-auto max-w-md rounded-xl bg-red-500/10 p-8 text-center"
+      >
+        <span class="text-4xl">🕷️</span>
+        <h2 class="mt-4 text-xl font-semibold text-red-400">
+          {{ $t('testimonials.load_error') }}
+        </h2>
+        <button
+          class="mt-4 rounded-lg bg-red-500/20 px-4 py-2 text-red-400 transition-colors hover:bg-red-500/30"
+          @click="refresh()"
+        >
+          {{ $t('common.retry') }}
+        </button>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-else-if="!testimonials.length"
+        class="mx-auto max-w-md rounded-xl bg-sky-dark/50 p-8 text-center"
+      >
+        <span class="text-4xl">💬</span>
+        <h2 class="mt-4 text-xl font-semibold text-gray-300">
+          {{ $t('testimonials.no_testimonials') }}
+        </h2>
+      </div>
+
+      <!-- Testimonials -->
+      <div v-else class="grid gap-6 md:grid-cols-2">
+        <TestimonialCard
+          v-for="testimonial in testimonials"
+          :key="testimonial.id"
+          :testimonial="testimonial"
+          class="testimonial-enter"
+          :style="{ animationDelay: `${testimonial.display_order * 100}ms` }"
+        />
+      </div>
+    </section>
+
+    <!-- CTA section -->
+    <section class="container mx-auto px-4 pb-16">
+      <div class="rounded-xl bg-gradient-to-r from-sky-500/10 to-purple-500/10 p-8 text-center">
+        <h2 class="text-2xl font-semibold text-white">
+          {{ $t('testimonials.cta_title') }}
+        </h2>
+        <p class="mt-2 text-gray-400">
+          {{ $t('testimonials.cta_description') }}
+        </p>
+        <NuxtLink
+          to="/contact"
+          class="mt-4 inline-block rounded-lg bg-sky-500 px-6 py-3 font-medium text-white transition-colors hover:bg-sky-400"
+        >
+          {{ $t('testimonials.cta_button') }}
+        </NuxtLink>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Testimonial } from '~/types/testimonial'
+
 const { setPageMeta } = useSeo()
 const { t } = useI18n()
+const progressStore = useProgressStore()
 
 setPageMeta({
-  title: t('pages.testimonials.title'),
-  description: t('pages.testimonials.description'),
+  title: t('testimonials.page_title'),
+  description: t('testimonials.page_description'),
 })
+
+onMounted(() => {
+  progressStore.visitSection('testimonials')
+})
+
+const { data, status, error, refresh } = await useFetchTestimonials()
+
+const testimonials = computed<Testimonial[]>(() => data.value?.data ?? [])
 </script>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+  .testimonial-enter {
+    animation: testimonial-fade-in 0.5s ease-out both;
+  }
+
+  @keyframes testimonial-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+</style>

frontend/app/types/testimonial.ts

@@ -0,0 +1,22 @@
+export type PersonalityType = 'sage' | 'sarcastique' | 'enthousiaste' | 'professionnel'
+
+export interface Testimonial {
+  id: number
+  name: string
+  role: string
+  company: string | null
+  avatar: string | null
+  text: string
+  personality: PersonalityType
+  display_order: number
+  project?: {
+    id: number
+    slug: string
+    title: string
+  } | null
+}
+
+export interface TestimonialsResponse {
+  data: Testimonial[]
+  meta: { lang: string }
+}