Deploy

src/components/layout/Navigation.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Hotel, Menu, X } from 'lucide-react';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 40);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <header className={cn("fixed top-0 left-0 right-0 z-50 transition-all duration-300", scrolled && "bg-background/95 backdrop-blur shadow-sm border-b border-border/40")}>
+      <style>{`html { scroll-behavior: smooth; }`}</style>
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
+            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground flex-shrink-0">
+              <Hotel className="h-4 w-4" />
+            </div>
+            <span className={cn("font-serif text-xl font-bold transition-colors", scrolled ? "text-foreground" : "text-white")}>Masai Suites</span>
+          </Link>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-6">
+            <Link href="/" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/80 hover:text-primary" : "text-white/90 hover:text-white")}>Home</Link>
+            <a href="#serene-suites" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/80 hover:text-primary" : "text-white/90 hover:text-white")}>Serene Suites</a>
+            <a href="#roots-of-masai" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/80 hover:text-primary" : "text-white/90 hover:text-white")}>Roots Of Masai</a>
+            <a href="#earthy-moments" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/80 hover:text-primary" : "text-white/90 hover:text-white")}>Earthy Moments Gallery</a>
+            <a href="#find-us" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/80 hover:text-primary" : "text-white/90 hover:text-white")}>Find Us And Connect</a>
+            <Link href="/booking" className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">Book a Room</Link>
+          </nav>
+
+          {/* Mobile toggle */}
+          <button
+            className={cn("md:hidden p-2 rounded-md transition-colors", scrolled ? "text-foreground hover:bg-muted" : "text-white hover:bg-white/10")}
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle menu"
+          >
+            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </button>
+        </div>
+
+        {/* Mobile nav */}
+        {isOpen && (
+          <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur py-4 space-y-1 px-2">
+              <Link href="/" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Home</Link>
+              <a href="#serene-suites" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Serene Suites</a>
+              <a href="#roots-of-masai" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Roots Of Masai</a>
+              <a href="#earthy-moments" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Earthy Moments Gallery</a>
+              <a href="#find-us" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Find Us And Connect</a>
+              <Link href="/booking" className="block px-3 py-2 rounded-lg bg-primary text-primary-foreground font-medium" onClick={() => setIsOpen(false)}>Book a Room</Link>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}