From 1a86923ce69f048bf6cb99005e9d320e9536e44b Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 5 Aug 2026 18:14:38 +0000
Subject: [PATCH] Deploy

---
 .../sections/OfficeGallerySection.tsx         | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/sections/OfficeGallerySection.tsx

diff --git a/src/components/sections/OfficeGallerySection.tsx b/src/components/sections/OfficeGallerySection.tsx
new file mode 100644
index 0000000..cd383af
--- /dev/null
+++ b/src/components/sections/OfficeGallerySection.tsx
@@ -0,0 +1,52 @@
+'use client'
+import Image from 'next/image'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { Camera } from 'lucide-react'
+
+export default function OfficeGallerySection() {
+  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-current border-t-transparent animate-spin" /></div>
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section id="office-gallery" data-vula-section="officegallery" data-vula-cms="gallery" className="bg-[#F0F8FF] py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid md:grid-cols-[1.6fr_0.7fr] gap-8 md:gap-12">
+          <div>
+            <p className="text-xs uppercase tracking-[0.14em] text-[#0077BE]">The Pietermaritzburg office</p>
+            <h2 className="mt-4 font-serif text-4xl lg:text-5xl font-black text-[#1A2B3C] leading-tight tracking-tight">A workspace built for <em className="italic text-[#0077BE]">clear</em> counsel.</h2>
+          </div>
+          <p className="text-sm text-[#1A2B3C]/60 md:border-l border-[#1A2B3C]/15 md:pl-10 flex items-end pb-1">Boardroom, meeting rooms and reception &mdash; where clients are received with discretion.</p>
+        </div>
+
+        <div className="grid md:grid-cols-12 gap-6 mt-12">
+          {items.slice(0, 6).map((item, index) => {
+            const d = item.data as { title?: string; description?: string; image?: string }
+            const span = index % 4 === 0 ? "md:col-span-7" : index % 4 === 1 ? "md:col-span-5" : index % 4 === 2 ? "md:col-span-5" : "md:col-span-7"
+            return (
+              <figure key={item.id} className={`${span} group relative overflow-hidden rounded-lg border border-[#1A2B3C]/15 transition-colors duration-200 hover:border-[#0077BE]`}>
+                <div className="relative aspect-[4/3] w-full">
+                  {d.image ? (
+                    <Image src={d.image} alt={d.title || 'Office gallery'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-500 ease-out group-hover:scale-105" />
+                  ) : (
+                    <div className="flex h-full items-center justify-center bg-[#1A2B3C]/5 text-[#1A2B3C]/30">
+                      <Camera className="h-10 w-10" />
+                    </div>
+                  )}
+                </div>
+                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#1A2B3C]/85 to-transparent p-4 text-[#F0F8FF]">
+                  {d.title ? <p className="font-semibold">{d.title}</p> : null}
+                  {d.description ? <p className="text-sm text-[#F0F8FF]/70">{d.description}</p> : null}
+                </figcaption>
+              </figure>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file