Deploy

2026-06-23 08:39:00 +00:00
parent 390b5535ba
commit b3ac9dde10
1 changed files with 88 additions and 0 deletions
@@ -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>
  )
 }