diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..b6d68f8
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,12 @@
+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: "#f9f4f4", color: "#210d0d" }}>
+      <p className="uppercase tracking-[0.1em] text-[12.5px] font-semibold opacity-60 mb-4">{"Masai Suites"}</p>
+        <h1 className="text-6xl lg:text-7xl font-extrabold tracking-[-0.02em] mb-7 max-w-4xl">{"A boutique hotel in Kenya that blends modern comfort with authentic "}<span className="text-[#d4af37]">{"Maasai culture,."}</span></h1>
+      <p className="text-lg lg:text-xl max-w-xl mb-10" style={{ color: "#6e5353" }}>{"Professional boutique hotel in South Africa."}</p>
+      <Link href="/booking" className="inline-block bg-[#d4af37] text-white px-8 py-4 text-base font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all duration-200">Book a room</Link>
+    </section>
+  )
+}