skycel
1cba01595b
- 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>
127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<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>
|