Deploy

2026-07-14 19:09:01 +00:00
parent 1ec4e5f583
commit c387142821
1 changed files with 103 additions and 0 deletions
@@ -0,0 +1,103 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Clock, Mail, Phone } from 'lucide-react'
+
+export default function GuestEnquirySection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Simulate submission
+    setSubmitted(true)
+    setName('')
+    setEmail('')
+    setMessage('')
+  }
+
+  return (
+    <section data-vula-section="guestenquiry" id="contact" className="bg-white py-24 px-6">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl md:text-5xl font-light text-[#1f2b33] mb-3 leading-tight">
+            Let us <span className="text-[#d4af37]">craft</span> your journey
+          </h2>
+          <p className="text-[#4a5a66] text-lg max-w-[44ch] mx-auto leading-relaxed">
+            Whether it is a pre-arrival request, a celebration arrangement,
+            or simply curiosity — reach out and we will respond within 24 hours.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <Input
+              type="text"
+              placeholder="Your name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              className="border-[#d4dadd] focus:border-[#d4af37] rounded-xl bg-[#f2f4f5] px-4 py-3 text-sm"
+            />
+            <Input
+              type="email"
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="border-[#d4dadd] focus:border-[#d4af37] rounded-xl bg-[#f2f4f5] px-4 py-3 text-sm"
+            />
+            <textarea
+              placeholder="Your message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              required
+              rows={4}
+              className="w-full border border-[#d4dadd] focus:border-[#d4af37] rounded-xl bg-[#f2f4f5] px-4 py-3 text-sm resize-none transition-colors duration-200 ease-out"
+            />
+            {submitted && (
+              <p className="text-[#16a34a] text-sm flex items-center gap-2">
+                <span>✓</span> Message sent — we will be in touch shortly.
+              </p>
+            )}
+            <Button
+              type="submit"
+              variant="default"
+              className="w-full bg-[#36454F] hover:bg-[#2a3a44] text-white rounded-full py-3 px-6 transition-all duration-200 ease-out"
+            >
+              Send Message
+            </Button>
+          </form>
+          {/* Contact details */}
+          <div className="flex flex-col justify-center gap-6">
+            <div className="flex items-center gap-4 bg-[#f2f4f5] rounded-2xl p-5">
+              <Phone className="w-6 h-6 text-[#d4af37]" />
+              <div>
+                <p className="text-sm font-medium text-[#1f2b33]">Phone</p>
+                <p className="text-sm text-[#4a5a66]">+27 82 900 1234</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4 bg-[#f2f4f5] rounded-2xl p-5">
+              <Mail className="w-6 h-6 text-[#d4af37]" />
+              <div>
+                <p className="text-sm font-medium text-[#1f2b33]">Email</p>
+                <p className="text-sm text-[#4a5a66]">info@moltenrock.co.za</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4 bg-[#f2f4f5] rounded-2xl p-5">
+              <Clock className="w-6 h-6 text-[#d4af37]" />
+              <div>
+                <p className="text-sm font-medium text-[#1f2b33]">Response time</p>
+                <p className="text-sm text-[#4a5a66]">Within 24 hours from the lodge manager</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}