Vula Builder
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
export default function ClientTestimonialsSection() {
|
|
const testimonials = [
|
|
{
|
|
name: 'Bongani',
|
|
outcome: 'Acquitted',
|
|
quote: 'They believed in my innocence when no one else would. Mashobane & Associate gave me my life back.',
|
|
},
|
|
{
|
|
name: 'Portia',
|
|
outcome: 'Charges Dropped',
|
|
quote: 'I was terrified of going to prison for something I didn\'t do. Mr. Mashobane exposed the flaws in the state\'s case in court.',
|
|
},
|
|
{
|
|
name: 'Teboho',
|
|
outcome: 'Reduced Sentence',
|
|
quote: 'The team fought for me like family. Their knowledge of South African criminal procedure turned my situation around.',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section data-vula-section="clienttestimonials" id="client-testimonials" className="py-20 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-[#000080]">Real People, Real Results</h2>
|
|
<p className="text-[#36454F] mt-2 max-w-2xl mx-auto">
|
|
Hear from clients whose lives we have helped turn around.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{testimonials.map((t, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-white rounded-xl p-6 border border-neutral-100 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
|
|
>
|
|
<p className="text-[#36454F] italic mb-4">“{t.quote}”</p>
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-semibold text-[#000080]">{t.name}</span>
|
|
<span className="inline-block bg-[#d4af37] text-white text-xs font-bold px-3 py-1 rounded-full">
|
|
{t.outcome}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |