Deploy

2026-06-23 08:47:35 +00:00
parent 587a7dabbb
commit 89d10bc1d1
1 changed files with 141 additions and 0 deletions
@@ -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>
  )
 }