Deploy

src/components/sections/BookingSection.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+const serviceOptions = ['Corporate Law', 'Real Estate Transactions', 'Business Litigation', 'Contract Review', 'Mergers & Acquisitions']
+
+export default function BookingSection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [service, setService] = useState('')
+  const [message, setMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+  }
+
+  if (submitted) {
+    return (
+      <section data-vula-section="booking" id="booking" className="py-20 lg:py-28 bg-[#ffffff]">
+        <div className="mx-auto max-w-2xl text-center">
+          <div className="rounded-xl border border-neutral-100 bg-white p-8 shadow-[var(--shadow-card)]">
+            <h2 className="text-3xl font-semibold tracking-tight text-[#111827]">Thank You</h2>
+            <p className="mt-4 text-lg leading-relaxed text-neutral-600">We have received your consultation request. A member of our team will contact you within 24 hours.</p>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="booking" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="mx-auto max-w-2xl px-4">
+        <div className="text-center">
+          <span className="text-sm font-semibold tracking-widest uppercase text-neutral-400">Book a Consultation</span>
+          <h2 className="mt-3 text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827]">Schedule Your Case Review</h2>
+          <p className="mt-4 text-lg leading-relaxed text-neutral-600">Tell us about your legal needs and our attorneys will arrange a confidential meeting.</p>
+        </div>
+        <form onSubmit={handleSubmit} className="mt-10 space-y-6">
+          <Input
+            placeholder="Full Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+          <Input
+            type="email"
+            placeholder="Email Address"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <Input
+            type="tel"
+            placeholder="Phone Number"
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+            required
+          />
+          <select
+            value={service}
+            onChange={(e) => setService(e.target.value)}
+            required
+            className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-neutral-900 placeholder-neutral-400 shadow-[var(--shadow-surface)] transition-all duration-200 focus:border-[#000080] focus:ring-2 focus:ring-[#000080]/20"
+          >
+            <option value="">Select Service</option>
+            {serviceOptions.map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+          <textarea
+            placeholder="Brief description of your legal matter"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            rows={4}
+            className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-neutral-900 placeholder-neutral-400 shadow-[var(--shadow-surface)] transition-all duration-200 focus:border-[#000080] focus:ring-2 focus:ring-[#000080]/20"
+          />
+          <Button type="submit" variant="default" className="w-full bg-[#000080] text-white hover:opacity-90">
+            Request Consultation
+          </Button>
+        </form>
+      </div>
+    </section>
+  )
+}