From 2ad94de0ae45b568f4095a837371e66d78754ffc Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 16:40:57 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/LocationSection.tsx b/src/components/sections/LocationSection.tsx
new file mode 100644
index 0000000..dac6204
--- /dev/null
+++ b/src/components/sections/LocationSection.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/Card'
+import { Compass, Landmark, MapPin, TreePine } from 'lucide-react'
+
+export default function LocationSection() {
+  const highlights = [
+    {
+      icon: MapPin,
+      label: 'vaVenda Lodge',
+      desc: 'Farm 45, Alldays Road, Alldays, Limpopo'
+    },
+    {
+      icon: Compass,
+      label: 'From Polokwane',
+      desc: '2h15min via R521 north. Turn left onto Alldays Road after 85 km.'
+    },
+    {
+      icon: Landmark,
+      label: 'Mapungubwe National Park',
+      desc: '45 min drive – UNESCO World Heritage site with ancient gold rhino artifacts.'
+    },
+    {
+      icon: TreePine,
+      label: 'Northern Sotho & Venda Villages',
+      desc: 'Guided cultural tours available – meet local artisans and taste traditional dishes.'
+    }
+  ]
+
+  return (
+    <section data-vula-section="location" id="location" className="py-24 bg-[#f9f7f4]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-[#211c0d] text-center mb-4 font-bricolage">
+          Find Us in the Heart of Limpopo
+        </h2>
+        <p className="text-[#211c0d]/70 text-center max-w-2xl mx-auto mb-12 font-lora italic">
+          Nestled between the baobab-studded savannah and the ancient sandstone hills, vaVenda Lodge is remote enough to feel like a secret, yet close enough to major attractions.
+        </p>
+
+        <div className="grid md:grid-cols-2 gap-8 mb-12">
+          {/* Map */}
+          <div className="rounded-xl overflow-hidden shadow-md border border-[#e2dfd4] h-80">
+            <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 interactive map"
+            />
+          </div>
+
+          {/* Highlights list */}
+          <div className="space-y-4">
+            {highlights.map((item, index) => {
+              const Icon = item.icon
+              return (
+                <Card key={index} className="border border-[#e2dfd4] shadow-sm">
+                  <CardContent className="flex items-start gap-4 p-5">
+                    <div className="bg-[#d4af37]/10 p-2 rounded-full">
+                      <Icon className="w-5 h-5 text-[#d4af37]" />
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-[#211c0d]">{item.label}</h4>
+                      <p className="text-sm text-[#211c0d]/70">{item.desc}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="text-center">
+          <p className="text-[#211c0d]/60 text-sm">
+            <strong>GPS coordinates:</strong> S 22° 59' 15.6" E 29° 07' 26.8" – accurate for offline navigation.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file