Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,152 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
import { Mail, Phone, Plane } from 'lucide-react'
|
||||||
|
|
||||||
|
const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
|
||||||
|
|
||||||
|
const formatPrice = (amount: number, code?: string) => {
|
||||||
|
const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
|
||||||
|
return `${sym}${(amount / 100).toFixed(2)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PrivateReserveContactSection() {
|
||||||
|
const [formData, setFormData] = useState({ name: '', email: '', message: '', interest: 'Suites' })
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setSubmitted(true)
|
||||||
|
// In production, send to Medusa or backend
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section data-vula-section="privatereservecontact" id="contact" className="py-24 lg:py-28 bg-[#1a1a12] border-t border-[#404030]">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
{/* Eyebrow */}
|
||||||
|
<div className="flex items-center justify-center gap-4 mb-8">
|
||||||
|
<span className="h-px w-14 bg-[#6b8e23]"></span>
|
||||||
|
<span className="text-[#6b8e23] text-sm uppercase tracking-[0.2em]" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Your Journey Awaits</span>
|
||||||
|
<span className="h-px w-14 bg-[#6b8e23]"></span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-4xl lg:text-5xl text-[#eeeee7] font-light text-center mb-12" style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)' }}>
|
||||||
|
Reach the <span className="italic text-[#6b8e23]">Wild</span> Seamlessly
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
{/* Left: Map + Transfer Details */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="relative h-72 rounded-sm overflow-hidden border border-[#404030]">
|
||||||
|
<Image
|
||||||
|
src="https://images.pexels.com/photos/33315724/pexels-photo-33315724.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop"
|
||||||
|
alt="Greater Kruger landscape – private reserve location"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-[#17170f]/60 to-transparent"></div>
|
||||||
|
<div className="absolute bottom-4 left-4 right-4 text-[#eeeee7]">
|
||||||
|
<p className="text-xs uppercase tracking-wider" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>33 km north-east of Hoedspruit</p>
|
||||||
|
<p className="text-lg font-light" style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)' }}>Molten Rock Private Reserve</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-[#17170f] p-6 rounded-sm border border-[#404030]">
|
||||||
|
<p className="text-[#f5f5dc] text-xs uppercase tracking-wider mb-4" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>
|
||||||
|
<Plane className="inline w-4 h-4 mr-2 text-[#6b8e23]" />
|
||||||
|
Private Arrival
|
||||||
|
</p>
|
||||||
|
<div className="space-y-2 text-sm text-[#eeeee7]/80">
|
||||||
|
<p><span className="text-[#6b8e23]">→</span> Charter from Johannesburg (1.5 hr flight)</p>
|
||||||
|
<p><span className="text-[#6b8e23]">→</span> Direct helicopter transfer from Kruger Mpumalanga</p>
|
||||||
|
<p><span className="text-[#6b8e23]">→</span> Luxury vehicle collection from Hoedspruit Eastgate</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 space-y-1 text-[#eeeee7]/60 text-xs">
|
||||||
|
<p><Phone className="inline w-3 h-3 mr-1" /> +27 83 456 7890</p>
|
||||||
|
<p><Mail className="inline w-3 h-3 mr-1" /> concierge@moltenrock.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Enquiry Form */}
|
||||||
|
<div className="bg-[#17170f] p-8 rounded-sm border border-[#404030]">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-center">
|
||||||
|
<p className="text-[#f5f5dc] text-2xl font-light mb-4" style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)' }}>Thank you</p>
|
||||||
|
<p className="text-[#eeeee7]/70 text-sm" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>
|
||||||
|
A personal host will respond within 24 hours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label className="block text-[#eeeee7]/50 text-xs uppercase tracking-wider mb-2" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Name</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full bg-[#1a1a12] border border-[#404030] rounded-sm px-4 py-3 text-[#eeeee7] placeholder:text-[#eeeee7]/40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-[#eeeee7]/50 text-xs uppercase tracking-wider mb-2" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Email</label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full bg-[#1a1a12] border border-[#404030] rounded-sm px-4 py-3 text-[#eeeee7] placeholder:text-[#eeeee7]/40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-[#eeeee7]/50 text-xs uppercase tracking-wider mb-2" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Interest</label>
|
||||||
|
<select
|
||||||
|
name="interest"
|
||||||
|
value={formData.interest}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full bg-[#1a1a12] border border-[#404030] rounded-sm px-4 py-3 text-[#eeeee7] appearance-none"
|
||||||
|
style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}
|
||||||
|
>
|
||||||
|
<option value="Suites">Suites</option>
|
||||||
|
<option value="Safari">Safari</option>
|
||||||
|
<option value="Spa">Spa & Wellness</option>
|
||||||
|
<option value="Dining">Fine Dining</option>
|
||||||
|
<option value="Whole Retreat">Whole Retreat</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-[#eeeee7]/50 text-xs uppercase tracking-wider mb-2" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Message</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
rows={4}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full bg-[#1a1a12] border border-[#404030] rounded-sm px-4 py-3 text-[#eeeee7] placeholder:text-[#eeeee7]/40 resize-none"
|
||||||
|
placeholder="Tell us your preferences..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-[#6b8e23] hover:bg-[#5a7a1c] text-[#eeeee7] py-3 text-sm uppercase tracking-widest transition-all duration-200 ease-out rounded-sm"
|
||||||
|
style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}
|
||||||
|
>
|
||||||
|
Send Enquiry
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user