115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import FooterBrand from '@/components/sections/footer/FooterBrand';
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
|
import { Outlet } from 'react-router-dom';
|
|
import { StyleProvider } from "@/components/ui/StyleProvider";
|
|
import Button from "@/components/ui/Button";
|
|
|
|
export default function Layout() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 10);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const navItems = [
|
|
{
|
|
"name": "Home", "href": "/"
|
|
},
|
|
{
|
|
"name": "About", "href": "#about"
|
|
},
|
|
{
|
|
"name": "Rooms", "href": "#accommodation"
|
|
},
|
|
{
|
|
"name": "Experiences", "href": "#experiences"
|
|
},
|
|
{
|
|
"name": "Offers", "href": "#offers"
|
|
},
|
|
{
|
|
"name": "Testimonials", "href": "#testimonials"
|
|
},
|
|
{
|
|
"name": "FAQs", "href": "#faq"
|
|
},
|
|
{
|
|
"name": "Contact", "href": "#contact"
|
|
},
|
|
{ name: "Booking", href: "/booking" },
|
|
|
|
];
|
|
|
|
return (
|
|
<StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
|
|
<SiteBackgroundSlot />
|
|
<SectionErrorBoundary name="navbar">
|
|
<nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
|
|
<div className="mx-auto flex w-content-width items-center justify-between">
|
|
<a href="/" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
|
|
The Grand Hotel
|
|
</a>
|
|
<div className="hidden lg:flex items-center gap-6">
|
|
{navItems.map((item) => (
|
|
<a key={item.name} href={item.href} className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors">
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<Button text="Book Now" href="/booking" variant="primary" />
|
|
</div>
|
|
</nav>
|
|
</SectionErrorBoundary>
|
|
<main className="flex-grow">
|
|
<Outlet />
|
|
</main>
|
|
<SectionErrorBoundary name="footer">
|
|
<FooterBrand
|
|
brand="The Grand Hotel"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Press", href: "#"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Rooms & Suites", href: "#accommodation"},
|
|
{
|
|
label: "Dining", href: "#experiences"},
|
|
{
|
|
label: "Spa & Wellness", href: "#experiences"},
|
|
{
|
|
label: "Events", href: "#experiences"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
{
|
|
label: "Sitemap", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</StyleProvider>
|
|
);
|
|
} |