From 84521f97350547d84231741ad11f1e75f81572d2 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 16:40:56 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
new file mode 100644
index 0000000..f3e9cd1
--- /dev/null
+++ b/src/components/sections/ContactSection.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+import { useState } from 'react'
+
+export default function ContactSection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Placeholder: would send email or integrate with a service
+    alert('Thank you! We will get back to you soon.')
+  }
+
+  return (
+    <section data-vula-section="contact" id="contact" className="py-24 bg-[#f9f7f4]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="grid md:grid-cols-2 gap-12 items-start">
+          {/* Left: Contact Form */}
+          <Card className="border border-[#e2dfd4] shadow-md">
+            <CardContent className="p-8">
+              <h2 className="text-3xl font-bold text-[#211c0d] mb-2 font-bricolage">We can't wait to welcome you</h2>
+              <p className="text-[#211c0d]/70 mb-6 font-lora italic">Send us a message and we'll reply within 24 hours.</p>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <Input
+                  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
+                />
+                <textarea
+                  placeholder="Your message..."
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  rows={4}
+                  className="w-full border border-[#e2dfd4] rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#d4af37] resize-none bg-white"
+                  required
+                />
+                <Button type="submit" variant="default" className="w-full bg-[#d4af37] text-[#211c0d] hover:bg-[#d4af37]/90">
+                  Send Message
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* Right: Contact Details & Map */}
+          <div className="space-y-8">
+            <Card className="border border-[#e2dfd4] shadow-md">
+              <CardContent className="p-8">
+                <h3 className="text-xl font-semibold text-[#211c0d] mb-4 font-bricolage">Visit Us</h3>
+                <div className="space-y-4 text-[#211c0d]/80">
+                  <div className="flex items-start gap-3">
+                    <MapPin className="w-5 h-5 text-[#16a34a] mt-1 shrink-0" />
+                    <div>
+                      <p className="font-medium">vaVenda Lodge</p>
+                      <p className="text-sm">Farm 45, Alldays Road</p>
+                      <p className="text-sm">Alldays, 0909, Limpopo</p>
+                      <p className="text-sm">South Africa</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Phone className="w-5 h-5 text-[#16a34a] shrink-0" />
+                    <span className="text-sm">+27 15 012 3456</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Mail className="w-5 h-5 text-[#16a34a] shrink-0" />
+                    <span className="text-sm">bookings@vavendalodge.co.za</span>
+                  </div>
+                  <a
+                    href="https://wa.me/27150123456"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 text-[#16a34a] hover:text-[#16a34a]/80 transition-colors"
+                  >
+                    <MessageCircle className="w-5 h-5" />
+                    <span className="text-sm font-medium">WhatsApp Us</span>
+                  </a>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Google Map Embed */}
+            <div className="rounded-lg overflow-hidden shadow-md border border-[#e2dfd4] h-64">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5875.123456789!2d29.1234567!3d-22.9876543!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjLCsDU5JzE1LjYiUyAyOcKwMDcnMjYuOCJF!5e0!3m2!1sen!2sza!4v123456789"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={false}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="vaVenda Lodge location"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file