Deploy

src/components/sections/FirmOverviewSection.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+import { CalendarClock, ShieldCheck, UserCheck } from 'lucide-react'
+
+const commitments = [
+  { icon: UserCheck, title: "Senior attention on every file", text: "Your matter is handled directly by an experienced attorney — not handed down to a junior associate." },
+  { icon: CalendarClock, title: "Appointment-first practice", text: "Consultations are scheduled around your diary at our Pietermaritzburg offices or virtually." },
+  { icon: ShieldCheck, title: "Local legal knowledge", text: "Deep familiarity with KwaZulu-Natal property, planning, and commercial courts." },
+]
+
+export default function FirmOverviewSection() {
+  return (
+    <section data-vula-section="firmoverview" id="about-firm" className="bg-[#1A2B3C] text-[#F0F8FF] py-20 px-6">
+      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-[1.6fr_0.7fr] gap-12 lg:gap-16">
+        <div className="border-b lg:border-b-0 lg:border-r border-white/15 pb-10 lg:pb-0 lg:pr-16">
+          <p className="text-xs uppercase tracking-[0.14em] text-[#FFD700]">The firm</p>
+          <h2 className="mt-4 text-4xl lg:text-5xl font-bold text-[#F0F8FF] tracking-tight leading-tight">
+            Decades of trusted counsel, <em className="text-[#FFD700]">without</em> the impersonal machinery.
+          </h2>
+          <p className="mt-6 text-lg leading-relaxed text-[#F0F8FF]/80 max-w-xl">
+            Gumede &amp; Partners was founded in Pietermaritzburg to give established companies, property developers, and emerging entrepreneurs a different kind of legal experience — one built on direct access, disciplined preparation, and practical advice.
+          </p>
+          <p className="mt-4 text-lg leading-relaxed text-[#F0F8FF]/80 max-w-xl">
+            Because consultations are appointment-based, every meeting gets the time it deserves. No long queues, no rushed advice — just clear direction from attorneys who know KwaZulu-Natal.
+          </p>
+          <div className="mt-8">
+            <Link href="/booking">
+              <Button size="lg" className="bg-[#FFD700] text-[#1A2B3C] hover:bg-[#FFD700]/90 border-transparent rounded-lg">
+                Book a Consultation
+              </Button>
+            </Link>
+          </div>
+        </div>
+        <ul className="flex flex-col justify-center divide-y divide-white/15">
+          {commitments.map((item) => {
+            const Icon = item.icon
+            return (
+              <li key={item.title} className="py-6">
+                <div className="flex items-start gap-4">
+                  <Icon className="mt-1 h-6 w-6 text-[#FFD700]" />
+                  <div>
+                    <h3 className="font-semibold text-[#F0F8FF]">{item.title}</h3>
+                    <p className="mt-1 text-sm leading-relaxed text-[#F0F8FF]/70">{item.text}</p>
+                  </div>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}