Deploy

src/components/sections/MoltenRockHeroSection.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function MoltenRockHeroSection() {
+  return (
+    <section data-vula-section="moltenrockhero" id="hero" className="relative min-h-screen flex items-center overflow-hidden bg-[#17170f]">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/19281386/pexels-photo-19281386.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Dawn over volcanic rock formations and untouched bush"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-70"
+          priority
+        />
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-t from-[#17170f]/90 via-[#17170f]/50 to-transparent" />
+      <div className="relative container mx-auto px-6 text-center py-32">
+        <div className="inline-flex items-center gap-4 mb-8">
+          <span className="block w-14 h-px bg-[#6b8e23]" />
+          <p className="font-sans uppercase tracking-[0.2em] text-[#6b8e23] text-sm">Molten Rock Private Reserve</p>
+          <span className="block w-14 h-px bg-[#6b8e23]" />
+        </div>
+        <h1 className="font-serif font-light text-5xl md:text-7xl text-[#f5f5dc] leading-tight">
+          Where the Earth Breathes <span className="italic text-[#6b8e23]">Fire</span> and Silence
+        </h1>
+        <p className="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-[#eeeee7]/80 font-light">
+          An intimate, exclusive retreat in the Greater Kruger — 6 volcanic suites, private game drives, and a primal connection to the wild.
+        </p>
+        <div className="mt-10 flex gap-4 justify-center">
+          <Button variant="default" size="lg" href="/services">
+            Explore Experiences
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}