From 121d7a410029ffea3aa73ca66703edd5b10e368d Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 5 Aug 2026 18:14:36 +0000
Subject: [PATCH] Deploy

---
 .../sections/CareerOpportunitiesSection.tsx   | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/components/sections/CareerOpportunitiesSection.tsx

diff --git a/src/components/sections/CareerOpportunitiesSection.tsx b/src/components/sections/CareerOpportunitiesSection.tsx
new file mode 100644
index 0000000..3f22e3e
--- /dev/null
+++ b/src/components/sections/CareerOpportunitiesSection.tsx
@@ -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>
+  )
+}