From 285c38bcffc9c151d68a49eb5f047b40c34e2c1d Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 25 Jul 2026 13:58:35 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/GetInTouchSection.tsx b/src/components/sections/GetInTouchSection.tsx
new file mode 100644
index 0000000..4f232fb
--- /dev/null
+++ b/src/components/sections/GetInTouchSection.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { Mail, MapPin, Phone } from 'lucide-react';
+
+export default function GetInTouchSection() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert('Thank you! We will get back to you within 24 hours.');
+  };
+
+  return (
+    <section data-vula-section="getintouch" id="contact" className="bg-white py-20 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#210d0d] font-sans">
+            Get in touch
+          </h2>
+          <p className="text-lg text-[#210d0d]/70 italic font-serif max-w-xl mx-auto mt-3">
+            Let us craft your perfect Maasai Mara experience.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          {/* Contact Form */}
+          <div className="bg-[#f9f4f4] rounded-2xl shadow-md p-8">
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <Input
+                label="Your Name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+              <Input
+                label="Email Address"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+              <div>
+                <label className="block text-sm font-medium text-[#210d0d] mb-1">Message</label>
+                <textarea
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  rows={4}
+                  required
+                  className="w-full rounded-lg border border-[#e2d4d4] bg-white px-4 py-3 text-sm text-[#210d0d] placeholder:text-[#210d0d]/40 focus:outline-none focus:ring-2 focus:ring-[#dc2626]"
+                  placeholder="Tell us about your stay preferences..."
+                />
+              </div>
+              <Button variant="default" size="lg" type="submit" className="w-full">
+                Send Message
+              </Button>
+            </form>
+          </div>
+
+          {/* Contact Details & Map */}
+          <div className="space-y-8">
+            <div className="space-y-4">
+              <div className="flex items-start gap-4">
+                <Phone className="w-5 h-5 mt-1 text-[#0f52ba]" />
+                <div>
+                  <p className="font-semibold text-[#210d0d]">WhatsApp / Phone</p>
+                  <p className="text-[#210d0d]/70">+254 700 123456</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-4">
+                <Mail className="w-5 h-5 mt-1 text-[#0f52ba]" />
+                <div>
+                  <p className="font-semibold text-[#210d0d]">Email</p>
+                  <p className="text-[#210d0d]/70">info@masaisuites.com</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-4">
+                <MapPin className="w-5 h-5 mt-1 text-[#0f52ba]" />
+                <div>
+                  <p className="font-semibold text-[#210d0d]">Location</p>
+                  <p className="text-[#210d0d]/70">Maasai Mara National Reserve, Kenya</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Embedded Map */}
+            <div className="rounded-2xl overflow-hidden shadow-md h-64 bg-[#f9f4f4]">
+              <iframe
+                title="Masai Suites Location"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127630.563580674!2d35.0!3d-1.5833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182a1a1a1a1a1a1%3A0x0!2sMaasai%20Mara%20National%20Reserve!5e0!3m2!1sen!2ske!4v123456789"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}