Deploy

2026-08-05 18:14:37 +00:00
parent 121d7a4100
commit bae0ff1377
1 changed files with 39 additions and 0 deletions
@@ -0,0 +1,39 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function ClientTestimonialsSection() {
+  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-current border-t-transparent animate-spin" /></div>
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section id="client-testimonials" data-vula-section="clienttestimonials" data-vula-cms="posts" className="bg-[#1A2B3C] py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid md:grid-cols-[0.8fr_1.4fr] gap-10 md:gap-16">
+          <div>
+            <p className="text-xs uppercase tracking-[0.14em] text-[#FFD700]">Client outcomes</p>
+            <h2 className="mt-4 font-serif text-4xl font-black text-[#F0F8FF] leading-tight tracking-tight">Matters that <em className="italic text-[#00A8CC]">landed</em>.</h2>
+            <p className="mt-4 text-sm leading-relaxed text-[#F0F8FF]/60 max-w-xs">Unedited feedback from clients across corporate, property and dispute work.</p>
+          </div>
+          <div className="divide-y divide-[#F0F8FF]/15 border-y border-[#F0F8FF]/15">
+            {items.slice(0, 3).map((item) => {
+              const d = item.data as { title?: string; excerpt?: string; author?: string; category?: string }
+              return (
+                <div key={item.id} className="py-8">
+                  {d.category ? <p className="text-xs uppercase tracking-[0.14em] text-[#00A8CC]">{d.category}</p> : null}
+                  {d.title ? <h3 className="mt-2 text-xl font-bold text-[#F0F8FF]">{d.title}</h3> : null}
+                  {d.excerpt ? <p className="mt-3 text-[#F0F8FF]/80 leading-relaxed">&ldquo;{d.excerpt}&rdquo;</p> : null}
+                  {d.author ? <p className="mt-4 text-sm font-semibold text-[#FFD700]">{d.author}</p> : null}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}