Deploy

src/components/sections/ConsultationCTASection.tsx

@@ -0,0 +1,42 @@
+'use client'
+import Link from 'next/link'
+import { CalendarCheck, Clock, ShieldCheck } from 'lucide-react'
+
+export default function ConsultationCTASection() {
+  const commitments = [
+    { icon: CalendarCheck, label: 'Same-week consultation slots' },
+    { icon: Clock, label: '45-minute focused sessions' },
+    { icon: ShieldCheck, label: 'Clear advice, no legal jargon' },
+  ]
+
+  return (
+    <section data-vula-section="consultationcta" id="consultation-booking" className="bg-[#1A2B3C] px-6 py-20">
+      <div className="mx-auto max-w-4xl text-center">
+        <p className="text-xs uppercase tracking-[0.14em] text-[#FFD700]">Consultation booking</p>
+        <h2 className="mt-4 text-4xl font-black tracking-tight text-[#F0F8FF] lg:text-5xl">
+          Your Legal Solution Starts Here
+        </h2>
+        <p className="mx-auto mt-4 max-w-xl text-lg text-[#F0F8FF]/80">
+          Corporate structuring, property transfers, or a dispute that needs a firm hand — book a consultation and leave with a clear next step.
+        </p>
+        <Link
+          href="/booking"
+          className="mt-8 inline-flex h-12 items-center justify-center rounded-lg bg-[#FFD700] px-8 text-base font-semibold text-[#1A2B3C] transition-all duration-200 ease-out hover:bg-[#FFD700]/90"
+        >
+          Book a Consultation
+        </Link>
+        <div className="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-[#F0F8FF]/70">
+          {commitments.map((item) => {
+            const Icon = item.icon
+            return (
+              <span key={item.label} className="inline-flex items-center gap-2">
+                <Icon className="h-4 w-4 text-[#FFD700]" />
+                {item.label}
+              </span>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}