From 07edaa761b20deaabb739c49dcefa41400426ce5 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:47:19 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/CriminalDefensePracticeSection.tsx b/src/components/sections/CriminalDefensePracticeSection.tsx
new file mode 100644
index 0000000..92711ac
--- /dev/null
+++ b/src/components/sections/CriminalDefensePracticeSection.tsx
@@ -0,0 +1,87 @@
+import Link from 'next/link'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Briefcase, Car, FileText, Gavel, Scale, Shield } from 'lucide-react'
+
+export default function CriminalDefensePracticeSection() {
+  const practices = [
+    {
+      icon: Scale,
+      title: 'Criminal Litigation',
+      description: "Aggressive courtroom representation from first appearance to trial. We handle assault, theft, fraud, and serious violent crimes in the Durban Magistrate's Court and High Court.",
+      href: '/services'
+    },
+    {
+      icon: FileText,
+      title: 'Bail Applications',
+      description: 'Strategic bail applications prepared within hours of arrest. Our team knows the magistrates and the law — we fight for your release with compelling evidence and character references.',
+      href: '/services'
+    },
+    {
+      icon: Gavel,
+      title: 'Appeals',
+      description: 'Challenging wrongful convictions and harsh sentences. We prepare thorough appeal heads of argument and appear in the Supreme Court of Appeal and the High Court.',
+      href: '/services'
+    },
+    {
+      icon: Shield,
+      title: 'White-Collar Crime',
+      description: 'Complex financial crime defence including corruption, tender fraud, money laundering, and tax offences. We liaise with forensic auditors and the NPA.',
+      href: '/services'
+    },
+    {
+      icon: Car,
+      title: 'Motor Vehicle Offences',
+      description: 'Defence against reckless and negligent driving, drunk driving, and hit-and-run charges. We use accident reconstruction experts and challenge breathalyser evidence.',
+      href: '/services'
+    },
+    {
+      icon: Briefcase,
+      title: 'Legal Aid',
+      description: 'Access to justice for all. We partner with Legal Aid SA to ensure every accused person gets competent representation regardless of financial means.',
+      href: '/services'
+    }
+  ]
+
+  return (
+    <section data-vula-section="criminaldefensepractice" id="practice-areas" className="py-20 bg-neutral-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#000080]">
+            Our Criminal Defense Practice Areas
+          </h2>
+          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
+            From Durban to Pietermaritzburg, our firm covers every aspect of criminal law with skill and determination.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {practices.map((practice, index) => {
+            const Icon = practice.icon
+            return (
+              <Card key={index} className="group cursor-pointer hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out border-t-4 border-t-transparent hover:border-t-[#d4af37]">
+                <CardHeader>
+                  <div className="w-12 h-12 rounded-lg bg-[#d4af37]/10 flex items-center justify-center mb-4 group-hover:bg-[#d4af37]/20 transition-colors">
+                    <Icon className="w-6 h-6 text-[#d4af37]" />
+                  </div>
+                  <CardTitle className="text-xl font-semibold text-[#000080]">
+                    {practice.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-600 text-sm leading-relaxed">
+                    {practice.description}
+                  </p>
+                </CardContent>
+                <CardFooter>
+                  <Link href={practice.href} className="text-[#d4af37] font-medium hover:underline underline-offset-4 transition-all duration-200 group/link">
+                    Learn more
+                    <span className="inline-block ml-1 group-hover/link:translate-x-1 transition-transform duration-200">&rarr;</span>
+                  </Link>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file