diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..2615675
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link"
+
+export default function HeroSection() {
+  return (
+    <section data-vula-section="hero" id="hero" className="relative min-h-[72vh] flex flex-col items-center justify-center px-6 py-24 text-center" style={{ backgroundColor: "#0f1712", color: "#e7eeea" }}>
+      <div className="pointer-events-none absolute inset-4 z-20 border" style={{ borderColor: "#16a34a59" }} />
+      <p className="uppercase tracking-[0.32em] text-[11.5px] text-[#16a34a] mb-4">{"Mpofana Lodge"}</p>
+        <h1 className="text-6xl lg:text-7xl font-light tracking-[0.01em] mb-7 max-w-4xl">{"Luxury bush accommodation in the heart of KwaZulu Natal offering an "}<em className="italic" style={{ color: "#16a34a" }}>{"authentic African."}</em></h1>
+      <p className="text-lg lg:text-xl max-w-xl mb-10" style={{ color: "#94a89c" }}>{"Professional boutique lodge in South Africa."}</p>
+      <Link href="/booking" className="inline-block border border-[#16a34a] text-[#16a34a] px-9 py-4 text-[12.5px] uppercase tracking-[0.24em] hover:bg-[#16a34a] hover:text-black transition-all duration-300">Book a room</Link>
+    </section>
+  )
+}