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/36464518/pexels-photo-36464518.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="Masai Suites" fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" priority />
+        ) : (
+          <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, #8b5a3c, #d4af37)" }} />
+        )}
+      </div>
+      <div className="w-full md:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-14" style={{ backgroundColor: "#17120f", color: "#eeeae7" }}>
+        <p className="uppercase tracking-[0.32em] text-[11.5px] text-[#6b8e23] mb-4">{"Masai Suites"}</p>
+        <h1 className="text-4xl lg:text-5xl font-light tracking-[0.01em] mb-6 max-w-4xl">{"Boutique accommodation that fuses modern comfort with Maasai cultural "}<em className="italic" style={{ color: "#6b8e23" }}>{"elements, offering."}</em></h1>
+        <p className="text-base lg:text-lg mb-8 max-w-lg" style={{ color: "#a89c94" }}>{"Professional boutique hotel in South Africa."}</p>
+        <div className="w-fit"><Link href="/booking" className="inline-block border border-[#6b8e23] text-[#6b8e23] px-9 py-4 text-[12.5px] uppercase tracking-[0.24em] hover:bg-[#6b8e23] hover:text-black transition-all duration-300">Book a room</Link></div>
+      </div>
+    </section>
+  )
+}