Deploy

src/components/sections/ClinicGallerySection.tsx

@@ -0,0 +1,52 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from "next/image"
+
+
+
+const markers = ["Babies from six weeks", "Pregnancy-friendly tables", "Family appointments"]
+
+export default function ClinicGallerySection() {
+  const { items } = useVulaContent('clinic_gallery')
+  const gallery = items.map((i) => i.data as Record<string, string>)
+
+  return (
+    <section data-vula-cms="clinic_gallery" data-vula-section="clinicgallery" id="clinic-gallery" className="bg-background text-foreground py-20 sm:py-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-[44ch]">
+          <p className="text-sm font-medium uppercase tracking-wide text-primary">Clinic gallery</p>
+          <h2 className="mt-3 text-3xl sm:text-4xl font-bold tracking-tight">
+            Built for <span className="text-primary">whole families</span>, not only sore backs.
+          </h2>
+          <p className="mt-4 leading-relaxed text-muted-foreground">Adjustment rooms, a waiting area that copes with prams, and tables that adjust for pregnancy. Every surface is cleaned down between patients.</p>
+        </div>
+
+        <div className="mt-12 grid grid-cols-2 lg:grid-cols-4 auto-rows-[150px] sm:auto-rows-[195px] gap-4 sm:gap-6">
+          {gallery.map((item) => (
+            <figure key={item.caption} className={"relative overflow-hidden group " + item.span + " " + item.mask}>
+              <Image
+                src={item.src}
+                alt={item.alt}
+                fill
+                sizes="(max-width: 768px) 100vw, 50vw"
+                className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+              />
+              <figcaption className="absolute bottom-3 left-3 rounded-full bg-background/95 px-3 py-1.5 text-xs font-medium text-foreground shadow-md">
+                {item.caption}
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+
+        <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-muted-foreground">
+          {markers.map((marker) => (
+            <span key={marker} className="flex items-center gap-2">
+              <span className="h-1.5 w-1.5 rounded-full bg-primary" />
+              {marker}
+            </span>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}