Deploy

2026-06-23 08:47:43 +00:00
parent 24b73df407
commit f20c1a6c00
1 changed files with 48 additions and 0 deletions
@@ -0,0 +1,48 @@
 'use client'
 export default function TestimonialCarouselSection() {
  const testimonials = [
    {
      name: 'Thandi M.',
      role: 'Student, Durban',
      quote: 'S.A.W tees are the first quality T-shirts I found that actually fit right and don\'t shrink. Smiso really understood what we needed.',
      image: 'https://images.pexels.com/photos/1317712/pexels-photo-1317712.jpeg?auto=compress&cs=tinysrgb&h=350'
    },
    {
      name: 'Lungelo K.',
      role: 'Influencer, Joburg',
      quote: 'The Khumalo Origin collection dropped exactly what streetwear in SA needed — minimalist, bold, and unapologetically young.',
      image: 'https://images.pexels.com/photos/2035464/pexels-photo-2035464.jpeg?auto=compress&cs=tinysrgb&h=350'
    },
    {
      name: 'Anele Dlamini',
      role: 'Content creator, Cape Town',
      quote: 'I\'ve been wearing my S.A.W tee almost daily — holds colour, breathable fabric, and the look just works.',
      image: 'https://images.pexels.com/photos/2035464/pexels-photo-2035464.jpeg?auto=compress&cs=tinysrgb&h=350'
    }
  ]
  return (
    <section data-vula-section="testimonialcarousel" id="testimonials" className="py-20 bg-[#ffffff]">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-[#111827] mb-12 text-center uppercase tracking-tight">Real Talk</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <div key={i} className="rounded-xl border border-[#e5e7eb] bg-white p-6 shadow-[var(--shadow-card)] transition-all duration-200 ease-out hover:shadow-[var(--shadow-lifted)] hover:-translate-y-1">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden bg-[#18181b]">
                  <img src={t.image} alt={t.name} className="w-full h-full object-cover" />
                </div>
                <div>
                  <p className="font-bold text-[#18181b] text-sm">{t.name}</p>
                  <p className="text-xs text-[#dc2626] font-medium">{t.role}</p>
                </div>
              </div>
              <p className="text-[#111827]/80 text-sm leading-relaxed border-l-4 border-[#dc2626] pl-4 italic">"{t.quote}"</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
 }