diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..54be39e
--- /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://uploads.vulai.co.za/vula-uploads/e691b2f9-937a-45fd-a18f-c5b9cf1193f2/library/563a1f743e9209847727c3b488dd685b87ce828c1c3a1bff0fd9ba9712a9e189.jpg"
+
+  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="The Bay Chiro" fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" priority />
+        ) : (
+          <div className="absolute inset-0 bg-gradient-to-br from-primary to-secondary" />
+        )}
+      </div>
+      <div className="w-full md:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-14" style={{ backgroundColor: "#f2f4f5", color: "#1f2a33" }}>
+        <h1 className="text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"The Bay "}<span className="text-accent">{"Chiro"}</span></h1>
+        <p className="text-base lg:text-lg mb-8 max-w-lg" style={{ color: "#535d65" }}>{"A specialised chiropractic practice led by Dr. K.P. Khumalo (M.TECH.CHIRO.S.A) offering tailored, evidence-based treatment plans for the whole family — from 6-week-old babies to pregnant mothers and athletes — addressing the root cause of musculoskeletal and nervous system disorders, not just symptoms."}</p>
+        <div className="w-fit"><Link href="#contact" className="inline-block bg-primary text-primary-foreground 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>
+  )
+}