Deploy

src/components/sections/TeamSection.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import Badge from '@/components/ui/Badge'
+
+export default function TeamSection() {
+  const team = [
+    {
+      name: 'Sipho Mtungwa',
+      role: 'Managing Partner',
+      image: 'https://images.pexels.com/photos/7640741/pexels-photo-7640741.jpeg?auto=compress&cs=tinysrgb&h=350',
+      description: 'Over 20 years advising Johannesburg-based corporates on M&A, governance, and BBBEE compliance under the Companies Act.'
+    },
+    {
+      name: 'Thandi Ndlovu',
+      role: 'Senior Associate – Real Estate',
+      image: 'https://images.pexels.com/photos/7640741/pexels-photo-7640741.jpeg?auto=compress&cs=tinysrgb&h=350',
+      description: 'Specialises in commercial property transactions, title due diligence, and property development financing in Sandton.'
+    },
+    {
+      name: 'Michael Botha',
+      role: 'Associate – Litigation',
+      image: 'https://images.pexels.com/photos/7640741/pexels-photo-7640741.jpeg?auto=compress&cs=tinysrgb&h=350',
+      description: 'Handles high-stakes commercial disputes, arbitration, and cross-border litigation for business owners across SA.'
+    }
+  ]
+
+  return (
+    <section data-vula-section="team" id="team" className="py-20 lg:py-28 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <p className="text-sm font-semibold tracking-widest uppercase text-neutral-400">Our Attorneys</p>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight mt-2">Meet the Mtungwa & Partners Team</h2>
+          <p className="text-base lg:text-lg leading-relaxed text-neutral-600 mt-4 max-w-2xl mx-auto">
+            Seasoned legal professionals dedicated to delivering strategic counsel for South African enterprises.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {team.map((member, i) => (
+            <Card key={i} className="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-square overflow-hidden rounded-t-xl">
+                <Image
+                  src={member.image}
+                  alt={member.name}
+                  width={300}
+                  height={300}
+                  className="object-cover w-full h-full"
+                />
+              </div>
+              <CardHeader>
+                <CardTitle className="text-xl font-semibold">{member.name}</CardTitle>
+                <Badge className="bg-[#d4af37] text-white text-xs font-semibold px-3 py-1 rounded-full">{member.role}</Badge>
+              </CardHeader>
+              <CardContent>
+                <p className="text-neutral-600 text-sm leading-relaxed">{member.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}