development/4f13a99e-ffd4-4a70-88fe-7a1e2b7872cb
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 20:27:26 +02:00
commit 06cd689c12
301 changed files with 58369 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,156 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Story"
title="Two Decades of Hospitality Excellence"
description="Founded in 1999, Luxe Haven began as a vision to redefine luxury hospitality. From our humble beginnings with a single boutique property, we have grown into a renowned destination that sets the standard for premium accommodations. Our commitment to excellence, attention to detail, and genuine care for our guests has earned us numerous awards and, more importantly, the loyalty of travelers from around the world."
metrics={[
{
value: "25+",
title: "Years of Excellence"
},
{
value: "4.9★",
title: "Guest Rating"
}
]}
imageSrc="https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
imageAlt="Luxurious hotel lobby with modern design"
useInvertedBackground="noInvert"
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Meet Our Leadership Team"
description="The passionate professionals who bring our vision to life every day"
team={[
{
id: "1",
name: "Victoria Chen",
role: "General Manager",
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-working-luxury-restaurant_23-2150598405.jpg"
},
{
id: "2",
name: "Marco Rossi",
role: "Executive Chef",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-female-cafe-owner-smiling_1262-5377.jpg"
},
{
id: "3",
name: "Elena Rodriguez",
role: "Concierge Manager",
imageSrc: "https://img.b2bpic.net/free-photo/wedding-planner_1098-18025.jpg"
},
{
id: "4",
name: "James Morrison",
role: "Director of Housekeeping",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-folded-arms_23-2147876782.jpg"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Guests Say About Our Team"
description="Hear about the exceptional service that defines the Luxe Haven experience"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_travels",
testimonial: "The staff at Luxe Haven went above and beyond. Victoria personally ensured our anniversary celebration was perfect. Truly exceptional service!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-holding-boarding-pass-checking-his-mobile-phone_107420-95787.jpg"
},
{
id: "2",
name: "Michael Chen",
handle: "@biz_traveler_mc",
testimonial: "Chef Marco's culinary creations were extraordinary. The tasting menu was a journey of flavors I'll never forget.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-people-standing-with-luggage-bag-airport_107420-95865.jpg"
},
{
id: "3",
name: "Emma Watson",
handle: "@emmadventures",
testimonial: "Elena arranged the most incredible city tour and dinner reservations. Her local knowledge and attention to detail were amazing.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businessman-standing-with-luggage-waiting-area-airport_107420-95857.jpg"
}
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "/about" },
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" }
]
},
{
items: [
{ label: "Team", href: "/team" },
{ label: "Guest Reviews", href: "/testimonials" },
{ label: "FAQ", href: "/faq" }
]
},
{
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</ThemeProvider>
);
}

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

@@ -0,0 +1,164 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function AmenitiesPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
title="Premium Hotel Amenities"
description="Indulge in world-class facilities designed to elevate your stay experience"
features={[
{
id: 1,
title: "Infinity Pool & Wellness Spa",
description: "Relax in our heated infinity pool overlooking the city skyline, or indulge in rejuvenating spa treatments with our certified therapists. Our wellness center offers massages, facials, and holistic treatments.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/weekend-mature-couple-enjoying-good-weather-near-swimming-pool_259150-57796.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/young-innocent-pure-beautiful-woman-dreaming-sitting-pool-white-dress-romantic-lyrical-thinking-green-tropical-nature-summer-relaxed-chilling-long-legs_285396-6078.jpg"
}
},
{
id: 2,
title: "Award-Winning Dining & Fitness",
description: "Our award-winning restaurant offers innovative cuisine crafted by our talented culinary team. Stay active in our state-of-the-art fitness center with personal trainers available.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/girls-spa-resort_1098-14134.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-outdoor-swimming-pool-hotel-resort-nearly-sea_74190-13442.jpg"
}
}
]}
showStepNumbers={true}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Amenity Reviews"
description="Guest experiences with our premium facilities"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_travels",
testimonial: "The spa treatments were absolutely divine! The infinity pool with city views is worth the stay alone.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-holding-boarding-pass-checking-his-mobile-phone_107420-95787.jpg"
},
{
id: "2",
name: "Michael Chen",
handle: "@biz_traveler_mc",
testimonial: "Outstanding dining experience! The fitness center has everything I need to maintain my routine while traveling.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-people-standing-with-luggage-bag-airport_107420-95865.jpg"
},
{
id: "3",
name: "Emma Watson",
handle: "@emmadventures",
testimonial: "The amenities are top-notch. From the pool to the restaurant to the spa - everything exceeded my expectations!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businessman-standing-with-luggage-waiting-area-airport_107420-95857.jpg"
}
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Amenity Information"
sideDescription="Common questions about our hotel facilities and services"
faqs={[
{
id: "1",
title: "What are the pool hours?",
content: "Our infinity pool is open daily from 6:00 AM to 10:00 PM. Pool towels and refreshments are provided complimentary."
},
{
id: "2",
title: "Do I need to book spa treatments in advance?",
content: "We highly recommend booking spa treatments at least 24 hours in advance to secure your preferred time slot. Contact our spa desk at extension 5500."
},
{
id: "3",
title: "Is the fitness center open 24/7?",
content: "Yes, our fitness center is accessible 24 hours a day for registered guests. Personal training sessions are available by appointment."
},
{
id: "4",
title: "What dining options are available?",
content: "We offer fine dining at our signature restaurant, casual poolside service, 24-hour room service, and a lobby bar with premium beverages."
}
]}
textPosition="left"
useInvertedBackground="noInvert"
/>
</div>
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "/about" },
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" }
]
},
{
items: [
{ label: "Team", href: "/team" },
{ label: "Guest Reviews", href: "/testimonials" },
{ label: "FAQ", href: "/faq" }
]
},
{
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</ThemeProvider>
);
}

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

@@ -0,0 +1,152 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
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="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now", href: "#contact"
}}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardTwo
blogs={posts}
title="Latest Articles"
description="Discover insights and updates from the world of luxury hospitality"
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
/>
)}
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "#about" },
{ label: "Rooms", href: "#products" },
{ label: "Amenities", href: "#features" }
]
},
{
items: [
{ label: "Team", href: "#team" },
{ label: "Guest Reviews", href: "#testimonials" },
{ label: "FAQ", href: "#faq" }
]
},
{
items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

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

@@ -0,0 +1,126 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get In Touch"
title="Ready to Book Your Stay?"
description="Reserve your perfect room today and experience luxury hospitality at Luxe Haven. Our reservation team is ready to assist you with planning your ideal getaway."
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email"
buttonText="Reserve Now"
termsText="By booking with us, you agree to our cancellation policy and terms of service."
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Contact Information"
title="We're Here to Help"
description="Our dedicated concierge team is available 24/7 to assist with reservations, special requests, and travel arrangements. Whether you're planning a romantic getaway, business trip, or family vacation, we're committed to making your stay exceptional."
metrics={[
{
value: "24/7",
title: "Concierge Service"
},
{
value: "< 2hrs",
title: "Response Time"
}
]}
imageSrc: "https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
imageAlt: "Luxurious hotel lobby with welcoming atmosphere"
useInvertedBackground="invertDefault"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Booking & Reservations"
sideDescription="Everything you need to know about staying with us"
faqs={[
{
id: "1",
title: "What are your check-in and check-out times?",
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 upon request, subject to room availability."
},
{
id: "2",
title: "Do you offer airport shuttle service?",
content: "Yes, we provide complimentary airport shuttle service for all guests. Please arrange this at least 24 hours in advance by contacting our concierge team."
},
{
id: "3",
title: "What is your cancellation policy?",
content: "Cancellations made 48 hours prior to arrival receive a full refund. Cancellations within 48 hours are subject to a one-night charge. Special rates may have different policies."
},
{
id: "4",
title: "How can I make special arrangements?",
content: "Contact our concierge team at reservations@luxehaven.com or call us directly. We're happy to arrange special celebrations, dietary accommodations, or accessibility needs."
}
]}
textPosition="left"
useInvertedBackground="noInvert"
/>
</div>
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "/about" },
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" }
]
},
{
items: [
{ label: "Team", href: "/team" },
{ label: "Guest Reviews", href: "/testimonials" },
{ label: "FAQ", href: "/faq" }
]
},
{
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</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: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #15479c;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;; */
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #15479c;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
/* 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-fira-code), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fira-code), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,265 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Luxe Haven"
description="Experience world-class hospitality with stunning views, premium amenities, and exceptional service. Your perfect escape awaits."
background={{
variant: "sparkles-gradient"
}}
imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
imageAlt="Luxury hotel entrance with elegant architecture"
frameStyle="card"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="About Us"
title="Award-Winning Hospitality Excellence"
description="Luxe Haven has been a beacon of luxury hospitality for over two decades. We pride ourselves on delivering exceptional experiences that exceed expectations. From our meticulously designed rooms to our world-class dining, every detail is crafted with care."
metrics={[
{
value: "25+",
title: "Years of Excellence"
},
{
value: "4.9★",
title: "Guest Rating"
}
]}
imageSrc="https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
imageAlt="Luxurious hotel lobby with modern design"
useInvertedBackground="invertDefault"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Our Room Collection"
description="Choose from our curated selection of elegant rooms and suites, each designed for comfort and style."
products={[
{
id: "deluxe",
name: "Deluxe Room",
price: "$189/night",
imageSrc: "https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg",
imageAlt: "Spacious deluxe room with king bed and city view"
},
{
id: "suite",
name: "Premium Suite",
price: "$349/night",
imageSrc: "https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg",
imageAlt: "Luxurious suite with separate living area"
},
{
id: "standard",
name: "Standard Room",
price: "$129/night",
imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-lounge-restaurant-with-high-ceiling_105762-1771.jpg",
imageAlt: "Comfortable standard room with modern amenities"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
title="World-Class Amenities"
description="Discover what makes our guests return again and again"
features={[
{
id: 1,
title: "Infinity Pool & Spa",
description: "Relax in our heated infinity pool overlooking the city skyline, or indulge in rejuvenating spa treatments.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/weekend-mature-couple-enjoying-good-weather-near-swimming-pool_259150-57796.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/young-innocent-pure-beautiful-woman-dreaming-sitting-pool-white-dress-romantic-lyrical-thinking-green-tropical-nature-summer-relaxed-chilling-long-legs_285396-6078.jpg"
}
},
{
id: 2,
title: "Fine Dining Experience",
description: "Our award-winning restaurant offers innovative cuisine crafted by our talented culinary team.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/girls-spa-resort_1098-14134.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-outdoor-swimming-pool-hotel-resort-nearly-sea_74190-13442.jpg"
}
}
]}
showStepNumbers={true}
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Meet Our Team"
description="Dedicated professionals committed to your comfort and satisfaction"
team={[
{
id: "1",
name: "Victoria Chen",
role: "General Manager",
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-working-luxury-restaurant_23-2150598405.jpg"
},
{
id: "2",
name: "Marco Rossi",
role: "Executive Chef",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-female-cafe-owner-smiling_1262-5377.jpg"
},
{
id: "3",
name: "Elena Rodriguez",
role: "Concierge Manager",
imageSrc: "https://img.b2bpic.net/free-photo/wedding-planner_1098-18025.jpg"
},
{
id: "4",
name: "James Morrison",
role: "Director of Housekeeping",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-folded-arms_23-2147876782.jpg"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Guest Reviews"
description="See what our valued guests have to say about their experience"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_travels",
testimonial: "Luxe Haven exceeded all expectations. The room was immaculate, the staff incredibly attentive, and the amenities world-class. Definitely returning!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-holding-boarding-pass-checking-his-mobile-phone_107420-95787.jpg"
},
{
id: "2",
name: "Michael Chen",
handle: "@biz_traveler_mc",
testimonial: "Best business hotel I've stayed at. Perfect location, excellent WiFi, and the restaurant is outstanding. Will book again on my next trip.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-people-standing-with-luggage-bag-airport_107420-95865.jpg"
},
{
id: "3",
name: "Emma Watson",
handle: "@emmadventures",
testimonial: "The spa treatment was heavenly and the pool views are breathtaking. Every detail shows care and attention. Highly recommended!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businessman-standing-with-luggage-waiting-area-airport_107420-95857.jpg"
},
{
id: "4",
name: "David Kumar",
handle: "@david_explorer",
testimonial: "Outstanding service from check-in to checkout. The concierge team helped arrange amazing city tours. Absolutely perfect stay!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-chair-waiting-area_107420-95804.jpg"
},
{
id: "5",
name: "Lisa Anderson",
handle: "@lisa_luxe_travel",
testimonial: "Worth every penny. Stayed in the suite and felt like royalty. The breakfast buffet alone is worth the stay. Coming back next summer!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-with-luggage-checking-his-boarding-pass_107420-95776.jpg"
},
{
id: "6",
name: "Robert Martinez",
handle: "@rmtravels",
testimonial: "Professional, elegant, and welcoming. This is what luxury hospitality should be. Thank you for an unforgettable experience!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-standing-check-counter-with-passport-boarding-pass_107420-95789.jpg"
}
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "/about" },
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" }
]
},
{
items: [
{ label: "Team", href: "/team" },
{ label: "Guest Reviews", href: "/testimonials" },
{ label: "FAQ", href: "/faq" }
]
},
{
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</ThemeProvider>
);
}

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

@@ -0,0 +1,167 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function RoomsPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="Luxe Haven"
button={{
text: "Book Now",
href: "/contact"
}}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Luxury Accommodations"
description="Discover our meticulously designed rooms and suites, each offering unparalleled comfort, modern amenities, and breathtaking views. From intimate escapes to grand celebrations, we have the perfect space for your stay."
products={[
{
id: "deluxe",
name: "Deluxe Room",
price: "$189/night",
imageSrc: "https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg",
imageAlt: "Spacious deluxe room with king bed and city view"
},
{
id: "suite",
name: "Premium Suite",
price: "$349/night",
imageSrc: "https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg",
imageAlt: "Luxurious suite with separate living area"
},
{
id: "standard",
name: "Standard Room",
price: "$129/night",
imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-lounge-restaurant-with-high-ceiling_105762-1771.jpg",
imageAlt: "Comfortable standard room with modern amenities"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
title="Room Features & Amenities"
description="Every detail designed for your ultimate comfort and convenience"
features={[
{
id: 1,
title: "Premium Comfort",
description: "Experience luxury bedding, climate control, and stunning views from every room. Our rooms feature premium linens, marble bathrooms, and cutting-edge technology.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg"
}
},
{
id: 2,
title: "Modern Technology",
description: "Stay connected with high-speed WiFi, smart TV entertainment systems, and mobile device charging stations throughout your room.",
phoneOne: {
imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-lounge-restaurant-with-high-ceiling_105762-1771.jpg"
},
phoneTwo: {
imageSrc: "https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
}
}
]}
showStepNumbers={true}
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Room Reviews"
description="What our guests say about their accommodations"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_travels",
testimonial: "The deluxe room was absolutely stunning. Waking up to those city views every morning made the stay unforgettable!",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-holding-boarding-pass-checking-his-mobile-phone_107420-95787.jpg"
},
{
id: "2",
name: "Michael Chen",
handle: "@biz_traveler_mc",
testimonial: "The premium suite exceeded all expectations. Perfect for my business meetings with that separate living area.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/business-people-standing-with-luggage-bag-airport_107420-95865.jpg"
},
{
id: "3",
name: "Emma Watson",
handle: "@emmadventures",
testimonial: "Even the standard room felt luxurious. The attention to detail and comfort level was remarkable for the price.",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businessman-standing-with-luggage-waiting-area-airport_107420-95857.jpg"
}
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<FooterLogoEmphasis
logoText="Luxe Haven"
columns={[
{
items: [
{ label: "About", href: "/about" },
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" }
]
},
{
items: [
{ label: "Team", href: "/team" },
{ label: "Guest Reviews", href: "/testimonials" },
{ label: "FAQ", href: "/faq" }
]
},
{
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" }
]
}
]}
/>
</ThemeProvider>
);
}