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

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

diff --git a/src/components/sections/KwaNtofontofoEnquirySection.tsx b/src/components/sections/KwaNtofontofoEnquirySection.tsx
new file mode 100644
index 0000000..3c0de1c
--- /dev/null
+++ b/src/components/sections/KwaNtofontofoEnquirySection.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Mail, MapPin, Phone } from 'lucide-react'
+
+export default function KwaNtofontofoEnquirySection() {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [message, setMessage] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+  }
+
+  if (submitted) {
+    return (
+      <section id="contact" className="bg-white py-16 px-4">
+        <div className="max-w-lg mx-auto text-center">
+          <h2 className="text-3xl font-bold text-[#d4af37] mb-4">Thank You</h2>
+          <p className="text-gray-600">
+            Your enquiry has been received. We will get back to you personally and promptly.
+          </p>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="contact" data-vula-section="kwantofontofoenquirysection" className="bg-neutral-50 py-16 px-4">
+      <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10 items-start">
+        {/* Contact Information */}
+        <div>
+          <h2 className="text-3xl font-bold text-gray-900 mb-6">Get in Touch</h2>
+          <p className="text-gray-600 mb-8">
+            Have a question or want to book? Drop us a message and we will respond personally.
+          </p>
+          <div className="space-y-4 text-gray-700">
+            <div className="flex items-start gap-3">
+              <Phone className="w-5 h-5 text-[#d4af37] mt-1" />
+              <div>
+                <p className="font-semibold">Phone / WhatsApp</p>
+                <p>+27 33 940 1234</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Mail className="w-5 h-5 text-[#d4af37] mt-1" />
+              <div>
+                <p className="font-semibold">Email</p>
+                <p>info@kwantofontofo.co.za</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <MapPin className="w-5 h-5 text-[#d4af37] mt-1" />
+              <div>
+                <p className="font-semibold">Address</p>
+                <p>44 Rutherford Circle, Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Enquiry Form */}
+        <form onSubmit={handleSubmit} className="bg-white rounded-xl p-6 shadow-[var(--shadow-card)] space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
+            <Input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Thandi Mokoena"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={4}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:border-transparent"
+              placeholder="Tell us how we can help..."
+              required
+            />
+          </div>
+          <Button
+            type="submit"
+            variant="default"
+            size="lg"
+            className="w-full bg-[#d4af37] hover:bg-[#b8962e] text-white"
+          >
+            Send Enquiry
+          </Button>
+        </form>
+      </div>
+    </section>
+  )
+}