From b3ac9dde1033141b2dae6e0bc92fa8664aa7e626 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:39:00 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/LegalInsightsSection.tsx b/src/components/sections/LegalInsightsSection.tsx
new file mode 100644
index 0000000..8aa7ef2
--- /dev/null
+++ b/src/components/sections/LegalInsightsSection.tsx
@@ -0,0 +1,88 @@
+'use client'
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import Badge from '@/components/ui/Badge'
+
+export default function LegalInsightsSection() {
+  const { items, loading } = useEmDashContent('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="legal-insights" data-vula-section="legalinsights" data-vula-cms="posts" className="bg-white py-20">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="text-center mb-14">
+          <Badge className="mb-4">Legal Insights</Badge>
+          <h2 className="text-4xl font-bold text-[#000080] mb-4">Latest Legal Commentary</h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Criminal law trends, case analyses, and updates to South African legislation
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {items.slice(0, 6).map((item) => {
+            const d = item.data as { title?: string; excerpt?: string; image?: string; author?: string; category?: string }
+            const img = d.image || ''
+            return (
+              <Card key={item.id} className="group overflow-hidden rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                <div className="aspect-video overflow-hidden">
+                  {img ? (
+                    <Image
+                      src={img}
+                      alt={d.title || 'Legal insight'}
+                      width={400}
+                      height={225}
+                      className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-gray-100 flex items-center justify-center text-gray-400">
+                      <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2M9 7l-3 3m0 0l3 3m-3-3h12" />
+                      </svg>
+                    </div>
+                  )}
+                </div>
+                <CardHeader className="pb-2">
+                  {d.category && (
+                    <Badge variant="secondary" className="mb-2 text-xs">{d.category}</Badge>
+                  )}
+                  <CardTitle className="text-lg font-semibold text-[#36454F] leading-snug">
+                    {d.title || 'Untitled'}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {d.excerpt && (
+                    <p className="text-gray-600 text-sm line-clamp-3">{d.excerpt}</p>
+                  )}
+                  {d.author && (
+                    <p className="text-xs text-gray-400 mt-3">By {d.author}</p>
+                  )}
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+        <div className="text-center mt-10">
+          <Link
+            href="/legal-insights"
+            className="inline-flex items-center gap-2 text-[#d4af37] font-medium underline-offset-4 hover:underline transition-all duration-200"
+          >
+            View all articles
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file