This commit is contained in:
Vula Builder
2026-08-05 18:14:36 +00:00
parent ad97336c59
commit 121d7a4100
@@ -0,0 +1,113 @@
import Link from 'next/link'
import { MapPin, CheckCircle } from 'lucide-react'
import { SiWhatsapp } from 'react-icons/si'
import Button from '@/components/ui/Button'
const openings = [
{
title: 'Associate Attorney Corporate & Commercial Law',
location: 'Durban, KwaZulu-Natal',
description:
'Join a forward-thinking team advising businesses on mergers, acquisitions, and corporate governance across KZN.',
},
{
title: 'Candidate Attorney 2026 Intake',
location: 'Durban, KwaZulu-Natal',
description:
'Start your legal career with hands-on exposure to corporate law, litigation, and property transactions under experienced mentors.',
},
{
title: 'Conveyancing Secretary Real Estate',
location: 'Durban, KwaZulu-Natal',
description:
'Support a busy conveyancing practice handling residential and commercial property transfers across the province.',
},
{
title: 'Litigation Secretary Business Litigation',
location: 'Durban, KwaZulu-Natal',
description:
'Work alongside seasoned litigators managing high-value commercial disputes and court documentation.',
},
]
const reasons = [
'Mentorship from seasoned partners who invest in your professional growth.',
'Deep roots in KwaZulu-Natal\u2019s business and legal landscape.',
'Ubuntu-driven culture that values collaboration, respect, and meaningful impact.',
]
export default function CareerOpportunitiesSection() {
return (
<section
id="careers"
className="bg-background px-6 py-20"
>
<div className="mx-auto max-w-6xl">
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[1.6fr_1px_0.7fr] lg:gap-0">
{/* Left column openings */}
<div className="lg:pr-8">
<p className="text-xs uppercase tracking-[0.14em] text-secondary">
Current openings
</p>
<h2 className="mt-3 text-3xl font-black tracking-tight text-foreground lg:text-4xl font-[Fraunces,serif]">
Advance your legal career where it{' '}
<span className="italic">matters</span> most.
</h2>
<ul className="mt-8 divide-y divide-border">
{openings.map((job, i) => (
<li key={i} className="py-4">
<h3 className="text-lg font-semibold text-foreground">
{job.title}
</h3>
<p className="mt-1 flex items-center gap-1.5 text-sm text-foreground/60">
<MapPin className="h-3.5 w-3.5 text-secondary" />
{job.location}
</p>
<p className="mt-1 text-sm text-foreground/70">
{job.description}
</p>
</li>
))}
</ul>
</div>
{/* Vertical rule hidden on mobile */}
<div className="hidden lg:block w-px bg-border" />
{/* Right column why join & apply */}
<div className="lg:pl-8 flex flex-col">
<p className="text-xs uppercase tracking-[0.14em] text-secondary">
Why join us
</p>
<ul className="mt-4 space-y-4">
{reasons.map((reason, i) => (
<li key={i} className="flex gap-3">
<CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary" />
<p className="text-sm text-foreground/80">{reason}</p>
</li>
))}
</ul>
<div className="mt-8 flex flex-col gap-3">
<Link href="/careers/submit" className="w-full">
<Button className="w-full justify-center">Submit Your CV</Button>
</Link>
<a
href="https://wa.me/27310000000?text=Hi%20Gumede%20%26%20Partners%2C%20I%E2%80%99m%20interested%20in%20career%20opportunities."
target="_blank"
rel="noopener noreferrer"
className="w-full"
>
<Button variant="outline" className="w-full justify-center gap-2">
<SiWhatsapp className="h-4 w-4" />
WhatsApp Us
</Button>
</a>
</div>
</div>
</div>
</div>
</section>
)
}