diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..b702d08
--- /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/29681464/pexels-photo-29681464.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="Diva" 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.24em] text-[12px] font-bold mb-4">{"Diva"}</p>
+        <h1 className="text-4xl lg:text-5xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-6 max-w-4xl">{"Curated bold modern fashion for ambitious young South African women, bridging "}<span className="text-transparent" style={{ WebkitTextStroke: "2px currentColor" }}>{"Cape Town."}</span></h1>
+          <p className="text-base lg:text-lg text-white/75 mb-8 max-w-sm">{"Professional online fashion boutique in South Africa."}</p>
+          <div className="w-fit"><Link href="/products" className="inline-block border-[3px] border-current px-7 py-3.5 text-[14px] font-bold uppercase tracking-[0.06em] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#FFD700] transition-all duration-150">Shop now</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="Diva" fill className="object-cover" sizes="100vw" priority />}
+        </div>
+        <div className="px-8 py-10" style={{ backgroundColor: "#0077BE" }}>
+          <p className="uppercase tracking-[0.24em] text-[12px] font-bold mb-4">{"Diva"}</p>
+        <h1 className="text-3xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-6 max-w-4xl">{"Curated bold modern fashion for ambitious young South African women, bridging "}<span className="text-transparent" style={{ WebkitTextStroke: "2px currentColor" }}>{"Cape Town."}</span></h1>
+          <p className="text-base text-white/75 mb-6">{"Professional online fashion boutique in South Africa."}</p>
+          <Link href="/products" className="inline-block border-[3px] border-current px-7 py-3.5 text-[14px] font-bold uppercase tracking-[0.06em] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#FFD700] transition-all duration-150">Shop now</Link>
+        </div>
+      </div>
+    </section>
+  )
+}