development/b356e912-e6e2-4804-a391-08289094f185
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 19:14:42 +02:00
commit fd1b682f2f
301 changed files with 58533 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,169 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Star } from 'lucide-react';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Our Legacy of Excellence"
description="Founded in 1985, Luxe Haven has been the premier destination for discerning travelers seeking sophistication and comfort. Our commitment to excellence in hospitality has earned us numerous awards and the unwavering loyalty of guests from around the world. Every detail of our hotel reflects our dedication to creating unforgettable experiences."
tag="Since 1985"
tagIcon={Award}
imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
imageAlt="Award-winning spa and wellness center"
useInvertedBackground="noInvert"
buttons={[
{ text: "Discover Our Story", href: "/story" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="What Our Guests Say"
description="Hear from travelers who have experienced the magic and exceptional service of Luxe Haven."
tag="Guest Reviews"
tagIcon={Star}
testimonials={[
{
id: "1",
name: "Sarah Mitchell",
role: "Business Executive",
company: "Global Ventures Inc",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
imageAlt: "Sarah Mitchell, satisfied hotel guest"
},
{
id: "2",
name: "James Chen",
role: "Travel Photographer",
company: "Wanderlust Media",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-woman-green-cozy-large-knitted-sweater-cute-smiling-with-crossed-hands_343596-7420.jpg",
imageAlt: "James Chen, travel photographer"
},
{
id: "3",
name: "Emma Rodriguez",
role: "Luxury Brand Director",
company: "Elite Fashion Co",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
imageAlt: "Emma Rodriguez, luxury brand professional"
},
{
id: "4",
name: "David Kim",
role: "CEO",
company: "Tech Innovations Ltd",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
imageAlt: "David Kim, CEO and guest"
},
{
id: "5",
name: "Lisa Thompson",
role: "Art Collector",
company: "Heritage Galleries",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-work-with-copy-space_23-2148826459.jpg",
imageAlt: "Lisa Thompson, art collector"
},
{
id: "6",
name: "Michael Anderson",
role: "Investment Manager",
company: "Wealth Advisors Group",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-attractive-businesswoman_93675-133773.jpg",
imageAlt: "Michael Anderson, investment professional"
}
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations",
items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</ThemeProvider>
);
}

181
src/app/amenities/page.tsx Normal file
View File

@@ -0,0 +1,181 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Zap, HelpCircle, Droplets, Wind, HeartHandshake, UtensilsCrossed, Wine, Users, Waves, Dumbbell, Palmtree } from 'lucide-react';
export default function AmenitiesPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
</div>
<div id="amenities" data-section="amenities">
<FeatureCardTen
title="World-Class Amenities"
description="Every detail has been carefully crafted to ensure your comfort and satisfaction during your stay."
tag="Premium Facilities"
tagIcon={Zap}
features={[
{
id: "1",
title: "Spa & Wellness Center",
description: "Indulge in our full-service spa featuring rejuvenating treatments, sauna, steam room, and yoga classes designed to enhance your well-being.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
},
items: [
{ icon: Droplets, text: "Relaxing spa treatments" },
{ icon: Wind, text: "Sauna and steam room" },
{ icon: HeartHandshake, text: "Wellness programs" }
],
reverse: false
},
{
id: "2",
title: "Fine Dining Restaurant",
description: "Savor exquisite cuisine crafted by our award-winning chefs using the finest local and international ingredients.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-luxury-comfortable-white-pillow-blanket-decoration-interior-bedroom_74190-12644.jpg"
},
items: [
{ icon: UtensilsCrossed, text: "Gourmet cuisine" },
{ icon: Wine, text: "Premium wine selection" },
{ icon: Users, text: "Private dining available" }
],
reverse: true
},
{
id: "3",
title: "Luxury Pool & Recreation",
description: "Cool off in our Olympic-sized heated pool, relax at the poolside bar, or enjoy our state-of-the-art fitness center.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxury-bedroom-suite-bathroom_105762-1791.jpg"
},
items: [
{ icon: Waves, text: "Heated swimming pool" },
{ icon: Dumbbell, text: "Fitness center" },
{ icon: Palmtree, text: "Tropical garden" }
],
reverse: false
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
buttons={[
{ text: "Book Your Experience", href: "https://bookings.luxehaven.com" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Amenity Information"
description="Find answers to common questions about our hotel amenities and services."
tag="Amenity FAQ"
tagIcon={HelpCircle}
faqs={[
{
id: "1",
title: "What spa services are available?",
content: "Our full-service spa offers massage therapy, facial treatments, body wraps, aromatherapy, hot stone massage, and couples treatments. We also feature a sauna, steam room, and relaxation areas."
},
{
id: "2",
title: "Are dining reservations required?",
content: "While walk-ins are welcome, we recommend making reservations for our fine dining restaurant, especially during peak hours and weekends. You can book through our concierge or online."
},
{
id: "3",
title: "What fitness facilities are available?",
content: "Our fitness center features state-of-the-art equipment including cardio machines, strength training equipment, free weights, and yoga mats. Personal trainers are available upon request."
},
{
id: "4",
title: "Is the pool open year-round?",
content: "Yes, our heated Olympic-sized pool is open 24/7 year-round. We also have a poolside bar serving refreshments and light meals during daytime hours."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/white-pillow-bed_74190-3601.jpg"
imageAlt="Hotel amenities and luxury facilities"
mediaPosition="right"
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations",
items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,172 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
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"),
},
];
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="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Home", id: "home" },
{ name: "Rooms", id: "rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardOne
blogs={posts}
title="Latest Insights from Luxe Haven"
description="Discover the world of luxury hospitality through our curated articles and expert insights"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
tag="Blog"
/>
)}
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations", items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover", items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

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

@@ -0,0 +1,148 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Mail, HelpCircle } from 'lucide-react';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Stay Updated"
title="Subscribe to Our Newsletter"
description="Receive exclusive offers, travel tips, and insider information about upcoming events and new amenities at Luxe Haven."
useInvertedBackground="noInvert"
imageSrc="https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg"
imageAlt="Luxurious hotel ambiance"
mediaPosition="right"
tagIcon={Mail}
inputPlaceholder="your@email.com"
buttonText="Subscribe Now"
termsText="We respect your privacy. Unsubscribe anytime with one click. By subscribing, you agree to our Privacy Policy."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about our hotel, amenities, and booking process."
tag="Help & Support"
tagIcon={HelpCircle}
faqs={[
{
id: "1",
title: "What is your check-in and check-out time?",
content: "Standard check-in is at 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out are available upon request, subject to room availability. Contact our concierge for arrangements."
},
{
id: "2",
title: "Do you offer airport shuttle service?",
content: "Yes, we provide complimentary airport transfers for all guests. Please arrange this during your booking or contact our concierge team at least 24 hours in advance with your flight details."
},
{
id: "3",
title: "Are pets allowed in the hotel?",
content: "We welcome well-behaved pets in select rooms for a nominal fee of $50 per night. Please inform us during booking or contact the front desk for pet-friendly room availability."
},
{
id: "4",
title: "What dining options are available?",
content: "Our property features three restaurants: fine dining, casual café, and poolside bistro. Room service is available 24/7 with an extensive menu."
},
{
id: "5",
title: "Is WiFi included in the room rate?",
content: "Yes, complimentary high-speed WiFi is included in all room rates. We also offer a dedicated business center for your convenience."
},
{
id: "6",
title: "Can you accommodate large groups or events?",
content: "Absolutely! Our ballroom and event spaces can accommodate groups from 50 to 500 guests. Contact our events team for customized packages and arrangements."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/white-pillow-bed_74190-3601.jpg"
imageAlt="Hotel amenities and facilities"
mediaPosition="right"
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations",
items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</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: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #b82b40;;
--secondary-cta: #ffffff;;
--accent: #b90941;;
--background-accent: #e8a8b6;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #b82b40;;
--secondary-cta: #ffffff;;
--accent: #b90941;;
--background-accent: #e8a8b6;;
/* 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-dm-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-dm-sans), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,296 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Award, Home, Zap, Star, Mail, Droplets, Wind, HeartHandshake, UtensilsCrossed, Wine, Users, Waves, Dumbbell, Palmtree } from 'lucide-react';
import Link from 'next/link';
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Experience Timeless Luxury"
description="Step into a world of elegance and comfort. Our award-winning hotel offers world-class accommodations, exceptional service, and unforgettable experiences in a stunning setting."
tag="Luxury Hospitality"
tagIcon={Sparkles}
background={{ variant: "glowing-orb" }}
imageSrc="https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg"
imageAlt="Luxury hotel suite with elegant furnishings and ambient lighting"
imagePosition="right"
buttons={[
{ text: "Book Your Stay", href: "https://bookings.luxehaven.com" },
{ text: "View Rooms", href: "/rooms" }
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Discover Our Heritage"
description="Founded in 1985, Luxe Haven has been the premier destination for discerning travelers seeking sophistication and comfort. Our commitment to excellence in hospitality has earned us numerous awards and the loyalty of guests from around the world."
tag="Since 1985"
tagIcon={Award}
imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
imageAlt="Award-winning spa and wellness center"
useInvertedBackground="invertDefault"
buttons={[
{ text: "Our Story", href: "/about" }
]}
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardTwo
title="Our Room Collection"
description="From cozy standard rooms to luxurious penthouses, discover accommodations designed for your comfort and style."
tag="Room Types"
tagIcon={Home}
products={[
{
id: "1",
brand: "Luxe Haven",
name: "Standard Room",
price: "$189/night",
rating: 4,
reviewCount: "2.3k",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683423.jpg",
imageAlt: "Comfortable standard hotel room"
},
{
id: "2",
brand: "Luxe Haven",
name: "Deluxe Suite",
price: "$349/night",
rating: 5,
reviewCount: "4.8k",
imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed-decoration-interior-bedroom_74190-11180.jpg",
imageAlt: "Spacious deluxe suite with premium amenities"
},
{
id: "3",
brand: "Luxe Haven",
name: "Ocean View Suite",
price: "$499/night",
rating: 5,
reviewCount: "3.1k",
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
imageAlt: "Panoramic ocean view suite with private balcony"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
buttons={[
{ text: "Explore All Rooms", href: "https://bookings.luxehaven.com" }
]}
/>
</div>
<div id="amenities" data-section="amenities">
<FeatureCardTen
title="World-Class Amenities"
description="Every detail has been carefully crafted to ensure your comfort and satisfaction during your stay."
tag="Facilities"
tagIcon={Zap}
features={[
{
id: "1",
title: "Spa & Wellness Center",
description: "Indulge in our full-service spa featuring rejuvenating treatments, sauna, steam room, and yoga classes designed to enhance your well-being.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
},
items: [
{ icon: Droplets, text: "Relaxing spa treatments" },
{ icon: Wind, text: "Sauna and steam room" },
{ icon: HeartHandshake, text: "Wellness programs" }
],
reverse: false
},
{
id: "2",
title: "Fine Dining Restaurant",
description: "Savor exquisite cuisine crafted by our award-winning chefs using the finest local and international ingredients.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-luxury-comfortable-white-pillow-blanket-decoration-interior-bedroom_74190-12644.jpg"
},
items: [
{ icon: UtensilsCrossed, text: "Gourmet cuisine" },
{ icon: Wine, text: "Premium wine selection" },
{ icon: Users, text: "Private dining available" }
],
reverse: true
},
{
id: "3",
title: "Luxury Pool & Recreation",
description: "Cool off in our Olympic-sized heated pool, relax at the poolside bar, or enjoy our state-of-the-art fitness center.",
media: {
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxury-bedroom-suite-bathroom_105762-1791.jpg"
},
items: [
{ icon: Waves, text: "Heated swimming pool" },
{ icon: Dumbbell, text: "Fitness center" },
{ icon: Palmtree, text: "Tropical garden" }
],
reverse: false
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="invertDefault"
buttons={[
{ text: "View All Amenities", href: "/amenities" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Guest Experiences"
description="Hear from travelers who have experienced the magic of Luxe Haven."
tag="Testimonials"
tagIcon={Star}
testimonials={[
{
id: "1",
name: "Sarah Mitchell",
role: "Business Executive",
company: "Global Ventures Inc",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
imageAlt: "Sarah Mitchell, satisfied hotel guest"
},
{
id: "2",
name: "James Chen",
role: "Travel Photographer",
company: "Wanderlust Media",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-woman-green-cozy-large-knitted-sweater-cute-smiling-with-crossed-hands_343596-7420.jpg",
imageAlt: "James Chen, travel photographer"
},
{
id: "3",
name: "Emma Rodriguez",
role: "Luxury Brand Director",
company: "Elite Fashion Co",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
imageAlt: "Emma Rodriguez, luxury brand professional"
},
{
id: "4",
name: "David Kim",
role: "CEO",
company: "Tech Innovations Ltd",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
imageAlt: "David Kim, CEO and guest"
}
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Stay Updated"
title="Subscribe to Our Newsletter"
description="Receive exclusive offers, travel tips, and insider information about upcoming events and new amenities at Luxe Haven."
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg"
imageAlt="Luxurious hotel ambiance"
mediaPosition="right"
tagIcon={Mail}
inputPlaceholder="your@email.com"
buttonText="Subscribe Now"
termsText="We respect your privacy. Unsubscribe anytime with one click. By subscribing, you agree to our Privacy Policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations",
items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,230 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Home, CreditCard, Calendar, Heart } from 'lucide-react';
export default function RoomsPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
bottomLeftText="Luxury Hospitality"
bottomRightText="hello@luxehaven.com"
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardTwo
title="Luxury Accommodations"
description="Experience unparalleled comfort in our meticulously designed rooms and suites, each offering premium amenities and breathtaking views."
tag="Premium Stays"
tagIcon={Home}
products={[
{
id: "1",
brand: "Luxe Haven",
name: "Standard Room",
price: "$189/night",
rating: 4,
reviewCount: "2.3k",
imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683423.jpg",
imageAlt: "Comfortable standard hotel room"
},
{
id: "2",
brand: "Luxe Haven",
name: "Deluxe Suite",
price: "$349/night",
rating: 5,
reviewCount: "4.8k",
imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed-decoration-interior-bedroom_74190-11180.jpg",
imageAlt: "Spacious deluxe suite with premium amenities"
},
{
id: "3",
brand: "Luxe Haven",
name: "Ocean View Suite",
price: "$499/night",
rating: 5,
reviewCount: "3.1k",
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
imageAlt: "Panoramic ocean view suite with private balcony"
},
{
id: "4",
brand: "Luxe Haven",
name: "Presidential Suite",
price: "$899/night",
rating: 5,
reviewCount: "1.2k",
imageSrc: "https://img.b2bpic.net/free-photo/modern-luxury-bedroom-suite-bathroom_105762-1791.jpg",
imageAlt: "Ultimate presidential suite with luxury amenities"
},
{
id: "5",
brand: "Luxe Haven",
name: "Executive Room",
price: "$259/night",
rating: 5,
reviewCount: "3.7k",
imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-2819.jpg",
imageAlt: "Executive room with business amenities"
},
{
id: "6",
brand: "Luxe Haven",
name: "Junior Suite",
price: "$289/night",
rating: 4,
reviewCount: "2.9k",
imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-3064.jpg",
imageAlt: "Elegant junior suite with sitting area"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
buttons={[
{ text: "Book Your Stay", href: "https://bookings.luxehaven.com" }
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Flexible Booking Options"
description="Choose the perfect plan that suits your travel needs and budget with our exclusive packages."
tag="Special Packages"
tagIcon={CreditCard}
plans={[
{
id: "weekend-escape",
tag: "Weekend Escape",
price: "$269",
period: "/night",
description: "Perfect for a short getaway with all essential amenities included.",
button: { text: "Book Now", href: "https://bookings.luxehaven.com" },
featuresTitle: "What's Included:",
features: [
"Standard Room Accommodation",
"Complimentary Breakfast",
"Fitness Center Access",
"WiFi Internet"
]
},
{
id: "extended-stay",
tag: "Extended Stay",
tagIcon: Calendar,
price: "$1,099",
period: "/week",
description: "Ideal for longer stays with enhanced comfort and exclusive benefits.",
button: { text: "Book Now", href: "https://bookings.luxehaven.com" },
featuresTitle: "What's Included:",
features: [
"Deluxe Suite Accommodation",
"Daily Breakfast & Dinner",
"Premium Spa Credits",
"Concierge Service",
"Room Service (24/7)",
"Airport Transfers"
]
},
{
id: "luxury-honeymoon",
tag: "Honeymoon Package",
tagIcon: Heart,
price: "$1,899",
period: "/3 nights",
description: "The ultimate romantic experience with premium services and exclusive perks.",
button: { text: "Book Honeymoon", href: "https://bookings.luxehaven.com" },
featuresTitle: "What's Included:",
features: [
"Ocean View Suite with Hot Tub",
"Romantic Dinner for Two",
"Couples Spa Treatment",
"Champagne & Roses in Room",
"Sunset Beach Access",
"Private Yacht Excursion",
"Priority Concierge",
"Late Checkout"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Reservations",
items: [
{ label: "Book a Room", href: "https://bookings.luxehaven.com" },
{ label: "Special Offers", href: "/offers" },
{ label: "Group Bookings", href: "/groups" },
{ label: "Loyalty Program", href: "/loyalty" }
]
},
{
title: "Discover",
items: [
{ label: "Rooms & Suites", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "Dining", href: "/dining" },
{ label: "Events", href: "/events" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Story", href: "/story" },
{ label: "Careers", href: "/careers" },
{ label: "Sustainability", href: "/sustainability" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "/faq" },
{ label: "Blog", href: "/blog" },
{ label: "Terms & Privacy", href: "/legal" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotels. All rights reserved. | Crafted with elegance."
/>
</div>
</ThemeProvider>
);
}