Deploy

src/components/sections/GallerySection.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import Image from 'next/image'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function GallerySection() {
+  const { items, loading } = useVulaContent('gallery')
+
+  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="artisans-gallery" data-vula-section="gallery" data-vula-cms="gallery" className="bg-[#36454F] py-20 text-[#f9f5f4]">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-12 max-w-2xl">
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#6b8e23]">From Bulwer weaving circles to Durban lounges</p>
+          <h2 className="mt-2 font-display text-3xl md:text-5xl">A visual diary of making and home</h2>
+        </div>
+
+        <div className="grid auto-rows-[170px] grid-cols-2 gap-3 md:grid-cols-4">
+          {items.map((item, index) => {
+            const d = item.data as { title?: string; description?: string; image?: string }
+            const span = index % 4 === 0 ? "md:col-span-2 md:row-span-2" : index % 3 === 0 ? "md:col-span-2" : ''
+            return (
+              <figure key={item.id} className={`group relative overflow-hidden rounded-2xl ${span}`}>
+                {d?.image ? (
+                  <Image src={d.image} alt={d.title || 'Gallery image'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-500 ease-out group-hover:scale-105" />
+                ) : (
+                  <div className="h-full bg-[#21140d]/40" />
+                )}
+                <div className="absolute inset-0 bg-gradient-to-t from-[#21140d]/70 via-transparent to-transparent" />
+                <figcaption className="absolute bottom-0 left-0 right-0 p-5">
+                  {d?.title && <p className="font-semibold">{d.title}</p>}
+                  {d?.description && <p className="mt-1 line-clamp-2 text-sm text-[#f9f5f4]/70">{d.description}</p>}
+                </figcaption>
+              </figure>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}