Deploy

src/components/sections/SanctuaryLocationSection.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { Car, Compass, MapPin, Plane } from 'lucide-react'
+
+export default function SanctuaryLocationSection() {
+  const distances = [
+    { label: 'Hoedspruit Airport', time: '45 min drive' },
+    { label: 'Kruger Mpumalanga', time: '2 hr drive' },
+    { label: 'Johannesburg (JNB)', time: '5 hr drive / 1.5 hr flight' },
+  ]
+  return (
+    <section data-vula-section="sanctuarylocation" id="location" className="bg-[#f2f4f5] py-24 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex flex-col lg:flex-row gap-12 items-center">
+          {/* Map placeholder */}
+          <div className="relative w-full lg:w-1/2 aspect-[4/3] rounded-3xl overflow-hidden bg-[#d4dadd] shadow-xl">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <MapPin className="w-12 h-12 text-[#d4af37] mx-auto mb-2" />
+                <p className="text-sm text-[#1f2b33] font-medium">Greater Kruger, South Africa</p>
+              </div>
+            </div>
+            {/* Decorative grid lines */}
+            <div className="absolute inset-0 grid grid-cols-6 grid-rows-4">
+              {Array.from({ length: 24 }).map((_, i) => (
+                <div key={i} className="border border-[#c0c4c8]/30" />
+              ))}
+            </div>
+          </div>
+          {/* Travel notes */}
+          <div className="w-full lg:w-1/2">
+            <h2 className="text-4xl md:text-5xl font-light text-[#1f2b33] mb-4 leading-tight">
+              <span className="text-[#d4af37]">Untamed</span> by design
+            </h2>
+            <p className="text-[#4a5a66] text-lg mb-8 leading-relaxed max-w-[44ch]">
+              Nestled within the expansive Greater Kruger, Molten Rock lies at the
+              intersection of wilderness and refined seclusion. Arrive via private
+              airstrip or scenic road transfer from Hoedspruit.
+            </p>
+            <div className="space-y-5">
+              {distances.map((d, i) => (
+                <div key={i} className="flex items-center gap-4 bg-white rounded-2xl px-5 py-4 shadow-sm">
+                  <Compass className="w-5 h-5 text-[#16a34a] shrink-0" />
+                  <div>
+                    <p className="text-sm font-medium text-[#1f2b33]">{d.label}</p>
+                    <p className="text-xs text-[#4a5a66]">{d.time}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="mt-8 flex items-center gap-3 bg-[#d4af37]/10 rounded-xl px-5 py-3 text-sm text-[#1f2b33]">
+              <Plane className="w-5 h-5 text-[#d4af37]" />
+              <span>Helicopter transfers available for the ultimate entrance</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}