Deploy

2026-07-26 16:40:56 +00:00
parent 71ddefa9ab
commit 84521f9735
1 changed files with 112 additions and 0 deletions
@@ -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>
  )
 }