Files
c37a4fcf-c88b-4162-bc20-020…/src/app/page.tsx
2026-01-04 19:40:43 +00:00

265 lines
11 KiB
TypeScript

"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
export default function LuxeHotelPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="sharp"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="elevated"
primaryButtonStyle="layered-depth"
secondaryButtonStyle="outline"
headingFontWeight="medium"
>
<div id="nav" data-section="nav" style={{ backgroundColor: '#ffffff' }}>
<NavbarLayoutFloatingOverlay
brandName="Luxe Hotel"
navItems={[
{ name: "About", id: "about" },
{ name: "Rooms", id: "rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Book Now",
href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero" style={{ backgroundColor: '#f5faff' }}>
<HeroBillboardScroll
title="Experience Luxury Hospitality"
description="Discover our world-class accommodations and world-renowned service. Your perfect getaway awaits."
tag="Premium Hotel Experiences"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837634719-5otl8omu.jpg"
imageAlt="Luxury hotel main entrance"
buttons={[
{ text: "Book Your Stay", href: "contact" },
{ text: "Explore Rooms", href: "rooms" }
]}
/>
</div>
<div id="about" data-section="about" style={{ backgroundColor: '#f0f5fa' }}>
<SplitAboutCards
title="World-Class Amenities"
description="Indulge in our carefully curated selection of premium facilities designed to enhance your stay."
tag="Our Signature Services"
features={[
{
id: "spa-wellness",
title: "Spa & Wellness Center",
description: "Rejuvenate with our full-service spa, featuring massages, facials, and holistic wellness treatments.",
label: "Featured Amenity"
},
{
id: "fine-dining",
title: "Fine Dining Restaurant",
description: "Savor exquisite cuisine prepared by award-winning chefs in our elegant restaurant overlooking the city.",
label: "Michelin Standards"
}
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="rooms" data-section="rooms" style={{ backgroundColor: '#ffffff' }}>
<ProductCardSeven
title="Our Room Collection"
description="Choose from our selection of thoughtfully designed rooms and suites tailored to your needs."
tag="Exceptional Accommodations"
products={[
{
id: "standard-room",
name: "Standard Room",
price: "$199/night",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837632717-e4zpxgio.jpg",
imageAlt: "Comfortable standard hotel room"
},
{
id: "deluxe-suite",
name: "Deluxe Suite",
price: "$349/night",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
imageAlt: "Luxurious deluxe suite"
},
{
id: "penthouse-suite",
name: "Penthouse Suite",
price: "$599/night",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767042151156-8ng4xj7e.jpg",
imageAlt: "Exclusive penthouse with city views"
}
]}
gridVariant="uniform-all-items-equal"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
buttons={[
{ text: "View All Rooms", href: "contact" }
]}
/>
</div>
<div id="amenities" data-section="amenities" style={{ backgroundColor: '#eeeeee' }}>
<FeatureCardNine
title="Discover Our Facilities"
description="From our state-of-the-art fitness center to our peaceful meditation garden, every detail matters."
tag="Premium Amenities"
features={[
{
id: 1,
title: "Olympic-Size Pool",
description: "Relax in our heated indoor and outdoor pools with panoramic city views.",
phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767042152041-ve4nrkbs.jpg"
},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg"
}
},
{
id: 2,
title: "24-Hour Concierge",
description: "Our dedicated team is ready to arrange everything from restaurant reservations to private tours.",
phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718910-pnoqmtth.jpg"
},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837634719-5otl8omu.jpg"
}
}
]}
showStepNumbers={true}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonials" data-section="testimonials" style={{ backgroundColor: '#f8f8f8' }}>
<TestimonialCardFifteen
testimonial="The staff was exceptionally attentive, the rooms were immaculate, and the attention to detail was remarkable. This hotel truly understands luxury hospitality. We're already planning our next visit!"
rating={5}
author="Sarah Mitchell, Travel Enthusiast"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
alt: "Sarah Mitchell"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767174020152-9baq80aq.jpg",
alt: "Guest Review"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg",
alt: "Guest Review"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767210899878-d9mgfhpc.jpg",
alt: "Guest Review"
}
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="pricing" data-section="pricing" style={{ backgroundColor: '#f5faff' }}>
<PricingCardSeven
title="Flexible Stay Options"
description="Select your preferred booking option and enjoy our best available rates."
tag="Special Offers"
plans={[
{
id: "weekend-getaway",
tag: "POPULAR CHOICE",
pricingOptions: [
{
value: "2nights",
label: "2 Nights",
price: "$349",
subtitle: "Per Night Average"
},
{
value: "weekend",
label: "Weekend Package",
price: "$599",
subtitle: "Friday to Sunday"
}
],
defaultOption: "weekend",
selectorNote: "Save 15% with weekend package",
description: "Perfect for a relaxing weekend escape with full access to all amenities.",
buttons: [
{ text: "Book Weekend", href: "contact" }
]
},
{
id: "extended-stay",
tag: "BEST VALUE",
pricingOptions: [
{
value: "weekly",
label: "7 Nights",
price: "$1,190",
subtitle: "Per Week"
},
{
value: "monthly",
label: "Monthly",
price: "$4,200",
subtitle: "Per Month"
}
],
defaultOption: "monthly",
selectorNote: "Save 30% on monthly stays",
description: "Enjoy significant savings on extended stays with complimentary room upgrades.",
buttons: [
{ text: "Book Extended", href: "contact" }
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="contact" data-section="contact" style={{ backgroundColor: '#f0f5fa' }}>
<ContactSplit
tag="Get in Touch"
title="Reserve Your Room Today"
description="Join our mailing list to receive exclusive offers, travel tips, and first access to special promotions."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718910-pnoqmtth.jpg"
imageAlt="Hotel lobby reception area"
mediaPosition="right"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our Terms and receive our newsletter."
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer" style={{ backgroundColor: '#1a1a1a' }}>
<FooterLogoReveal
logoText="Luxe Hotel"
/>
</div>
</ThemeProvider>
);
}