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 (
+ <>
+
+
+
+ {/* Logo */}
+
+
+
+
+ Diva
+
+
+ {/* Desktop nav */}
+
+
+ {/* Mobile toggle */}
+
+
+