Deploy
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
|
||||
import { Car, MapPin, Plane } from 'lucide-react'
|
||||
|
||||
export default function LocationFindSection() {
|
||||
const googleMapsLink = 'https://maps.google.com/?q=-24.354,+30.976'
|
||||
|
||||
return (
|
||||
<section data-vula-section="locationfind" id="find-us" className="py-20 bg-[#f7f9f4]">
|
||||
<div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center">
|
||||
{/* Static map image with external link */}
|
||||
<a
|
||||
href={googleMapsLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative block aspect-video rounded-xl overflow-hidden shadow-md group bg-[#dee2d4]"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[url('https://www.openstreetmap.org/export/embed.html?bbox=30.9,-24.4,31.0,-24.3&layer=mapnik')] bg-cover bg-center opacity-70" />
|
||||
<div className="absolute inset-0 bg-[#8b5a3c]/20 group-hover:bg-[#8b5a3c]/30 transition-colors" />
|
||||
<div className="absolute bottom-4 left-4 right-4 bg-white/80 backdrop-blur p-3 rounded-lg text-sm text-[#1b210d]">
|
||||
<MapPin className="inline w-4 h-4 text-[#6b8e23] mr-1" />
|
||||
Thornveld Game Lodge • R40, Hoedspruit, Limpopo
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-[#1b210d] mb-4">Find us in the wild</h2>
|
||||
<p className="text-[#8b5a3c] mb-6">
|
||||
We are tucked just outside Hoedspruit, a short drive from Kruger's Orpen Gate, within the Big Five Balule Nature Reserve. The roads are good — any sedan makes it.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 text-[#1b210d] text-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<Car className="w-5 h-5 text-[#6b8e23] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Driving from Johannesburg</p>
|
||||
<p className="text-[#8b5a3c]">Take the N12 to eMalahleni, then the N4 towards Nelspruit. Turn north on the R40 past White River. About 5 hours, all tar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Plane className="w-5 h-5 text-[#6b8e23] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Nearest airports</p>
|
||||
<p className="text-[#8b5a3c]">Kruger Mpumalanga International (KMIA) — 90 min drive. Hoedspruit Airport (HDS) — 30 min. We can arrange a shuttle.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-[#6b8e23] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Balule Nature Reserve</p>
|
||||
<p className="text-[#8b5a3c]">Part of the Greater Kruger ecosystem — no fences between us and the park. Expect elephant, lion, and leopard wandering through.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user