diff --git a/src/components/sections/ServicesSection.tsx b/src/components/sections/ServicesSection.tsx
new file mode 100644
index 0000000..c40a048
--- /dev/null
+++ b/src/components/sections/ServicesSection.tsx
@@ -0,0 +1,58 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+import { Briefcase, Building2, Scale } from 'lucide-react'
+
+export default function ServicesSection() {
+  const services = [
+    {
+      icon: Briefcase,
+      title: "Corporate Law",
+      description: "Company registrations, mergers & acquisitions, shareholder agreements, and compliance with the Companies Act. We structure transactions that protect your interests and fuel growth.",
+    },
+    {
+      icon: Building2,
+      title: "Real Estate Transactions",
+      description: "Commercial property acquisitions, lease negotiations, development law, and title disputes. Our conveyancing team ensures smooth transfers across South Africa.",
+    },
+    {
+      icon: Scale,
+      title: "Business Litigation",
+      description: "High-stakes commercial disputes, contract breaches, shareholder oppression claims, and debt recovery. We represent clients in the High Court, Supreme Court of Appeal, and arbitration.",
+    },
+  ]
+
+  return (
+    <section data-vula-section="services" id="services" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="max-w-7xl mx-auto px-6">
+        <span className="text-sm font-semibold tracking-widest uppercase text-neutral-400 text-center block">
+          Our Practice Areas
+        </span>
+        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#000080] mt-4 mb-12 text-center">
+          Strategic Legal Services for Business
+        </h2>
+        <div className="grid md:grid-cols-3 gap-8">
+          {services.map((service, i) => {
+            const Icon = service.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>
+                  <Icon className="w-10 h-10 text-[#d4af37] mb-4" />
+                  <CardTitle className="text-xl font-semibold text-[#000080]">
+                    {service.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-base text-neutral-600 leading-relaxed">
+                    {service.description}
+                  </p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file