diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..d8b783c
--- /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: "#ffffff", color: "#101418" }}>
+      <p className="uppercase tracking-[0.24em] text-[12px] font-bold mb-4">{"Mzansi"}</p>
+        <h1 className="text-6xl lg:text-7xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-7 max-w-4xl">{"Authentic South African streetwear and casual fashion that fuses global trends "}<span className="text-transparent" style={{ WebkitTextStroke: "2px currentColor" }}>{"with local."}</span></h1>
+      <p className="text-lg lg:text-xl max-w-xl mb-10" style={{ color: "#5b6470" }}>{"Professional streetwear store 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_#d4af37] transition-all duration-150">Shop now</Link>
+    </section>
+  )
+}