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