117 lines
4.4 KiB
React
117 lines
4.4 KiB
React
import { motion } from 'framer-motion'
|
|
import { FiStar } from 'react-icons/fi'
|
|
import { testimonials } from '../data/mutuelles'
|
|
|
|
function Stars({ rating }) {
|
|
return (
|
|
<div className="flex gap-0.5">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<FiStar
|
|
key={i}
|
|
size={13}
|
|
className={i <= rating ? 'text-amber-400' : 'text-slate-200'}
|
|
style={i <= rating ? { fill: 'currentColor' } : {}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Testimonials() {
|
|
return (
|
|
<section className="py-20 bg-slate-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<div className="text-center mb-14">
|
|
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
|
|
Ce que nos clients disent de nous
|
|
</h2>
|
|
<p className="text-slate-500 max-w-xl mx-auto">
|
|
Découvrez les témoignages de clients satisfaits qui nous font confiance
|
|
pour leurs assurances santé.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{testimonials.map((t, i) => (
|
|
<motion.div
|
|
key={t.id}
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.12, duration: 0.45 }}
|
|
className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all"
|
|
>
|
|
{/* Quote mark */}
|
|
<div className="text-4xl font-serif text-[#9CCC8A]/30 leading-none mb-2 select-none">
|
|
"
|
|
</div>
|
|
|
|
<p className="text-sm text-slate-600 leading-relaxed mb-5">
|
|
{t.text}
|
|
</p>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-sm flex-shrink-0"
|
|
style={{ backgroundColor: t.avatarColor }}
|
|
>
|
|
{t.avatar}
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-sm text-slate-900">{t.name}</div>
|
|
<div className="text-xs text-slate-400">{t.role}</div>
|
|
</div>
|
|
</div>
|
|
<Stars rating={t.rating} />
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Trust bar */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.45, delay: 0.3 }}
|
|
className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 bg-white rounded-2xl border border-slate-100 shadow-sm px-8 py-5"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex -space-x-2">
|
|
{[
|
|
{ initials: 'AB', color: '#2563EB' },
|
|
{ initials: 'CL', color: '#DC2626' },
|
|
{ initials: 'MK', color: '#059669' },
|
|
{ initials: 'JD', color: '#7C3AED' },
|
|
].map((a) => (
|
|
<div
|
|
key={a.initials}
|
|
className="w-8 h-8 rounded-full border-2 border-white flex items-center justify-center text-white text-[10px] font-bold"
|
|
style={{ backgroundColor: a.color }}
|
|
>
|
|
{a.initials}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span className="text-sm font-bold text-slate-900">250 000+</span>
|
|
<span className="text-sm text-slate-500">utilisateurs satisfaits</span>
|
|
</div>
|
|
<div className="hidden sm:block w-px h-6 bg-slate-200" />
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex gap-0.5">
|
|
{[1,2,3,4,5].map((i) => (
|
|
<FiStar key={i} size={14} className="text-amber-400" style={{ fill: 'currentColor' }} />
|
|
))}
|
|
</div>
|
|
<span className="text-sm font-bold text-slate-900">4.9 / 5</span>
|
|
<span className="text-sm text-slate-500">note moyenne</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|