Deploy

2026-07-15 09:25:25 +00:00
parent 79314a69bb
commit ae61b86662
1 changed files with 102 additions and 0 deletions
@@ -0,0 +1,102 @@
+'use client'
+
+import { useState } from 'react'
+import { Mail, MessageCircle, Phone } from 'lucide-react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function ContactEnquirySection() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+    travelDates: ''
+  })
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Simulate sending – in a real site, wire to an email API or webhook
+    console.log('Enquiry sent', formData)
+    setSubmitted(true)
+  }
+
+  return (
+    <section data-vula-section="contactenquiry" id="contact" className="py-20 bg-[#f5f5dc]">
+      <div className="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+        <div>
+          <h2 className="text-3xl font-bold text-[#1b210d] mb-4">Drop us a line</h2>
+          <p className="text-[#8b5a3c] mb-8">
+            Prefer to chat? We are easy to reach. While our hosts might be out on a game walk, they will reply as soon as they are back under the stoep.
+          </p>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <Phone className="w-5 h-5 text-[#6b8e23]" />
+              <a href="tel:+27823456789" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">+27 82 345 6789</a>
+            </div>
+            <div className="flex items-center gap-3">
+              <MessageCircle className="w-5 h-5 text-[#6b8e23]" />
+              <a href="https://wa.me/27823456789" target="_blank" rel="noopener noreferrer" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">WhatsApp: +27 82 345 6789</a>
+            </div>
+            <div className="flex items-center gap-3">
+              <Mail className="w-5 h-5 text-[#6b8e23]" />
+              <a href="mailto:reservations@thornveld.co.za" className="text-[#1b210d] hover:text-[#6b8e23] transition-colors">reservations@thornveld.co.za</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl p-6 shadow-md border border-[#dee2d4]">
+          {submitted ? (
+            <div className="text-center py-8">
+              <p className="text-xl font-semibold text-[#6b8e23]">Sent with care!</p>
+              <p className="text-[#8b5a3c] mt-2">We will answer as soon as the fire is lit.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <Input
+                name="name"
+                placeholder="Your name"
+                value={formData.name}
+                onChange={handleChange}
+                required
+              />
+              <Input
+                name="email"
+                type="email"
+                placeholder="Your email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+              <div>
+                <label className="block text-sm text-[#1b210d] mb-1">Preferred travel dates</label>
+                <Input
+                  name="travelDates"
+                  type="date"
+                  value={formData.travelDates}
+                  onChange={handleChange}
+                />
+              </div>
+              <textarea
+                name="message"
+                placeholder="Tell us about your stay – group size, interests, any special requests..."
+                value={formData.message}
+                onChange={handleChange}
+                required
+                className="w-full rounded-lg border border-[#dee2d4] bg-white p-3 text-sm text-[#1b210d] placeholder:text-[#8b5a3c]/50 focus:outline-none focus:ring-2 focus:ring-[#6b8e23] focus:border-transparent min-h-[100px]"
+              />
+              <Button type="submit" variant="default" className="w-full bg-[#6b8e23] hover:bg-[#5a7a1f] text-white">
+                Send enquiry
+              </Button>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}