|
|
|
|
@@ -1,35 +1,88 @@
|
|
|
|
|
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
|
|
|
|
// file as the canonical source for the "hero" section.
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
|
import Button from '@/components/ui/Button';
|
|
|
|
|
import Tag from '@/components/ui/Tag';
|
|
|
|
|
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
|
|
|
|
|
|
|
|
|
export default function HeroSection(): React.JSX.Element {
|
|
|
|
|
const images = [
|
|
|
|
|
"http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg",
|
|
|
|
|
"http://img.b2bpic.net/free-photo/luxury-pool-villa-spectacular-contemporary-design-digital-art-real-estate-home-house-property-ge_1258-150749.jpg",
|
|
|
|
|
"http://img.b2bpic.net/free-photo/3d-rendering-beautiful-luxury-bedroom-suite-hotel-with-tv_105762-2301.jpg"
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const intervalTime = 5000; // 5 seconds
|
|
|
|
|
const updateInterval = 50; // Update progress every 50ms
|
|
|
|
|
const step = (updateInterval / intervalTime) * 100;
|
|
|
|
|
|
|
|
|
|
const timer = setInterval(() => {
|
|
|
|
|
setProgress((prev) => {
|
|
|
|
|
if (prev >= 100) return 100;
|
|
|
|
|
return prev + step;
|
|
|
|
|
});
|
|
|
|
|
}, updateInterval);
|
|
|
|
|
|
|
|
|
|
return () => clearInterval(timer);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (progress >= 100) {
|
|
|
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
|
|
|
setProgress(0);
|
|
|
|
|
}
|
|
|
|
|
}, [progress, images.length]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div id="hero" data-webild-section="hero" className="relative w-full min-h-[80vh] flex items-center justify-center overflow-hidden">
|
|
|
|
|
<div id="hero" data-webild-section="hero" className="w-full pt-32 pb-16 px-4 md:px-8 bg-background">
|
|
|
|
|
<SectionErrorBoundary name="hero">
|
|
|
|
|
<div className="absolute inset-0 z-0">
|
|
|
|
|
<ImageOrVideo
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg"
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
/>
|
|
|
|
|
<div className="absolute inset-0 bg-black/50" />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="relative z-10 container mx-auto px-4 text-center flex flex-col items-center gap-6 py-24">
|
|
|
|
|
<Tag text="Welcome to Luxury" className="bg-background/20 text-white border-white/30 backdrop-blur-md" />
|
|
|
|
|
<h1 className="text-5xl md:text-7xl font-bold text-white max-w-4xl">
|
|
|
|
|
Experience Unparalleled Comfort & Elegance
|
|
|
|
|
</h1>
|
|
|
|
|
<p className="text-lg md:text-xl text-white/90 max-w-2xl">
|
|
|
|
|
Discover a world where impeccable service meets sophisticated design. Your unforgettable journey begins here.
|
|
|
|
|
</p>
|
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-4 mt-4">
|
|
|
|
|
<Button text="Book Your Stay" variant="primary" href="#contact" className="text-lg px-8 py-6" />
|
|
|
|
|
<Button text="Explore Rooms" variant="secondary" href="#accommodation" className="text-lg px-8 py-6 bg-white/10 text-white border-white/30 hover:bg-white/20" />
|
|
|
|
|
<div className="container mx-auto max-w-6xl flex flex-col items-center text-center gap-12">
|
|
|
|
|
<div className="flex flex-col items-center gap-6 max-w-4xl">
|
|
|
|
|
<Tag text="Welcome to Luxury" />
|
|
|
|
|
<h1 className="text-5xl md:text-7xl font-bold text-foreground">
|
|
|
|
|
Experience Unparalleled Comfort & Elegance
|
|
|
|
|
</h1>
|
|
|
|
|
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
|
|
|
|
|
Discover a world where impeccable service meets sophisticated design. Your unforgettable journey begins here.
|
|
|
|
|
</p>
|
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-4 mt-4">
|
|
|
|
|
<Button text="Book Your Stay" variant="primary" href="#contact" className="text-lg px-8 py-6" />
|
|
|
|
|
<Button text="Explore Rooms" variant="secondary" href="#accommodation" className="text-lg px-8 py-6" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="w-full rounded-3xl overflow-hidden shadow-2xl border border-border relative">
|
|
|
|
|
<div className="relative w-full h-[60vh]">
|
|
|
|
|
{images.map((src, index) => (
|
|
|
|
|
<div
|
|
|
|
|
key={src}
|
|
|
|
|
className={`absolute inset-0 transition-opacity duration-1000 ${index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
|
|
|
|
|
>
|
|
|
|
|
<ImageOrVideo
|
|
|
|
|
imageSrc={src}
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 w-full max-w-md px-4 z-20">
|
|
|
|
|
{images.map((_, index) => (
|
|
|
|
|
<div key={index} className="h-1.5 flex-1 bg-white/30 rounded-full overflow-hidden cursor-pointer" onClick={() => { setCurrentIndex(index); setProgress(0); }}>
|
|
|
|
|
<div
|
|
|
|
|
className="h-full bg-white transition-all duration-75 ease-linear"
|
|
|
|
|
style={{
|
|
|
|
|
width: index === currentIndex ? `${progress}%` : (index < currentIndex ? '100%' : '0%')
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SectionErrorBoundary>
|
|
|
|
|
|
