diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..0046744
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function HeroSection() {
+  const imageUrl = "https://images.pexels.com/photos/7195805/pexels-photo-7195805.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+
+  return (
+    <section data-vula-section="hero" id="hero" className="relative" style={{ backgroundColor: "#0077BE" }}>
+      <div className="hidden md:block min-h-[82vh] relative text-white">
+        <div className="absolute inset-0" style={{ clipPath: "polygon(0 0, 85% 0, 65% 100%, 0 100%)" }}>
+          {imageUrl && <Image src={imageUrl} alt="Zama Salon" fill className="object-cover" sizes="100vw" priority />}
+        </div>
+        <div className="absolute right-0 top-0 h-full w-[45%] flex flex-col justify-center px-10 lg:px-16">
+          <p className="uppercase tracking-[0.12em] text-[12px] text-white/70 mb-4">{"Zama Salon"}</p>
+        <h1 className="text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"A full-service Johannesburg salon that combines modern colouring, keratin "}<span className="text-[#FFD700]">{"and perm."}</span></h1>
+          <p className="text-base lg:text-lg text-white/75 mb-8 max-w-sm">{"Professional hair salon in South Africa."}</p>
+          <div className="w-fit"><Link href="#contact" className="inline-block bg-[#0077BE] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Book an appointment</Link></div>
+        </div>
+      </div>
+      <div className="flex flex-col md:hidden text-white">
+        <div className="relative h-72 w-full">
+          {imageUrl && <Image src={imageUrl} alt="Zama Salon" fill className="object-cover" sizes="100vw" priority />}
+        </div>
+        <div className="px-8 py-10" style={{ backgroundColor: "#0077BE" }}>
+          <p className="uppercase tracking-[0.12em] text-[12px] text-white/70 mb-4">{"Zama Salon"}</p>
+        <h1 className="text-3xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"A full-service Johannesburg salon that combines modern colouring, keratin "}<span className="text-[#FFD700]">{"and perm."}</span></h1>
+          <p className="text-base text-white/75 mb-6">{"Professional hair salon in South Africa."}</p>
+          <Link href="#contact" className="inline-block bg-[#0077BE] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Book an appointment</Link>
+        </div>
+      </div>
+    </section>
+  )
+}