Deploy

src/components/sections/PracticeAreasSection.tsx

@@ -0,0 +1,59 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { Building2, FileText, Handshake, Scale } from 'lucide-react'
+
+export default function PracticeAreasSection() {
+  const areas = [
+    {
+      icon: Scale,
+      title: 'Corporate Law',
+      description: 'Mergers, acquisitions, corporate governance, and BBBEE structuring under the South African Companies Act. We guide boards through regulatory compliance and shareholder agreements.'
+    },
+    {
+      icon: Building2,
+      title: 'Real Estate',
+      description: 'Commercial property transactions, lease negotiations, title due diligence, and development finance. Our team handles conveyancing for Sandton and national portfolios.'
+    },
+    {
+      icon: FileText,
+      title: 'Business Litigation',
+      description: 'Commercial dispute resolution, arbitration, mediation, and litigation. We protect business owners in contract disputes, shareholder conflicts, and insolvency matters.'
+    },
+    {
+      icon: Handshake,
+      title: 'Tax & Regulatory',
+      description: 'Tax planning, transfer pricing, VAT structuring, and regulatory compliance. We advise on BEE ownership structures and cross-border investment into South Africa.'
+    }
+  ]
+
+  return (
+    <section data-vula-section="practiceareas" id="services" className="py-20 lg:py-28 bg-[#f9fafb]">
+      <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 Expertise</p>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight mt-2">Practice Areas</h2>
+          <p className="text-base lg:text-lg leading-relaxed text-neutral-600 mt-4 max-w-2xl mx-auto">
+            Targeted legal services for corporate clients, real estate investors, and business owners across South Africa.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {areas.map((area, i) => {
+            const Icon = area.icon
+            return (
+              <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">
+                <CardHeader>
+                  <div className="w-12 h-12 rounded-lg bg-[#000080]/10 flex items-center justify-center mb-3">
+                    <Icon className="w-6 h-6 text-[#000080]" />
+                  </div>
+                  <CardTitle className="text-lg font-semibold">{area.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-neutral-600 text-sm leading-relaxed">{area.description}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}