From 44b0a9f8a5cf04b007b49543c19c83bc12d91140 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 29 Jul 2026 19:04:16 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Navigation.tsx | 75 ++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/layout/Navigation.tsx

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
new file mode 100644
index 0000000..525f291
--- /dev/null
+++ b/src/components/layout/Navigation.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Menu, ShoppingBag, ShoppingCart, X } from 'lucide-react';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import { useVulaCart } from '@/hooks/useVulaCart';
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const { itemCount } = useVulaCart();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 80);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <>
+      <div className="fixed top-4 left-0 right-0 z-50 flex justify-center px-4">
+      <style>{`html { scroll-behavior: smooth; }`}</style>
+        <header className={cn("flex items-center gap-6 px-6 py-3 rounded-full backdrop-blur-md border shadow-lg transition-all duration-300", scrolled ? "bg-white/90 border-border" : "bg-background/10 border-white/20")}>
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
+            <div className="w-7 h-7 rounded-lg bg-primary flex items-center justify-center text-primary-foreground flex-shrink-0">
+              <ShoppingBag className="h-4 w-4" />
+            </div>
+            <span className={cn("font-serif text-base font-bold transition-colors", scrolled ? "text-foreground" : "text-white")}>Diva</span>
+          </Link>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-5">
+            <Link href="/" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Home</Link>
+            <a href="#just-dropped" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Just Dropped</a>
+            <a href="#featured-products" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Featured Products</a>
+            <a href="#our-story" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Urban Ambition</a>
+            <a href="#most-popular" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Most Popular</a>
+            <a href="#lookbook" className={cn("transition-colors text-sm font-medium", scrolled ? "text-foreground/70 hover:text-foreground" : "text-white/80 hover:text-white")}>Diva Lookbook</a>
+            <Link href="/products" className="bg-primary text-primary-foreground px-3 py-1.5 rounded-full hover:bg-primary/90 transition-colors text-sm font-medium">Products</Link>
+            <button onClick={() => window.dispatchEvent(new CustomEvent('cart-drawer-open'))} aria-label="Open cart" className="relative text-foreground/80 hover:text-primary transition-colors p-1">
+              <ShoppingCart className="h-5 w-5" />
+              {itemCount > 0 && (
+                <span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs rounded-full h-4 w-4 flex items-center justify-center font-bold leading-none">{itemCount > 9 ? '9+' : itemCount}</span>
+              )}
+            </button>
+          </nav>
+
+          {/* Mobile toggle */}
+          <button
+            className={cn("md:hidden p-1.5 rounded-full 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-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </header>
+      </div>
+
+      {/* Mobile nav */}
+      {isOpen && (
+        <div className="fixed top-[72px] left-4 right-4 z-50 rounded-2xl bg-background/95 backdrop-blur border border-border shadow-lg py-3 md:hidden">
+              <Link href="/" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Home</Link>
+              <a href="#just-dropped" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Just Dropped</a>
+              <a href="#featured-products" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Featured Products</a>
+              <a href="#our-story" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Urban Ambition</a>
+              <a href="#most-popular" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Most Popular</a>
+              <a href="#lookbook" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Diva Lookbook</a>
+              <Link href="/products" className="block px-3 py-2 rounded-lg bg-primary text-primary-foreground font-medium" onClick={() => setIsOpen(false)}>Products</Link>
+        </div>
+      )}
+    </>
+  );
+}