Deploy

2026-06-23 08:38:48 +00:00
parent cf72b8ae1b
commit bbfbaaacbb
1 changed files with 122 additions and 0 deletions
@@ -0,0 +1,122 @@
 'use client'
 import { useState } from "react"
 import Button from "@/components/ui/Button"
 import Input from "@/components/ui/Input"
 import { Mail, MessageCircle, Phone } from 'lucide-react'
 export default function ContactEnquirySection() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [message, setMessage] = useState("")
  const [submitted, setSubmitted] = useState(false)
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitted(true)
    // Actual submission handled by backend
  }
  return (
    <section data-vula-section="contactenquiry" id="contact-enquiry" className="py-20 bg-[#f9f7f4]">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <span className="text-sm uppercase tracking-widest text-[#d4af37] font-semibold">Get in Touch</span>
          <h2 className="text-3xl md:text-4xl font-bold text-[#8b5a3c] mt-2 mb-6">
            Let Us Tailor Your Stay
          </h2>
          <p className="text-[#111827]/70 mb-12 max-w-2xl">
            Whether you need an early check-in, a special dinner arrangement, or a private 
            tour of the Midlands Meander — we are here to make it happen. Reach out directly 
            or use the form below and we will respond within the hour.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div>
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-[#d4af37]/10 rounded-full">
                    <Phone className="w-5 h-5 text-[#d4af37]" />
                  </div>
                  <div>
                    <p className="font-semibold text-[#111827]">Phone</p>
                    <p className="text-sm text-[#111827]/70">+27 63 363 1797</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-[#8b5a3c]/10 rounded-full">
                    <Mail className="w-5 h-5 text-[#8b5a3c]" />
                  </div>
                  <div>
                    <p className="font-semibold text-[#111827]">Email</p>
                    <p className="text-sm text-[#111827]/70">bookings@kwantofontofo.co.za</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-[#16a34a]/10 rounded-full">
                    <MessageCircle className="w-5 h-5 text-[#16a34a]" />
                  </div>
                  <div>
                    <p className="font-semibold text-[#111827]">WhatsApp</p>
                    <p className="text-sm text-[#111827]/70">+27 63 363 1797</p>
                  </div>
                </div>
                <div className="mt-8 p-4 bg-[#d4af37]/5 border border-[#d4af37]/20 rounded-lg">
                  <p className="text-sm text-[#111827]/80">
                    <span className="font-semibold">Trading hours:</span> 07:00 – 22:00 daily, 
                    including public holidays (South Africa has many — we stay open).
                  </p>
                </div>
              </div>
            </div>
            <div>
              {submitted ? (
                <div className="p-8 bg-white rounded-xl shadow-[var(--shadow-card)] text-center">
                  <h3 className="text-xl font-bold text-[#16a34a] mb-2">Thank you!</h3>
                  <p className="text-[#111827]/70">
                    Your enquiry has been received. We will respond within the hour.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <Input
                    type="text"
                    placeholder="Your 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 (optional)"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                  />
                  <textarea
                    placeholder="How can we help? (e.g. dinner request, special occasion, late arrival)"
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    required
                    className="w-full border border-[#e5e7eb] rounded-lg p-3 min-h-[120px] focus:outline-none focus:ring-2 focus:ring-[#d4af37]"
                  />
                  <Button type="submit" variant="default" className="w-full bg-[#d4af37] text-[#111827] hover:bg-[#c49f2e]">
                    Send Enquiry
                  </Button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }