diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..84ca078
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,23 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function HeroSection() {
+  const imageUrl = "https://images.pexels.com/photos/5710468/pexels-photo-5710468.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+
+  return (
+    <section data-vula-section="hero" id="hero" className="relative min-h-[88vh] text-white">
+      {imageUrl ? (
+        <Image src={imageUrl} alt="eKhayalami" fill className="absolute inset-0 object-cover" sizes="100vw" priority />
+      ) : (
+        <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, #ea580c, #36454F)" }} />
+      )}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/10" />
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[88vh] text-center px-6">
+        <p className="uppercase tracking-[0.1em] text-[12.5px] font-semibold text-white/70 mb-4">{"eKhayalami"}</p>
+        <h1 className="text-5xl lg:text-6xl font-extrabold tracking-[-0.02em] mb-6 max-w-4xl">{"A Durban-born homeware brand that fuses rural KZN women's cooperative "}<span className="text-[#6b8e23]">{"craftsmanship with."}</span></h1>
+        <p className="text-lg lg:text-xl text-white/80 max-w-2xl mb-9">{"Professional handcrafted homeware online store in South Africa."}</p>
+        <Link href="/products" className="inline-block bg-[#6b8e23] text-white px-8 py-4 text-base font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all duration-200">Shop now</Link>
+      </div>
+    </section>
+  )
+}