Vula Builder
114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
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>
|
||
)
|
||
}
|