Deploy

src/components/sections/PracticeAreasSection.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { BookOpen, FileText, Scale, Search, Shield, UserCheck } from 'lucide-react'
+import Link from 'next/link'
+
+export default function PracticeAreasSection() {
+  const areas = [
+    { icon: Scale, title: 'Bail Applications', desc: 'Urgent and opposed bail hearings across Gauteng. We fight for your freedom from day one.' },
+    { icon: FileText, title: 'Trial Defence', desc: 'Strategic representation in regional and high courts. We cross‑examine, we object, we win.' },
+    { icon: Shield, title: 'Appeals & Reviews', desc: 'Appealing convictions or sentences to the Supreme Court and Constitutional Court.' },
+    { icon: Search, title: 'Plea Negotiations', desc: 'Securing reduced charges or alternative sentences through skilful negotiation.' },
+    { icon: BookOpen, title: 'White‑Collar Crime', desc: 'Fraud, corruption, tax offences — we protect your reputation and assets.' },
+    { icon: UserCheck, title: 'Juvenile Justice', desc: 'Specialised defence for young offenders, focusing on diversion and rehabilitation.' },
+  ]
+
+  return (
+    <section data-vula-section="practiceareas" id="practice-areas" className="py-20 bg-neutral-50">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-bold text-[#000080] text-center mb-4">Our Practice Areas</h2>
+        <p className="text-lg text-center text-[#36454F] mb-12 max-w-2xl mx-auto">
+          With 32 years of courtroom experience, we cover every stage of the criminal justice process.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {areas.map((area, idx) => {
+            const Icon = area.icon
+            return (
+              <Card key={idx} className="rounded-xl border border-[#000080]/10 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200">
+                <CardHeader>
+                  <Icon className="w-10 h-10 text-[#D4AF37] mb-2" />
+                  <CardTitle className="text-xl font-semibold text-[#000080]">{area.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-[#36454F]">{area.desc}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+        <div className="text-center mt-10">
+          <Link href="/services" className="inline-block border-2 border-[#000080] text-[#000080] px-6 py-3 rounded-lg font-semibold hover:bg-[#000080] hover:text-white transition-all duration-200">
+            View All Services
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}