Deploy

2026-06-04 11:25:17 +00:00
parent 0e88a1a5f4
commit 14954e59ff
1 changed files with 58 additions and 0 deletions
@@ -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>
  )
 }