95 lines
3.1 KiB
React
95 lines
3.1 KiB
React
|
/**
|
||
|
|
* Testimonials.jsx - "Wat deelnemers zeggen" sectie
|
||
|
|
*
|
||
|
|
* 3 placeholder testimonial cards met quote decoratie.
|
||
|
|
* Bevat avatar met initialen, naam en functie.
|
||
|
|
*/
|
||
|
|
|
||
|
|
function Testimonials() {
|
||
|
|
// Placeholder testimonials - worden vervangen na eerste workshops
|
||
|
|
const testimonials = [
|
||
|
|
{
|
||
|
|
quote: "[Quote over specifieke ervaring of doorbraak - aha-moment tijdens de workshop]",
|
||
|
|
name: "Naam Deelnemer",
|
||
|
|
role: "Functie / Bedrijf",
|
||
|
|
initials: "ND"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
quote: "[Quote over praktische toepassing na de workshop - hoe het hun werk heeft verbeterd]",
|
||
|
|
name: "Naam Deelnemer",
|
||
|
|
role: "Functie / Bedrijf",
|
||
|
|
initials: "ND"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
quote: "[Quote over de begeleiding en sfeer - persoonlijke aandacht en groepsdynamiek]",
|
||
|
|
name: "Naam Deelnemer",
|
||
|
|
role: "Functie / Bedrijf",
|
||
|
|
initials: "ND"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="section">
|
||
|
|
<div className="container-page">
|
||
|
|
{/* Section title */}
|
||
|
|
<h2 className="heading-2 text-center mb-4">
|
||
|
|
Wat deelnemers zeggen
|
||
|
|
</h2>
|
||
|
|
<p className="text-warm-500 text-center mb-12 italic">
|
||
|
|
Testimonials worden toegevoegd na de eerste workshops
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Testimonials grid */}
|
||
|
|
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||
|
|
{testimonials.map((testimonial, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="card relative"
|
||
|
|
>
|
||
|
|
{/* Quote icon decoratie */}
|
||
|
|
<div className="absolute -top-3 -left-2">
|
||
|
|
<svg
|
||
|
|
className="w-10 h-10 text-coral-200"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Quote tekst */}
|
||
|
|
<blockquote className="mt-4 mb-6">
|
||
|
|
<p className="text-warm-600 italic leading-relaxed">
|
||
|
|
"{testimonial.quote}"
|
||
|
|
</p>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
{/* Auteur info */}
|
||
|
|
<div className="flex items-center gap-3 mt-auto">
|
||
|
|
{/* Avatar met initialen */}
|
||
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-coral-100 to-teal-100 flex items-center justify-center">
|
||
|
|
<span className="text-warm-500 font-semibold">
|
||
|
|
{testimonial.initials}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Naam en functie */}
|
||
|
|
<div>
|
||
|
|
<p className="font-semibold text-warm-900">
|
||
|
|
{testimonial.name}
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-warm-500">
|
||
|
|
{testimonial.role}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Testimonials;
|