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

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

diff --git a/src/components/sections/KwaNtofontofoContactSection.tsx b/src/components/sections/KwaNtofontofoContactSection.tsx
new file mode 100644
index 0000000..3f6a7e9
--- /dev/null
+++ b/src/components/sections/KwaNtofontofoContactSection.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Mail, MapPin, Phone, Send } from 'lucide-react'
+
+export default function KwaNtofontofoContactSection() {
+  const [form, setForm] = useState({ name: "", email: "", enquiry: "" })
+  const [sent, setSent] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSent(true)
+  }
+
+  return (
+    <section data-vula-section="kwantofontofocontact" id="contact" className="bg-[#FDF6EC] py-20 px-6">
+      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+        {/* Left column – Form */}
+        <div>
+          <h2 className="text-3xl font-bold text-[#2C1810] mb-6">Get in Touch</h2>
+          <p className="text-[#2C1810]/70 mb-8">
+            We&apos;d love to hear from you. Send us a message and we&apos;ll respond promptly.
+          </p>
+          {sent ? (
+            <div className="bg-white rounded-xl p-6 shadow-md border border-[#e5e7eb]">
+              <p className="text-lg font-semibold text-green-700">Thank you for your enquiry!</p>
+              <p className="text-[#2C1810]/70 mt-1">We&apos;ll get back to you within 24 hours.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-[#2C1810] mb-1">Your Name</label>
+                <Input
+                  type="text"
+                  placeholder="John Doe"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[#2C1810] mb-1">Email Address</label>
+                <Input
+                  type="email"
+                  placeholder="john@example.com"
+                  value={form.email}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-[#2C1810] mb-1">Your Enquiry</label>
+                <textarea
+                  placeholder="How can we help?"
+                  value={form.enquiry}
+                  onChange={(e) => setForm({ ...form, enquiry: e.target.value })}
+                  required
+                  className="w-full rounded-lg border border-[#e5e7eb] p-3 min-h-[120px] focus:outline-none focus:ring-2 focus:ring-[#E67E22]"
+                />
+              </div>
+              <Button
+                type="submit"
+                variant="default"
+                className="bg-[#E67E22] hover:bg-[#d4731e] text-white flex items-center gap-2"
+              >
+                <Send className="w-4 h-4" />
+                Send Enquiry
+              </Button>
+            </form>
+          )}
+        </div>
+
+        {/* Right column – Contact details & map */}
+        <div className="space-y-6">
+          <div className="bg-white rounded-xl p-6 shadow-md border border-[#e5e7eb]">
+            <h3 className="text-xl font-semibold text-[#2C1810] mb-4">Our Address</h3>
+            <div className="flex items-start gap-3 mb-4">
+              <MapPin className="w-5 h-5 text-[#C0392B] mt-1 shrink-0" />
+              <div>
+                <p className="text-[#2C1810]">44 Rutherford Circle</p>
+                <p className="text-[#2C1810]">Bisley, Pietermaritzburg</p>
+                <p className="text-[#2C1810]">3201, KwaZulu-Natal</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 mb-3">
+              <Phone className="w-5 h-5 text-[#C0392B] shrink-0" />
+              <a href="tel:+27331234567" className="text-[#E67E22] hover:underline">
+                +27 33 123 4567
+              </a>
+            </div>
+            <div className="flex items-center gap-3">
+              <Mail className="w-5 h-5 text-[#C0392B] shrink-0" />
+              <a href="mailto:info@kwanontofonto.co.za" className="text-[#E67E22] hover:underline">
+                info@kwanontofonto.co.za
+              </a>
+            </div>
+          </div>
+
+          {/* Embedded Map */}
+          <div className="rounded-xl overflow-hidden shadow-md border border-[#e5e7eb]">
+            <iframe
+              title="Location of KwaNtofontofo Guest House"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3310.7445!2d30.3833!3d-29.6167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef2f3c4b5a6b789%3A0x1234567890abcdef!2s44%20Rutherford%20Circle%2C%20Bisley%2C%20Pietermaritzburg%2C%203201!5e0!3m2!1sen!2sza!4v1680000000000"
+              width="100%"
+              height="250"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </div>
+          <p className="text-sm text-[#2C1810]/60 text-center">
+            1 km from Pietermaritzburg Airport · Across from the Nature Reserve
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file