Deploy

src/components/sections/RoyalThresholdSection.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import Button from "@/components/ui/Button"
+import { MapPin } from 'lucide-react'
+
+export default function RoyalThresholdSection() {
+  return (
+    <section data-vula-section="royalthreshold"
+      id="royal-threshold"
+      className="relative h-[80vh] lg:h-[90vh] overflow-hidden"
+    >
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        <img
+          src="https://images.pexels.com/photos/9131039/pexels-photo-9131039.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="KwaNtofoNtofo Guest House entrance"
+          className="object-cover w-full h-full"
+        />
+        <div className="absolute inset-0 bg-black/50" />
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col justify-center items-center h-full text-center px-4">
+        <div className="max-w-3xl">
+          <p className="text-[#d4af37] uppercase tracking-widest text-sm font-semibold mb-4">
+            Established 2004
+          </p>
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-4">
+            KwaNtofoNtofo
+          </h1>
+          <p className="text-xl md:text-2xl text-white/90 font-light mb-8">
+            Your Regal Home in the Bushveld
+          </p>
+          <Button variant="default" size="lg" className="bg-[#d4af37] hover:bg-[#b8962f] text-white font-semibold">
+            <a href="/services">Explore Our Rooms</a>
+          </Button>
+          <div className="flex items-center justify-center gap-2 text-white/70 mt-6 text-sm">
+            <MapPin className="w-4 h-4 text-[#d4af37]" />
+            <span>44 Rutherford Circle, Bisley, Pietermaritzburg</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}