From c00d136391b13b4cff6423823c3d02b4b65d6a46 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 5 Aug 2026 18:14:38 +0000
Subject: [PATCH] Deploy

---
 .../sections/PracticeAreasSection.tsx         | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/sections/PracticeAreasSection.tsx

diff --git a/src/components/sections/PracticeAreasSection.tsx b/src/components/sections/PracticeAreasSection.tsx
new file mode 100644
index 0000000..e0e6a14
--- /dev/null
+++ b/src/components/sections/PracticeAreasSection.tsx
@@ -0,0 +1,41 @@
+import { Building2, FileText, Gavel, Home } from 'lucide-react'
+import { Card, CardContent } from "@/components/ui/Card"
+
+const practiceAreas = [
+  { icon: Building2, title: "Corporate Law", description: "Company formation, governance, mergers, and shareholder agreements for growing and established enterprises." },
+  { icon: Home, title: "Real Estate & Property Law", description: "Commercial leases, property transfers, and development approvals guided through to registration." },
+  { icon: Gavel, title: "Business Litigation", description: "Commercial dispute resolution and court representation aimed at protecting your bottom line." },
+  { icon: FileText, title: "Commercial Contracts", description: "Drafting, negotiation, and review of contracts that safeguard your commercial position." },
+]
+
+export default function PracticeAreasSection() {
+  return (
+    <section data-vula-section="practiceareas" id="practice-areas" className="bg-[#F0F8FF] py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="max-w-2xl">
+          <p className="text-xs uppercase tracking-[0.14em] text-[#0077BE]">Practice areas</p>
+          <h2 className="mt-3 text-4xl lg:text-5xl font-bold text-[#1A2B3C] tracking-tight">
+            Legal expertise built around <em className="text-[#0077BE]">Pietermaritzburg</em> business.
+          </h2>
+          <p className="mt-4 text-[#1A2B3C]/70">
+            Four core disciplines, one client-first standard — practical counsel for companies, developers, and individuals.
+          </p>
+        </div>
+        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
+          {practiceAreas.map((area) => {
+            const Icon = area.icon
+            return (
+              <Card key={area.title} className="bg-transparent border border-[#1A2B3C]/15 rounded-lg hover:border-[#0077BE] transition-colors duration-200 shadow-none">
+                <CardContent className="p-6">
+                  <Icon className="h-8 w-8 text-[#0077BE]" />
+                  <h3 className="mt-4 text-xl font-semibold text-[#1A2B3C]">{area.title}</h3>
+                  <p className="mt-2 text-sm leading-relaxed text-[#1A2B3C]/70">{area.description}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file