Deploy

src/components/sections/TeamSection.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import Image from "next/image"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+import Badge from "@/components/ui/Badge"
+import { Award, BookOpen, Scale, Shield } from 'lucide-react'
+
+const teamMembers = [
+  {
+    name: "Nomsa Mtungwa",
+    role: "Founding Partner – Corporate Law",
+    image: "https://images.pexels.com/photos/7640741/pexels-photo-7640741.jpeg?auto=compress&cs=tinysrgb&h=350",
+    badge: "30+ years",
+    specialty: "Mergers, acquisitions & corporate governance",
+    icon: Shield,
+  },
+  {
+    name: "Thabo Moeketsi",
+    role: "Partner – Real Estate & Property",
+    image: "https://images.pexels.com/photos/7691691/pexels-photo-7691691.jpeg?auto=compress&cs=tinysrgb&h=350",
+    badge: "15+ years",
+    specialty: "Commercial leases, development agreements & property disputes",
+    icon: Scale,
+  },
+  {
+    name: "Lindiwe Cele",
+    role: "Senior Associate – Business Litigation",
+    image: "https://images.pexels.com/photos/7640741/pexels-photo-7640741.jpeg?auto=compress&cs=tinysrgb&h=350",
+    badge: "12+ years",
+    specialty: "Shareholder disputes, contract litigation & arbitration",
+    icon: BookOpen,
+  },
+]
+
+export default function TeamSection() {
+  return (
+    <section data-vula-section="team" id="team" className="py-20 bg-[#ffffff]">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-[#111827] mb-2">Our Attorneys</h2>
+          <p className="text-[#111827]/70 max-w-xl mx-auto">
+            Each partner at Mtungwa & Partners brings deep experience in a specific practice area,
+            ensuring you get expert counsel matched to your transaction or case.
+          </p>
+        </div>
+        <div className="grid md:grid-cols-3 gap-8">
+          {teamMembers.map((member, i) => {
+            const Icon = member.icon
+            return (
+              <Card
+                key={i}
+                className="rounded-xl border border-[#e5e7eb] bg-[#ffffff] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
+              >
+                <div className="relative aspect-square overflow-hidden rounded-t-xl">
+                  <Image
+                    src={member.image}
+                    alt={member.name}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                  />
+                </div>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-xl font-semibold text-[#111827]">{member.name}</CardTitle>
+                    <Badge variant="secondary" className="bg-[#d4af37]/20 text-[#800000] border-none">
+                      {member.badge}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-[#000080] font-medium">{member.role}</p>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-start gap-2">
+                    <Icon className="w-5 h-5 text-[#800000] mt-0.5" />
+                    <p className="text-sm text-[#111827]/70">{member.specialty}</p>
+                  </div>
+                  <p className="text-xs text-[#111827]/40 mt-4">
+                    Admitted: High Court of South Africa
+                  </p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}