From d8e80f7a21c81067b37a6378b0b121b8a6e75225 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 14 Jul 2026 18:35:20 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/MoltenRockOriginsSection.tsx b/src/components/sections/MoltenRockOriginsSection.tsx
new file mode 100644
index 0000000..bd85fbe
--- /dev/null
+++ b/src/components/sections/MoltenRockOriginsSection.tsx
@@ -0,0 +1,46 @@
+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>
+  )
+}
\ No newline at end of file