Deploy

src/components/sections/GalleryBannerSection.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image'
+
+export default function GalleryBannerSection() {
+  return (
+    <section
+      id="gallery-banner"
+      data-vula-section="gallerybanner"
+      className="relative h-[350px] md:h-[400px] w-full overflow-hidden"
+    >
+      {/* Background image */}
+      <Image
+        src="https://images.pexels.com/photos/30483132/pexels-photo-30483132.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Law firm office interior – Gumede & Partners gallery"
+        fill
+        className="object-cover"
+        sizes="100vw"
+        priority
+      />
+
+      {/* Overlay gradient for text readability */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#1A2B3C]/90 via-[#1A2B3C]/50 to-[#1A2B3C]/10" />
+
+      {/* Text container */}
+      <div className="relative z-10 flex h-full items-center">
+        <div className="mx-auto w-full max-w-6xl px-6 md:px-10">
+          <div className="max-w-xl">
+            {/* Eyebrow – informational: page category */}
+            <p className="text-xs uppercase tracking-[0.14em] text-white/70 font-medium mb-3">
+              Photo gallery
+            </p>
+
+            {/* Section heading – Fraunces serif (italic word is skipped intentionally; single-word headline) */}
+            <h1 className="font-[Fraunces] text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
+              Gallery
+            </h1>
+
+            {/* Subtitle – factual benefit */}
+            <p className="mt-6 max-w-md text-base md:text-lg text-white/80 leading-relaxed">
+              A glimpse inside our practice — offices, team, and community moments from Pietermaritzburg and beyond.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}