diff --git a/src/components/sections/iKhayaHeroSection.tsx b/src/components/sections/iKhayaHeroSection.tsx
new file mode 100644
index 0000000..ec66354
--- /dev/null
+++ b/src/components/sections/iKhayaHeroSection.tsx
@@ -0,0 +1,31 @@
+'use client'
+import Image from 'next/image'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function iKhayaHeroSection() {
+  const { items, loading } = useVulaContent('hero_banners')
+  if (loading) return <div className="flex justify-center py-16"><div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" /></div>
+  if (items.length === 0) return null
+
+  return (
+    <section id="ikhayahero" data-vula-section="ikhayahero" data-vula-cms="hero_banners" className="relative overflow-hidden bg-gray-900 text-white">
+      {items.slice(0, 1).map((item) => {
+        const d = item.data as { title?: string; subtitle?: string; cta_text?: string; cta_url?: string; image?: string }
+        return (
+          <div key={item.id} className="relative min-h-[480px] flex items-center">
+            {d.image && <Image src={d.image} alt={d.title || ''} fill className="object-cover opacity-40" />}
+            <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+              {d.title && <h2 className="text-4xl sm:text-5xl font-bold mb-4 max-w-2xl">{d.title}</h2>}
+              {d.subtitle && <p className="text-xl text-gray-200 mb-8 max-w-xl">{d.subtitle}</p>}
+              {d.cta_text && (
+                d.cta_url
+                  ? <a href={d.cta_url} className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</a>
+                  : <button className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</button>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </section>
+  )
+}