Deploy

src/components/sections/HeritageGlowHeroSection.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import { CircleArrowDown } from 'lucide-react'
+
+export default function HeritageGlowHeroSection() {
+  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
+
+  const item = items[0]
+  const d = item.data as { title?: string; subtitle?: string; cta_text?: string; cta_url?: string; image?: string }
+  const imageUrl = d.image || 'https://images.pexels.com/photos/9956160/pexels-photo-9956160.jpeg?auto=compress&cs=tinysrgb&h=650&w=940'
+
+  return (
+    <section id="hero" data-vula-section="heritageglowhero" data-vula-cms="hero_banners" className="relative min-h-[90vh] flex items-center overflow-hidden bg-[#2c331f]">
+      <div className="absolute inset-0">
+        <Image src={imageUrl} alt="Hero background" fill className="object-cover opacity-50" sizes="100vw" priority />
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-r from-[#2c331f]/80 to-transparent" />
+      <div className="relative container mx-auto px-6 lg:px-12 z-10">
+        <div className="max-w-2xl">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#f4f5f2] mb-6 leading-tight">
+            {d.title || 'Imvelo Yakho – Your Nature'}
+          </h1>
+          <p className="text-lg md:text-xl text-[#daddd4] mb-8 max-w-xl">
+            {d.subtitle || 'Handcrafted skincare from Pretoria\'s indigenous botanicals – cold-pressed, small-batch, rooted in South African wisdom.'}
+          </p>
+          <a href={d.cta_url || '#indigenous-botanicals'}>
+            <Button variant="default" size="lg" className="bg-[#ea580c] hover:bg-[#d24b0a] text-white border-none flex items-center gap-2">
+              {d.cta_text || 'Explore Our Range'}
+              <CircleArrowDown className="w-5 h-5" />
+            </Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}