Deploy

src/components/sections/RegalWelcomeSection.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { Link } from 'next/link'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import { MapPin } from 'lucide-react'
+
+export default function RegalWelcomeSection() {
+  return (
+    <section data-vula-section="regalwelcome" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/33613747/pexels-photo-33613747.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="KwaNtofontofo Guest House entrance with warm African sunset"
+          fill
+          sizes="100vw"
+          className="object-cover brightness-[0.6]"
+          priority
+        />
+      </div>
+      <div className="relative z-10 text-center px-4 md:px-8 max-w-4xl">
+        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 drop-shadow-lg leading-tight">
+          KwaNtofontofo
+        </h1>
+        <p className="text-lg md:text-2xl text-white/90 mb-2 font-serif italic">
+          &ldquo;I am because we are&rdquo; &mdash; Ubuntu meets English grace
+        </p>
+        <p className="text-base md:text-xl text-white/80 mb-6 max-w-2xl mx-auto">
+          A cosy home away from home with complete privacy, tranquil gardens, and royal treatment.
+        </p>
+        <div className="flex justify-center gap-4 mb-8">
+          <a
+            href="/booking"
+            className="bg-[#d4af37] hover:bg-[#c49a2e] text-white font-semibold px-8 py-4 rounded-lg shadow-lg transition-all duration-200 ease-out text-lg"
+          >
+            ★ Book a Room
+          </a>
+          <a
+            href="#themed-suites"
+            className="border-2 border-white text-white font-semibold px-8 py-4 rounded-lg hover:bg-white hover:text-gray-900 transition-all duration-200 ease-out text-lg"
+          >
+            Explore Suites
+          </a>
+        </div>
+        <div className="flex flex-wrap justify-center gap-6 text-white/70 text-sm">
+          <span className="flex items-center gap-1"><MapPin className="w-4 h-4" /> 44 Rutherford Circle, Bisley</span>
+          <span className="flex items-center gap-1"><MapPin className="w-4 h-4" /> 1 km from Pietermaritzburg Airport</span>
+        </div>
+      </div>
+    </section>
+  )
+}