Vula Builder
46 lines
2.8 KiB
TypeScript
46 lines
2.8 KiB
TypeScript
import Image from 'next/image'
|
|
import Button from '@/components/ui/Button'
|
|
|
|
export default function MoltenRockOriginsSection() {
|
|
return (
|
|
<section data-vula-section="moltenrockorigins" id="our-story" className="py-24 bg-[#17170f]">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
<div className="relative h-96 md:h-[500px] overflow-hidden rounded-md border border-[#404030]">
|
|
<Image
|
|
src="https://images.pexels.com/photos/13033134/pexels-photo-13033134.jpeg?auto=compress&cs=tinysrgb&h=350"
|
|
alt="Ancient volcanic landscape of the Greater Kruger"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#17170f]/30 to-transparent" />
|
|
</div>
|
|
<div>
|
|
<div className="inline-flex items-center gap-4 mb-6">
|
|
<span className="block w-14 h-px bg-[#6b8e23]" />
|
|
<p className="font-sans uppercase tracking-[0.2em] text-[#6b8e23] text-sm">Origins</p>
|
|
<span className="block w-14 h-px bg-[#6b8e23]" />
|
|
</div>
|
|
<h2 className="font-serif font-light text-4xl md:text-5xl text-[#f5f5dc] leading-tight mb-6">
|
|
Born from <span className="italic text-[#6b8e23]">fire</span>, rooted in conservation
|
|
</h2>
|
|
<p className="text-[#eeeee7]/80 leading-relaxed mb-6">
|
|
Molten Rock Private Reserve was carved from an ancient volcanic ridge by the Moloi family — a legacy of custodianship passed down through three generations. Where molten lava once scarred the earth, nutrient-rich soils now sustain an astonishing density of wildlife: lion, leopard, elephant, and over 340 bird species.
|
|
</p>
|
|
<p className="text-[#eeeee7]/70 leading-relaxed mb-8">
|
|
We chose to build only six suites — not for scarcity, but for intimacy. Every game drive is private, every meal is a conversation with the bush, every guest leaves knowing they belong to this land. Our foundation is conservation-led hospitality: 15% of every booking directly funds anti-poaching patrols and community education in neighbouring villages.
|
|
</p>
|
|
<div className="flex flex-wrap gap-6 text-sm font-sans uppercase tracking-wider">
|
|
<span className="text-[#6b8e23]">24,000 acres</span>
|
|
<span className="text-[#eeeee7]/40">|</span>
|
|
<span className="text-[#6b8e23]">6 exclusive suites</span>
|
|
<span className="text-[#eeeee7]/40">|</span>
|
|
<span className="text-[#6b8e23]">3rd generation stewards</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |