42 lines
2.1 KiB
TypeScript
42 lines
2.1 KiB
TypeScript
// 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 Button from '@/components/ui/Button';
|
|
import Tag from '@/components/ui/Tag';
|
|
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
|
import ScrollReveal from '@/components/ui/ScrollReveal';
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
export default function HeroSection(): React.JSX.Element {
|
|
return (
|
|
<div id="hero" data-webild-section="hero" className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
|
|
<SectionErrorBoundary name="hero">
|
|
<div className="absolute inset-0 z-0">
|
|
<ImageOrVideo
|
|
imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
</div>
|
|
|
|
<div className="relative z-10 container mx-auto px-4 text-center">
|
|
<ScrollReveal variant="slide-up">
|
|
<Tag text="Your Ultimate Escape" className="mb-6 mx-auto bg-black/50 text-white border-white/20" />
|
|
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
|
|
Experience Unrivaled Luxury<br />
|
|
<span className="text-primary-cta">at The Grand Hotel</span>
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-white/90 max-w-content-width mx-auto">
|
|
Discover a world of refined elegance, impeccable service, and breathtaking amenities designed for an unforgettable stay. Your perfect getaway begins here.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Button text="Book Your Stay" variant="primary" href="#contact" className="px-8 py-4 text-lg" />
|
|
<Button text="Explore Rooms" variant="secondary" href="#rooms" className="px-8 py-4 text-lg text-white border-white/20" />
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
);
|
|
} |