Deploy

src/components/sections/KwaNtofontofoHeroSection.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import Image from "next/image"
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+export default function KwaNtofontofoHeroSection() {
+  return (
+    <section data-vula-section="kwantofontofohero"
+      id="hero"
+      className="relative min-h-[80vh] overflow-hidden"
+    >
+      {/* Ken Burns animated background */}
+      <div
+        className="absolute inset-0"
+        style={{ animation: "kenBurns 16s ease-in-out infinite" }}
+      >
+        <Image
+          src="https://images.pexels.com/photos/34515222/pexels-photo-34515222.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="KwaNtofontofo guest house exterior with pool and garden"
+          fill
+          sizes="100vw"
+          priority
+          className="object-cover"
+        />
+      </div>
+      {/* Dark gradient overlay */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-black/20" />
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-6 text-white">
+        <h1 className="text-5xl md:text-6xl font-bold mb-6 drop-shadow-lg">
+          Welcome to KwaNtofontofo
+        </h1>
+        <p className="text-xl md:text-2xl text-white/80 max-w-2xl mb-8">
+          A cosy home away from home – luxury bedrooms, tranquil pool area,
+          and zebras grazing just across the street.
+        </p>
+        <Link href="/booking">
+          <Button
+            variant="default"
+            size="lg"
+            className="bg-[#F1C40F] text-black hover:bg-yellow-400 font-semibold px-8 py-4 text-lg"
+          >
+            Book Your Stay
+          </Button>
+        </Link>
+      </div>
+      <style jsx>{`
+        @keyframes kenBurns {
+          0% { transform: scale(1) translate(0, 0); }
+          25% { transform: scale(1.1) translate(-2%, -1%); }
+          50% { transform: scale(1.05) translate(1%, 2%); }
+          75% { transform: scale(1.15) translate(-1%, -2%); }
+          100% { transform: scale(1) translate(0, 0); }
+        }
+      `}</style>
+    </section>
+  )
+}