From 89d10bc1d159602351b1cc5dbaededb31f576373 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:47:35 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/OnlineEnquirySection.tsx b/src/components/sections/OnlineEnquirySection.tsx
new file mode 100644
index 0000000..55a5104
--- /dev/null
+++ b/src/components/sections/OnlineEnquirySection.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import { useState } from "react"
+import { Send } from 'lucide-react'
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+
+export default function OnlineEnquirySection() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    legalMatter: "",
+    message: "",
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // In production, submit to backend
+    alert("Thank you for your enquiry. A member of our team will respond within 24 hours.")
+  }
+
+  return (
+    <section data-vula-section="onlineenquiry" id="online-enquiry" className="bg-[#ffffff] py-20 px-6">
+      <div className="max-w-3xl mx-auto">
+        <h2 className="text-3xl font-bold text-[#000080] mb-4 text-center">
+          Online Enquiry
+        </h2>
+        <p className="text-center text-[#36454F] mb-10 max-w-xl mx-auto">
+          Share the details of your legal matter in confidence. We treat every submission with the utmost discretion.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid sm:grid-cols-2 gap-6">
+            <div>
+              <label className="block text-sm font-medium text-[#36454F] mb-1">
+                Full Name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                placeholder="e.g. Thabo Mokoena"
+                required
+                className="border-[#36454F]/30 focus:border-[#000080]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#36454F] mb-1">
+                Email Address <span className="text-red-500">*</span>
+              </label>
+              <Input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="you@example.com"
+                required
+                className="border-[#36454F]/30 focus:border-[#000080]"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-[#36454F] mb-1">
+              Phone Number
+            </label>
+            <Input
+              type="tel"
+              name="phone"
+              value={formData.phone}
+              onChange={handleChange}
+              placeholder="+27 82 123 4567"
+              className="border-[#36454F]/30 focus:border-[#000080]"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-[#36454F] mb-1">
+              Nature of Legal Matter <span className="text-red-500">*</span>
+            </label>
+            <select
+              name="legalMatter"
+              value={formData.legalMatter}
+              onChange={handleChange}
+              required
+              className="w-full rounded-lg border border-[#36454F]/30 px-4 py-3 text-sm bg-white focus:outline-none focus:border-[#000080]"
+            >
+              <option value="">Select a category</option>
+              <option value="criminal-defense">Criminal Defense</option>
+              <option value="domestic-violence">Domestic Violence</option>
+              <option value="drug-offences">Drug Offences</option>
+              <option value="white-collar">White Collar Crime</option>
+              <option value="traffic-violations">Traffic / Hit-and-Run</option>
+              <option value="appeals">Appeals & Post-Conviction</option>
+              <option value="other">Other Legal Matter</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-[#36454F] mb-1">
+              Case Details / Message <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              name="message"
+              rows={6}
+              value={formData.message}
+              onChange={handleChange}
+              placeholder="Please describe your situation in as much detail as you are comfortable sharing. All information is strictly confidential."
+              required
+              className="w-full rounded-lg border border-[#36454F]/30 px-4 py-3 text-sm bg-white focus:outline-none focus:border-[#000080] resize-none"
+            />
+          </div>
+
+          <div className="text-center">
+            <Button
+              type="submit"
+              variant="default"
+              size="lg"
+              className="bg-[#000080] hover:bg-[#000080]/90 text-white px-10 py-4 inline-flex items-center gap-2"
+            >
+              <Send className="w-5 h-5" />
+              Submit Enquiry
+            </Button>
+          </div>
+
+          <p className="text-xs text-center text-[#36454F]/60 mt-4">
+            By submitting this form you agree to our privacy policy. Your information will
+            be handled with strict confidentiality and used solely to respond to your enquiry.
+          </p>
+        </form>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file