Deploy

2026-06-23 08:39:12 +00:00
parent 97a5598cb7
commit fa355047b5
1 changed files with 61 additions and 0 deletions
@@ -0,0 +1,61 @@
+'use client'
+
+import { Star } from 'lucide-react'
+
+export default function StreetCredSection() {
+  const testimonials = [
+    {
+      quote: "S.A.W tees hit different. Quality heavyweight cotton, no cheap print fade after ten washes. Real kasi vibes.",
+      name: "Lindiwe M.",
+      role: "Diepsloot, JHB"
+    },
+    {
+      quote: "Bought the 'Uprising' drop for my son — he wears it every weekend. The fit is clean, the graphic speaks.",
+      name: "Thabo N.",
+      role: "Tembisa, Gauteng"
+    },
+    {
+      quote: "Smiso knew what we needed. Finally a brand that respects both street culture and quality. Big ups S.A.W!",
+      name: "Aphiwe K.",
+      role: "Khayelitsha, CPT"
+    }
+  ]
+
+  return (
+    <section
+      id="street-cred"
+      data-vula-section="streetcred"
+      className="bg-neutral-50 py-20"
+    >
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-black text-[#18181b] mb-2 uppercase tracking-tight">
+          Street Cred
+        </h2>
+        <p className="text-neutral-600 mb-12 max-w-2xl">
+          Real voices from the streets that wear S.A.W.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((t, i) => (
+            <div
+              key={i}
+              className="bg-white rounded-xl border border-neutral-200 p-6 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
+            >
+              <div className="flex items-center gap-1 mb-4">
+                {[...Array(5)].map((_, j) => (
+                  <Star key={j} className="w-4 h-4 fill-[#18181b] text-[#18181b]" />
+                ))}
+              </div>
+              <p className="text-neutral-700 mb-4 leading-relaxed">
+                &ldquo;{t.quote}&rdquo;
+              </p>
+              <div className="border-t border-neutral-200 pt-4 mt-auto">
+                <p className="font-bold text-[#18181b]">{t.name}</p>
+                <p className="text-sm text-neutral-500">{t.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}