development/7dc00c09-da5f-4919-9232-c10bf09561ad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-29 21:09:04 +02:00
commit 4bedc9963c
300 changed files with 58342 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,179 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, Trophy } from 'lucide-react';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="LuxeStay"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="story" data-section="story">
<FeatureProcessSteps
tag="Our Heritage"
tagIcon={Award}
title="A Legacy of Excellence in Hospitality"
description="For over two decades, LuxeStay has been at the forefront of luxury hospitality, combining timeless elegance with modern innovation to create extraordinary experiences for discerning travelers from around the world."
useInvertedBackground="noInvert"
buttons={[
{ text: "Explore Our Story", href: "/contact" },
{ text: "View Gallery", href: "/rooms" }
]}
steps={[
{
number: "01",
title: "Founded on Excellence",
tag: "1998",
description: "Established with a vision to redefine luxury hospitality, combining traditional elegance with contemporary comfort."
},
{
number: "02",
title: "Award-Winning Service",
tag: "2010-Present",
description: "Recognized globally for exceptional service standards, earning prestigious hospitality awards and guest acclaim."
},
{
number: "03",
title: "Sustainable Innovation",
tag: "2020+",
description: "Leading the industry in sustainable luxury practices while maintaining our commitment to unparalleled guest experiences."
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="LuxeStay represents everything exceptional about luxury hospitality. The attention to detail, personalized service, and commitment to guest satisfaction creates an atmosphere where memories are made and cherished forever."
rating={5}
author="Michael Thompson, Luxury Travel Curator"
useInvertedBackground="invertDefault"
avatars={[
{
src: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
alt: "Michael Thompson"
},
{
src: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",
alt: "Guest testimonial"
},
{
src: "https://img.b2bpic.net/free-photo/portrait-elegant-professional-businesswoman_23-2150917266.jpg",
alt: "Guest testimonial"
},
{
src: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
alt: "Guest testimonial"
},
{
src: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
alt: "Guest testimonial"
},
{
src: "https://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-posing-purple-wall_176420-2852.jpg",
alt: "Guest testimonial"
}
]}
/>
</div>
<div id="achievements" data-section="achievements">
<MetricCardTwo
title="Celebrating Our Achievements"
description="Our dedication to excellence is reflected in the recognition we've received from industry leaders and the thousands of guests who choose LuxeStay for their most important moments."
tag="Award Winning"
tagIcon={Trophy}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="noInvert"
metrics={[
{
id: "1",
value: "25+",
description: "Years of Excellence"
},
{
id: "2",
value: "150+",
description: "Industry Awards"
},
{
id: "3",
value: "500K+",
description: "Satisfied Guests"
},
{
id: "4",
value: "99%",
description: "Recommendation Rate"
}
]}
/>
</div>
<FooterBaseReveal
columns={[
{
title: "About",
items: [
{ label: "Our Story", href: "/about" },
{ label: "Careers", href: "/about" },
{ label: "Press", href: "/about" },
{ label: "Blog", href: "/about" }
]
},
{
title: "Services",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Dining", href: "/rooms" },
{ label: "Spa & Wellness", href: "/rooms" },
{ label: "Events", href: "/rooms" }
]
},
{
title: "Contact",
items: [
{ label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
{ label: "Address: 123 Luxury Boulevard", href: "/contact" },
{ label: "24/7 Concierge Service", href: "/contact" }
]
}
]}
copyrightText="© 2025 LuxeStay Resort. All rights reserved."
/>
</ThemeProvider>
);
}

187
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,187 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import type { FooterColumn } from "@/components/shared/FooterColumns";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
const footerColumns: FooterColumn[] = [
{
title: "Product", items: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "FAQ", href: "/faq" },
],
},
{
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Blog", href: "/blog" },
{ label: "Careers", href: "/careers" },
],
},
{
title: "Resources", items: [
{ label: "Documentation", href: "/docs" },
{ label: "Support", href: "/support" },
{ label: "Contact", href: "/contact" },
],
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarLayoutFloatingOverlay
brandName="LuxeStay"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Rooms", id: "rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "Dining", id: "dining" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Book Now", href: "#pricing" }}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardThree
blogs={posts}
title="Discover LuxeStay"
description="Explore stories, insights, and updates from our luxury resort experience"
tag="Blog"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
/>
)}
<FooterBaseReveal
columns={[
{
title: "About", items: [
{ label: "Our Story", href: "#about" },
{ label: "Careers", href: "#careers" },
{ label: "Press", href: "#press" },
{ label: "Blog", href: "#blog" }
]
},
{
title: "Services", items: [
{ label: "Rooms & Suites", href: "#rooms" },
{ label: "Dining", href: "#dining" },
{ label: "Spa & Wellness", href: "#amenities" },
{ label: "Events", href: "#events" }
]
},
{
title: "Contact", items: [
{ label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
{ label: "Address: 123 Luxury Boulevard", href: "#" },
{ label: "24/7 Concierge Service", href: "#" }
]
}
]}
copyrightText="© 2025 LuxeStay Resort. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

186
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,186 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Mail, HelpCircle, Zap } from 'lucide-react';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="LuxeStay"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
title="Ready to Experience Luxury?"
description="Contact our dedicated team to book your stay or learn more about our premium accommodations and world-class amenities. We're here to make your luxury experience unforgettable."
tagIcon={Mail}
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email address"
buttonText="Start Your Journey"
termsText="We respect your privacy and will only use your information to provide exceptional service. Contact us anytime."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about your stay, bookings, and our amenities."
tag="Help & Support"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
showCard={true}
faqs={[
{
id: "1",
title: "What is your cancellation policy?",
content: "We offer flexible cancellation up to 48 hours before arrival for a full refund. Cancellations within 48 hours may incur a one-night charge. Premium suites have different terms—please contact our reservations team for details."
},
{
id: "2",
title: "Are pets allowed at the resort?",
content: "Yes, we welcome well-behaved pets. A non-refundable pet fee of $50 per stay applies. Pet amenities include food bowls, beds, and designated walking areas. Please inform us when booking."
},
{
id: "3",
title: "What time are check-in and check-out?",
content: "Standard check-in is at 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out may be available based on room availability. Contact the front desk for arrangements."
},
{
id: "4",
title: "Is breakfast included with all room types?",
content: "Yes, a complimentary gourmet breakfast is included with all room bookings. Breakfast is served daily from 6:30 AM to 10:30 AM in our main dining room."
},
{
id: "5",
title: "Do you offer airport transportation?",
content: "We provide complimentary airport shuttle service for all guests. Please provide your flight details during booking, and we'll arrange pickup at your convenience."
},
{
id: "6",
title: "What payment methods do you accept?",
content: "We accept all major credit cards (Visa, Mastercard, American Express), debit cards, and digital payment methods. A valid credit card is required at check-in for incidental charges."
}
]}
/>
</div>
<div id="booking" data-section="booking">
<PricingCardNine
title="Book Your Perfect Stay"
description="Reserve your luxury accommodation today. All rates include breakfast, premium amenities, and access to our world-class facilities."
tag="Special Rates"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
plans={[
{
id: "weekend",
title: "Weekend Getaway",
price: "$399",
period: "/2 nights",
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg",
imageAlt: "Weekend package",
features: [
"Deluxe room for 2 nights",
"Daily gourmet breakfast",
"Complimentary spa access",
"Late check-out included",
"Welcome champagne service"
],
button: {
text: "Book Weekend",
href: "#"
}
},
{
id: "business",
title: "Business Package",
price: "$559",
period: "/3 nights",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683429.jpg",
imageAlt: "Business package",
features: [
"Executive suite for 3 nights",
"Business center access",
"Express laundry service",
"Priority concierge support",
"Meeting room privileges",
"Airport transfer included"
],
button: {
text: "Book Business",
href: "#"
}
}
]}
/>
</div>
<FooterBaseReveal
columns={[
{
title: "About",
items: [
{ label: "Our Story", href: "/about" },
{ label: "Careers", href: "/about" },
{ label: "Press", href: "/about" },
{ label: "Blog", href: "/about" }
]
},
{
title: "Services",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Dining", href: "/rooms" },
{ label: "Spa & Wellness", href: "/rooms" },
{ label: "Events", href: "/rooms" }
]
},
{
title: "Contact",
items: [
{ label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
{ label: "Address: 123 Luxury Boulevard", href: "/contact" },
{ label: "24/7 Concierge Service", href: "/contact" }
]
}
]}
copyrightText="© 2025 LuxeStay Resort. All rights reserved."
/>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f7f6f7;;
--card: #ffffff;;
--foreground: #0c1325;;
--primary-cta: #0b07ff;;
--secondary-cta: #ffffff;;
--accent: #93b7ff;;
--background-accent: #a8bae8;; */
--background: #f7f6f7;;
--card: #ffffff;;
--foreground: #0c1325;;
--primary-cta: #0b07ff;;
--secondary-cta: #ffffff;;
--accent: #93b7ff;;
--background-accent: #a8bae8;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-outfit), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-outfit), sans-serif;
}

1273
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

274
src/app/page.tsx Normal file
View File

@@ -0,0 +1,274 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import Link from 'next/link';
import { Sparkles, Home, Zap, Mail } from 'lucide-react';
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="LuxeStay"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Welcome to Luxury Hospitality"
description="Experience world-class comfort in our award-winning resort. Discover elegance, sophistication, and unforgettable moments in every stay."
tag="Luxury Resort"
tagIcon={Sparkles}
background={{ variant: "radial-gradient" }}
mediaItems={[
{
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",
imageAlt: "Luxury hotel lobby"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
imageAlt: "Premium hotel bedroom"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxury-bedroom-suite-bathroom_105762-1791.jpg",
imageAlt: "Resort swimming pool"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg",
imageAlt: "Modern hotel suite interior"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg",
imageAlt: "Hotel balcony with city view"
}
]}
buttons={[
{ text: "Book Your Stay", href: "/contact" },
{ text: "Explore Rooms", href: "/rooms" }
]}
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardFour
title="Our Room Collections"
description="Choose from our diverse selection of elegantly designed rooms, each crafted to provide the ultimate in comfort and luxury."
tag="Premium Accommodations"
tagIcon={Home}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="invertDefault"
products={[
{
id: "deluxe",
name: "Deluxe Room",
price: "$299/night",
variant: "King bed, City view, Modern amenities",
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg",
imageAlt: "Deluxe hotel room"
},
{
id: "suite",
name: "Executive Suite",
price: "$499/night",
variant: "Separate living area, Jacuzzi, Premium service",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683429.jpg",
imageAlt: "Executive suite"
},
{
id: "standard",
name: "Standard Room",
price: "$199/night",
variant: "Double bed, Comfort focused, Efficient design",
imageSrc: "https://img.b2bpic.net/free-photo/man-looking-outside-modern-room-with-gray-curtains-hanging-lamp_8353-12543.jpg",
imageAlt: "Standard hotel room"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="Our stay at LuxeStay was absolutely exceptional. The impeccable service, luxurious accommodations, and attention to detail exceeded all our expectations. We felt truly pampered from the moment we arrived."
rating={5}
author="Sarah Mitchell, Travel Influencer"
useInvertedBackground="noInvert"
avatars={[
{
src: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
alt: "Sarah Mitchell"
},
{
src: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",
alt: "Guest review"
},
{
src: "https://img.b2bpic.net/free-photo/portrait-elegant-professional-businesswoman_23-2150917266.jpg",
alt: "Guest review"
},
{
src: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
alt: "Guest review"
},
{
src: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
alt: "Guest review"
},
{
src: "https://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-posing-purple-wall_176420-2852.jpg",
alt: "Guest review"
}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Flexible Booking Plans"
description="Choose the perfect plan for your stay. All rooms include complimentary breakfast, wifi, and access to all amenities."
tag="Special Offers"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="slide-up"
plans={[
{
id: "basic",
title: "Standard Room",
price: "$199",
period: "/night",
imageSrc: "https://img.b2bpic.net/free-photo/man-looking-outside-modern-room-with-gray-curtains-hanging-lamp_8353-12543.jpg",
imageAlt: "Standard room",
features: [
"Double bed with premium linens",
"Ensuite bathroom with luxury toiletries",
"High-speed wifi and smart TV",
"Daily housekeeping service",
"Access to all facilities"
],
button: {
text: "Book Now",
href: "/contact"
}
},
{
id: "pro",
title: "Deluxe Room",
price: "$299",
period: "/night",
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg",
imageAlt: "Deluxe room",
features: [
"King bed with premium linens",
"City view balcony",
"Luxury spa bathroom",
"Priority concierge service",
"Complimentary minibar",
"Express check-in/out"
],
button: {
text: "Book Now",
href: "/contact"
}
},
{
id: "premium",
title: "Executive Suite",
price: "$499",
period: "/night",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683429.jpg",
imageAlt: "Executive suite",
features: [
"Separate living and bedroom areas",
"Premium jacuzzi and rainfall shower",
"Panoramic city views",
"24/7 butler service",
"Exclusive lounge access",
"Complimentary spa treatments"
],
button: {
text: "Book Now",
href: "/contact"
}
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Stay Connected"
title="Subscribe to Our Newsletter"
description="Get exclusive offers, special packages, and insider tips about luxury travel. Join thousands of happy guests who receive our curated recommendations."
tagIcon={Mail}
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time. Your information is secure with us."
/>
</div>
<FooterBaseReveal
columns={[
{
title: "About",
items: [
{ label: "Our Story", href: "/about" },
{ label: "Careers", href: "/about" },
{ label: "Press", href: "/about" },
{ label: "Blog", href: "/about" }
]
},
{
title: "Services",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Dining", href: "/rooms" },
{ label: "Spa & Wellness", href: "/rooms" },
{ label: "Events", href: "/rooms" }
]
},
{
title: "Contact",
items: [
{ label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
{ label: "Address: 123 Luxury Boulevard", href: "/contact" },
{ label: "24/7 Concierge Service", href: "/contact" }
]
}
]}
copyrightText="© 2025 LuxeStay Resort. All rights reserved."
/>
</ThemeProvider>
);
}

179
src/app/rooms/page.tsx Normal file
View File

@@ -0,0 +1,179 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Home, Award, Trophy } from 'lucide-react';
export default function RoomsPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="LuxeStay"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardFour
title="Luxury Accommodations"
description="Immerse yourself in unparalleled comfort with our meticulously designed rooms and suites. Each accommodation features premium amenities, sophisticated decor, and breathtaking views to ensure your stay is nothing short of extraordinary."
tag="Premium Rooms & Suites"
tagIcon={Home}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="noInvert"
products={[
{
id: "deluxe",
name: "Deluxe Room",
price: "$299/night",
variant: "King bed, City view, Modern amenities",
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg",
imageAlt: "Deluxe hotel room"
},
{
id: "suite",
name: "Executive Suite",
price: "$499/night",
variant: "Separate living area, Jacuzzi, Premium service",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683429.jpg",
imageAlt: "Executive suite"
},
{
id: "standard",
name: "Standard Room",
price: "$199/night",
variant: "Double bed, Comfort focused, Efficient design",
imageSrc: "https://img.b2bpic.net/free-photo/man-looking-outside-modern-room-with-gray-curtains-hanging-lamp_8353-12543.jpg",
imageAlt: "Standard hotel room"
}
]}
/>
</div>
<div id="amenities" data-section="amenities">
<FeatureProcessSteps
tag="World-Class Facilities"
tagIcon={Award}
title="Experience Exceptional Amenities"
description="From our state-of-the-art wellness center to Michelin-inspired dining, every facility is designed to enhance your stay and create unforgettable memories."
useInvertedBackground="invertDefault"
steps={[
{
number: "01",
title: "Wellness & Spa",
tag: "Relaxation",
description: "Indulge in our luxurious spa featuring massages, facial treatments, and a full-service fitness center with personal trainers."
},
{
number: "02",
title: "Fine Dining",
tag: "Culinary Excellence",
description: "Savor exceptional cuisine prepared by award-winning chefs. Multiple restaurants and bars featuring international and local specialties."
},
{
number: "03",
title: "Recreation",
tag: "Entertainment",
description: "Enjoy our Olympic-size swimming pool, tennis courts, golf course access, and comprehensive recreation center for all ages."
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Our Excellence in Numbers"
description="Trusted by thousands of guests worldwide. Our commitment to quality and service is reflected in every metric."
tag="Industry Leading"
tagIcon={Trophy}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="noInvert"
metrics={[
{
id: "1",
value: "25K+",
description: "Happy Guests Annually"
},
{
id: "2",
value: "4.9/5",
description: "Average Guest Rating"
},
{
id: "3",
value: "15+",
description: "International Awards"
},
{
id: "4",
value: "98%",
description: "Guest Return Rate"
}
]}
/>
</div>
<FooterBaseReveal
columns={[
{
title: "About",
items: [
{ label: "Our Story", href: "/about" },
{ label: "Careers", href: "/about" },
{ label: "Press", href: "/about" },
{ label: "Blog", href: "/about" }
]
},
{
title: "Services",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Dining", href: "/rooms" },
{ label: "Spa & Wellness", href: "/rooms" },
{ label: "Events", href: "/rooms" }
]
},
{
title: "Contact",
items: [
{ label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
{ label: "Address: 123 Luxury Boulevard", href: "/contact" },
{ label: "24/7 Concierge Service", href: "/contact" }
]
}
]}
copyrightText="© 2025 LuxeStay Resort. All rights reserved."
/>
</ThemeProvider>
);
}