Vula Builder
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import Button from "@/components/ui/Button"
|
|
import Image from "next/image"
|
|
|
|
export default function BookYourStayCTASection() {
|
|
return (
|
|
<section data-vula-section="bookyourstaycta" id="book-your-stay" className="relative h-[60vh] md:h-[70vh] overflow-hidden">
|
|
{/* Background image with overlay */}
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="https://images.pexels.com/photos/13872620/pexels-photo-13872620.jpeg?auto=compress&cs=tinysrgb&w=1200&h=800&fit=crop"
|
|
alt="Bushveld sanctuary interior"
|
|
fill
|
|
sizes="100vw"
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#C0392B]/80 via-[#C0392B]/60 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-6 text-white">
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 drop-shadow-lg">
|
|
Your bushveld sanctuary is waiting
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-white/80 max-w-2xl mb-10">
|
|
Best online rates — book direct and secure your themed room today.
|
|
</p>
|
|
<Button
|
|
variant="default"
|
|
className="bg-[#F1C40F] text-[#2C1810] hover:bg-[#E67E22] hover:text-white px-10 py-4 text-lg font-semibold rounded-xl shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out"
|
|
asChild
|
|
>
|
|
<a href="/booking">Check Availability & Book</a>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|