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