Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function HeroSection() {
+  const imageUrl = "https://images.pexels.com/photos/35258541/pexels-photo-35258541.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+
+  return (
+    <section data-vula-section="hero" id="hero" className="relative flex flex-col md:flex-row min-h-[82vh]">
+      <div className="relative w-full md:w-1/2 h-72 md:h-auto min-h-[320px] overflow-hidden">
+        {imageUrl ? (
+          <Image src={imageUrl} alt="Molten Rock Private Reserve" fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" priority />
+        ) : (
+          <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, #36454F, #d4af37)" }} />
+        )}
+      </div>
+      <div className="w-full md:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-14" style={{ backgroundColor: "#f2f4f5", color: "#1f2b33" }}>
+        <p className="uppercase tracking-[0.12em] text-[12px] opacity-55 mb-4">{"Molten Rock Private Reserve"}</p>
+        <h1 className="text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"An ultra-private, 6-suite safari sanctuary in the Greater Kruger offering "}<span className="text-[#16a34a]">{"bespoke game."}</span></h1>
+        <p className="text-base lg:text-lg mb-8 max-w-lg" style={{ color: "#5c6870" }}>{"Professional safari retreat in South Africa."}</p>
+        <div className="w-fit"><Link href="#contact" className="inline-block bg-[#36454F] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Get in touch</Link></div>
+      </div>
+    </section>
+  )
+}