Vula Builder
60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useEmDashContent } from '@/hooks/useEmDashContent'
|
|
import Image from 'next/image'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import Badge from '@/components/ui/Badge'
|
|
|
|
export default function AttorneyProfilesSection() {
|
|
const { items, loading } = useEmDashContent('team_members')
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center py-16">
|
|
<div className="w-8 h-8 rounded-full border-2 border-[#000080] border-t-transparent animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (items.length === 0) return null
|
|
|
|
return (
|
|
<section id="attorneyprofiles" data-vula-section="attorneyprofiles" data-vula-cms="team_members" className="py-20 bg-white">
|
|
<div className="container mx-auto px-4 max-w-7xl">
|
|
<h2 className="text-4xl font-bold text-[#111827] text-center mb-4">Our Attorneys</h2>
|
|
<p className="text-center text-[#36454F] max-w-2xl mx-auto mb-12">
|
|
With 32 years of combined experience, Mashobane & Associates brings
|
|
tenacity, legal acumen, and a deep commitment to every client we represent.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{items.map((item) => {
|
|
const d = item.data as { name?: string; role?: string; bio?: string; image?: string }
|
|
return (
|
|
<Card key={item.id} className="bg-card border border-border shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden">
|
|
<div className="relative w-full aspect-[4/5] overflow-hidden">
|
|
{d.image && (
|
|
<Image
|
|
src={d.image}
|
|
alt={d.name || 'Attorney'}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
|
|
/>
|
|
)}
|
|
</div>
|
|
<CardHeader className="pb-0">
|
|
<CardTitle className="text-xl font-semibold text-[#000080]">{d.name}</CardTitle>
|
|
{d.role && <Badge variant="outline" className="mt-1 bg-[#16a34a]/10 text-[#16a34a] border-[#16a34a]">{d.role}</Badge>}
|
|
</CardHeader>
|
|
<CardContent className="pt-3">
|
|
<p className="text-sm text-[#36454F] leading-relaxed">{d.bio}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|