development/c3e922e7-f450-4b0d-a410-859cc5c0fb18
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-02-07 21:05:03 +02:00
commit e9ee9c6c19
301 changed files with 58222 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,117 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Welcome to Your Sanctuary"
description="Nestled in breathtaking surroundings, our hotel offers an unparalleled retreat for discerning travelers. With over 20 years of hospitality excellence, we pride ourselves on creating unforgettable memories through impeccable service and world-class facilities."
tag="Award-Winning Hospitality"
imageSrc="https://img.b2bpic.net/free-photo/side-view-woman-looking-out-window_23-2149622868.jpg"
imageAlt="Elegant hotel lobby"
useInvertedBackground="noInvert"
buttons={[
{ text: "Learn Our Story", href: "/contact" }
]}
/>
</div>
<div id="heritage" data-section="heritage">
<MediaAbout
title="Two Decades of Excellence"
description="Since our founding, we have been dedicated to redefining luxury hospitality. Our commitment to exceptional service, sustainable practices, and creating meaningful connections with our guests has earned us numerous international awards and recognition as a leader in luxury travel."
tag="Our Heritage"
imageSrc="https://img.b2bpic.net/free-photo/gourmet-meal-served-with-wine_23-2148516896.jpg"
imageAlt="Fine dining experience"
useInvertedBackground="invertDefault"
buttons={[
{ text: "View Awards", href: "https://example.com/awards" }
]}
/>
</div>
<div id="guest-testimonial" data-section="guest-testimonial">
<TestimonialCardFifteen
testimonial="This hotel represents the pinnacle of luxury hospitality. Every detail, from the exquisite design to the personalized service, creates an experience that goes far beyond expectations. It's not just a stay—it's a journey of discovery and indulgence."
rating={5}
author="James Wellington, Luxury Travel Critic"
avatars={[
{ src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "James Wellington" },
{ src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Michael Johnson" },
{ src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Emily Chen" },
{ src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "David Williams" },
{ src: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Jessica Brown" },
{ src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "Anna Martinez" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "About", href: "/about" }
]
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "https://example.com/careers" },
{ label: "Press", href: "https://example.com/press" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,141 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, MapPin, Users, Zap, Utensils, Waves } from 'lucide-react';
export default function AmenitiesPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
/>
</div>
<div id="amenities-hero" data-section="amenities-hero">
<MediaAbout
title="World-Class Amenities"
description="Immerse yourself in a world of luxury with our exceptional facilities and services. From rejuvenating spa treatments to world-class dining, every detail has been crafted to exceed your expectations."
tag="Premium Services"
imageSrc="https://img.b2bpic.net/free-photo/woman-relaxing-bath-with-bubbles_1303-24667.jpg"
imageAlt="Luxury spa wellness experience"
useInvertedBackground="noInvert"
buttons={[
{ text: "Book Experience", href: "/contact" }
]}
/>
</div>
<div id="amenities-features" data-section="amenities-features">
<FeatureBento
title="Exceptional Facilities"
description="Discover the full range of premium amenities and services designed to enhance every moment of your stay."
tag="Luxury Services"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
features={[
{
title: "Award-Winning Spa",
description: "Rejuvenate your body and mind with our comprehensive spa services, therapeutic treatments, and wellness programs.",
bentoComponent: "globe"
},
{
title: "Fine Dining Restaurant",
description: "Experience culinary excellence with our internationally acclaimed restaurant featuring seasonal menus and premium ingredients.",
bentoComponent: "animated-bar-chart"
},
{
title: "Infinity Pool & Fitness Center",
description: "Stay active with our Olympic-sized infinity pool, state-of-the-art fitness center, and personal training services.",
bentoComponent: "line-chart"
},
{
title: "24/7 Concierge Services",
description: "Our dedicated concierge team provides personalized assistance for reservations, tours, and bespoke experiences.",
bentoComponent: "orbiting-icons",
centerIcon: Sparkles,
items: [
{ icon: MapPin, ring: 1 },
{ icon: Users, ring: 2 },
{ icon: Zap, ring: 3 }
]
},
{
title: "Private Beach Access",
description: "Enjoy exclusive access to our pristine private beach with complimentary water sports and beachside service.",
bentoComponent: "map"
},
{
title: "Business Center",
description: "Fully equipped business facilities with meeting rooms, conference spaces, and high-speed internet connectivity.",
bentoComponent: "3d-stack-cards",
items: [
{ icon: Utensils, title: "Meeting Rooms", subtitle: "Private spaces", detail: "Equipped with latest tech" },
{ icon: Waves, title: "Conference Center", subtitle: "Large events", detail: "Up to 200 guests" },
{ icon: Sparkles, title: "Business Lounge", subtitle: "Work in comfort", detail: "Premium amenities" }
]
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "About", href: "/about" }
]
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "https://example.com/careers" },
{ label: "Press", href: "https://example.com/press" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,164 @@
"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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
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="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Rooms", id: "rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "About", id: "about" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "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 Hotel News & Insights"
description="Stay updated with our latest news, travel tips, and exclusive offers from Luxury Hotel"
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
/>
)}
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "#rooms" },
{ label: "Amenities", href: "#amenities" },
{ label: "Pricing", href: "#pricing" }
]
},
{
items: [
{ label: "About", href: "#about" },
{ label: "Contact", href: "#contact" },
{ label: "Careers", href: "https://example.com/careers" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

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

@@ -0,0 +1,115 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail } from 'lucide-react';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
title="Plan Your Perfect Getaway"
description="Subscribe to our newsletter for exclusive offers, special promotions, and insider travel tips to enhance your next visit."
tagIcon={Mail}
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time. We'll send you exclusive hotel offers and travel inspiration."
/>
</div>
<div id="booking-info" data-section="booking-info">
<MediaAbout
title="Ready to Experience Luxury?"
description="Our reservations team is standing by to help you plan the perfect stay. Whether you're celebrating a special occasion, planning a romantic getaway, or organizing a business retreat, we'll ensure every detail exceeds your expectations."
tag="Reservations"
imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
imageAlt="Luxury hotel suite with scenic view"
useInvertedBackground="invertDefault"
buttons={[
{ text: "Call Now", href: "tel:+1-800-LUXURY" },
{ text: "Email Us", href: "mailto:reservations@luxuryhotel.com" }
]}
/>
</div>
<div id="visit-info" data-section="visit-info">
<MediaAbout
title="Visit Our Stunning Location"
description="Discover our prime location offering breathtaking ocean views, pristine beaches, and easy access to local attractions. Located in the heart of paradise, our hotel serves as the perfect base for exploring the region's natural beauty and cultural treasures."
tag="Location"
imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
imageAlt="Luxury hotel poolside experience"
useInvertedBackground="noInvert"
buttons={[
{ text: "Get Directions", href: "https://maps.google.com" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "About", href: "/about" }
]
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "https://example.com/careers" },
{ label: "Press", href: "https://example.com/press" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</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: #1f514c;;
--secondary-cta: #ffffff;;
--accent: #159c49;;
--background-accent: #a8e8ba;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #1f514c;;
--secondary-cta: #ffffff;;
--accent: #159c49;;
--background-accent: #a8e8ba;;
/* 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-mulish), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-mulish), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,228 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, MapPin, Users, Zap, Heart, Star, Crown, Mail } from 'lucide-react';
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Experience Luxury Redefined"
description="Discover the perfect blend of comfort, elegance, and world-class service. Your dream getaway awaits with stunning views, exquisite amenities, and personalized hospitality."
tag="5-Star Luxury Resort"
background={{ variant: "glowing-orb" }}
imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
imageAlt="Luxury hotel exterior view"
imagePosition="right"
buttons={[
{ text: "Book Your Stay", href: "/contact" },
{ text: "Explore Rooms", href: "/rooms" }
]}
/>
</div>
<div id="amenities" data-section="amenities">
<FeatureBento
title="World-Class Amenities"
description="From spa and wellness to fine dining and recreational facilities, we offer everything to make your stay extraordinary."
tag="Premium Services"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
features={[
{
title: "Luxury Spa & Wellness",
description: "Rejuvenate with our full-service spa and wellness center offering therapeutic treatments and yoga classes.",
bentoComponent: "globe"
},
{
title: "Fine Dining Restaurant",
description: "Savor international cuisine crafted by award-winning chefs in our elegant dining venues.",
bentoComponent: "animated-bar-chart"
},
{
title: "Olympic Pool & Recreation",
description: "Enjoy our state-of-the-art swimming pool, fitness center, and recreational facilities.",
bentoComponent: "line-chart"
},
{
title: "Concierge Services",
description: "Expert assistance for reservations, tours, and personalized itinerary planning.",
bentoComponent: "orbiting-icons",
centerIcon: Sparkles,
items: [
{ icon: MapPin, ring: 1 },
{ icon: Users, ring: 2 },
{ icon: Zap, ring: 3 }
]
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="An absolutely extraordinary experience from start to finish. The staff anticipated every need, the rooms are immaculate, and the views are breathtaking. We've already booked our next stay!"
rating={5}
author="Sarah Mitchell, Travel Blogger"
avatars={[
{ src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah Mitchell" },
{ src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Michael Johnson" },
{ src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Emily Chen" },
{ src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "David Williams" },
{ src: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Jessica Brown" },
{ src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "Anna Martinez" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Choose Your Perfect Stay"
description="Flexible pricing plans tailored to your needs and preferences."
tag="Best Value"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
plans={[
{
id: "standard-package",
badge: "Perfect for Couples",
badgeIcon: Heart,
price: "$150",
subtitle: "Per Night • Standard Room",
buttons: [
{ text: "Book Now", href: "/contact" }
],
features: [
"Comfortable queen bed",
"City view",
"En-suite bathroom",
"Daily housekeeping",
"WiFi access"
]
},
{
id: "deluxe-package",
badge: "Most Popular",
badgeIcon: Star,
price: "$250",
subtitle: "Per Night • Deluxe Room",
buttons: [
{ text: "Book Now", href: "/contact" }
],
features: [
"Luxurious king bed",
"Ocean view",
"Premium toiletries",
"Daily housekeeping",
"WiFi & streaming",
"Spa access"
]
},
{
id: "suite-package",
badge: "Ultimate Luxury",
badgeIcon: Crown,
price: "$400",
subtitle: "Per Night • Premium Suite",
buttons: [
{ text: "Book Now", href: "/contact" }
],
features: [
"Spacious suite with separate living area",
"Panoramic ocean views",
"Marble bathroom with spa tub",
"Premium turn-down service",
"Concierge access",
"Complimentary dining credit",
"Priority spa reservations"
]
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
title="Plan Your Perfect Getaway"
description="Subscribe to our newsletter for exclusive offers, special promotions, and insider travel tips to enhance your next visit."
tagIcon={Mail}
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time. We'll send you exclusive hotel offers and travel inspiration."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "About", href: "/about" }
]
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "https://example.com/careers" },
{ label: "Press", href: "https://example.com/press" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,124 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function RoomsPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxury Hotel"
navItems={[
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "/amenities" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardFour
title="Our Room Collection"
description="Discover elegantly appointed accommodations designed for maximum comfort and style."
tag="Luxury Accommodations"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
products={[
{
id: "standard-room",
name: "Standard Room",
price: "$150/night",
variant: "Queen Bed • City View",
imageSrc: "https://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118953.jpg",
imageAlt: "Standard hotel room"
},
{
id: "deluxe-room",
name: "Deluxe Room",
price: "$250/night",
variant: "King Bed • Ocean View",
imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
imageAlt: "Deluxe hotel room"
},
{
id: "premium-suite",
name: "Premium Suite",
price: "$400/night",
variant: "King Bed • Panoramic View",
imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-3064.jpg",
imageAlt: "Premium hotel suite"
}
]}
/>
</div>
<div id="room-details" data-section="room-details">
<MediaAbout
title="Unmatched Comfort & Elegance"
description="Every room at our luxury hotel is meticulously designed to provide an exceptional guest experience. From premium linens and marble bathrooms to stunning views and cutting-edge amenities, we've crafted spaces that define modern luxury hospitality."
tag="Room Features"
imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
imageAlt="Luxury hotel suite interior"
useInvertedBackground="invertDefault"
buttons={[
{ text: "Book Now", href: "/contact" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Luxury Hotel"
columns={[
{
items: [
{ label: "Rooms", href: "/rooms" },
{ label: "Amenities", href: "/amenities" },
{ label: "About", href: "/about" }
]
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "https://example.com/careers" },
{ label: "Press", href: "https://example.com/press" }
]
},
{
items: [
{ label: "Privacy Policy", href: "https://example.com/privacy" },
{ label: "Terms of Service", href: "https://example.com/terms" },
{ label: "Cookie Settings", href: "https://example.com/cookies" }
]
},
{
items: [
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}