Deploy

2026-07-27 18:59:57 +00:00
parent c6e8668651
commit 686743210f
1 changed files with 80 additions and 0 deletions
@@ -0,0 +1,80 @@
+'use client'
+
+import { useVulaContent } from "@/hooks/useVulaContent"
+import Image from "next/image"
+
+export default function RepTheStreetsSection() {
+  const { items, loading } = useVulaContent("posts")
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-[#ea580c] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="rep-the-streets"
+      data-vula-section="rep-the-streets"
+      data-vula-cms="posts"
+      className="bg-white py-20 px-4"
+    >
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-4xl md:text-5xl font-black uppercase tracking-tight text-[#18181b] mb-2">
+          THE STREETS SPEAK
+        </h2>
+        <p className="text-[#ea580c] uppercase tracking-widest text-sm mb-10">
+          Real people. Real fit. Real talk.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {items.slice(0, 6).map((item) => {
+            const d = item.data as { title?: string; excerpt?: string; author?: string; image?: string; category?: string }
+            const stars = 5 // always show 5 stars as social proof
+            return (
+              <div
+                key={item.id}
+                className="bg-[#18181b] border-2 border-[#ea580c] shadow-[6px_6px_0_0_#16a34a] rounded-none p-6"
+              >
+                <span className="text-yellow-400 text-lg">
+                  {"★".repeat(stars)}
+                </span>
+                {d.excerpt && (
+                  <p className="text-gray-200 text-base italic mt-2 leading-relaxed">
+                    &ldquo;{d.excerpt}&rdquo;
+                  </p>
+                )}
+                <div className="flex items-center gap-3 mt-5 pt-4 border-t border-[#ea580c]/40">
+                  {d.image && (
+                    <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-[#ea580c]">
+                      <Image
+                        src={d.image}
+                        alt={d.author ?? "Testimonial"}
+                        width={48}
+                        height={48}
+                        className="object-cover w-full h-full"
+                      />
+                    </div>
+                  )}
+                  <div>
+                    <p className="text-white font-bold uppercase text-sm">
+                      {d.author ?? "Street Fam"}
+                    </p>
+                    {d.category && (
+                      <p className="text-[#ea580c] text-xs uppercase tracking-wider">
+                        {d.category}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}