Deploy

src/components/sections/FamShoutoutsSection.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import Image from 'next/image'
+import { Star } from 'lucide-react'
+
+export default function FamShoutoutsSection() {
+  const shoutouts = [
+    {
+      name: 'Thandi M.',
+      handle: '@thandi_in_the_hood',
+      quote: 'Mzansi Urban hoodie got me compliments all the way from Soweto to Sandton. This is not just a brand — it is a movement.',
+      image: 'https://images.pexels.com/photos/5560606/pexels-photo-5560606.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+    {
+      name: 'Lunga K.',
+      handle: '@lunga_steez',
+      quote: 'My first African-print cap arrived and immediately became my signature piece. The quality tells you they care.',
+      image: 'https://images.pexels.com/photos/5417767/pexels-photo-5417767.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+    {
+      name: 'Naledi R.',
+      handle: '@naledi_streetculture',
+      quote: 'Every drop sells out in hours. That is the energy. Mzansi Urban understands kasi culture like nobody else.',
+      image: 'https://images.pexels.com/photos/36788996/pexels-photo-36788996.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+  ]
+
+  return (
+    <section data-vula-section="famshoutouts" id="fam-shoutouts" className="py-20 bg-[#18181b] text-white">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <span className="text-[#16a34a] font-bold uppercase tracking-widest text-sm">Real Talk</span>
+          <h2 className="text-4xl md:text-5xl font-black uppercase mt-2">Fam Shoutouts</h2>
+          <p className="text-gray-400 mt-2 max-w-md mx-auto">What the streets are saying about Mzansi Urban.</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {shoutouts.map((s, i) => (
+            <div
+              key={i}
+              className="border-2 border-[#16a34a] shadow-[4px_4px_0_0_#16a34a] p-6 bg-white text-[#18181b] flex flex-col items-center text-center"
+            >
+              <div className="relative w-20 h-20 rounded-full overflow-hidden border-2 border-[#18181b] mb-4">
+                <Image
+                  src={s.image}
+                  alt={s.name}
+                  fill
+                  sizes="80px"
+                  className="object-cover"
+                />
+              </div>
+              <div className="flex gap-1 text-yellow-500 mb-3">
+                <Star className="w-4 h-4 fill-current" />
+                <Star className="w-4 h-4 fill-current" />
+                <Star className="w-4 h-4 fill-current" />
+                <Star className="w-4 h-4 fill-current" />
+                <Star className="w-4 h-4 fill-current" />
+              </div>
+              <p className="italic leading-relaxed mb-4">&ldquo;{s.quote}&rdquo;</p>
+              <p className="font-bold uppercase text-sm">{s.name}</p>
+              <p className="text-xs text-gray-500">{s.handle}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-10">
+          <a
+            href="https://www.instagram.com/mzansiurban"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block border-2 border-white px-6 py-3 font-bold uppercase tracking-wider hover:bg-[#16a34a] hover:border-[#16a34a] transition-all"
+          >
+            Tag us for a chance to be featured
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}