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>
+  )
+}