Vula Builder
25 lines
1.7 KiB
TypeScript
25 lines
1.7 KiB
TypeScript
import Image from "next/image"
|
|
import Link from "next/link"
|
|
|
|
export default function HeroSection() {
|
|
const imageUrl = "https://images.pexels.com/photos/9056675/pexels-photo-9056675.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
|
|
|
|
return (
|
|
<section data-vula-section="hero" id="hero" className="relative min-h-[88vh] text-white">
|
|
{imageUrl ? (
|
|
<Image src={imageUrl} alt="Zulwini Lodge" fill className="absolute inset-0 object-cover" sizes="100vw" priority />
|
|
) : (
|
|
<div className="absolute inset-0" style={{ background: "linear-gradient(135deg, #ea580c, #2563eb)" }} />
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/10" />
|
|
<div className="absolute top-6 right-6 z-20 w-24 h-24 rounded-full flex items-center justify-center text-center text-[13px] font-bold leading-tight text-white -rotate-12" style={{ backgroundColor: "#ea580c" }}>Fresh daily</div>
|
|
<div className="relative z-10 flex flex-col items-center justify-center min-h-[88vh] text-center px-6">
|
|
<p className="uppercase tracking-[0.1em] text-[12.5px] font-semibold text-white/70 mb-4">{"Zulwini Lodge"}</p>
|
|
<h1 className="text-5xl lg:text-6xl font-extrabold tracking-[-0.02em] mb-6 max-w-4xl">{"A boutique lodge offering intimate luxury bush accommodation in KwaZulu "}<span className="text-[#ea580c]">{"Natal, combining."}</span></h1>
|
|
<p className="text-lg lg:text-xl text-white/80 max-w-2xl mb-9">{"Professional boutique lodge in South Africa."}</p>
|
|
<Link href="/booking" className="inline-block bg-[#ea580c] text-white px-8 py-4 text-base font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all duration-200">Book a room</Link>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|