"use client"; import { useState, useEffect } from "react"; import { Menu, X, ArrowRight } from "lucide-react"; import Image from "next/image"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/src/lib/utils"; type NavItem = { name: string; href: string; }; interface NavProps { items: NavItem[]; className?: string; activeTab?: string; } // ============================================================================ // 2. THE "GUMROAD" NAV (Neo-Brutalism) - FULL HEADER VERSION // Style: High Contrast, Thick Borders, Hard Shadows, Bold Colors. // ============================================================================ export const NeoBrutalNav = ({ items, className }: NavProps) => { const [isOpen, setIsOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [active, setActive] = useState(items[0]?.name || ""); // Handle Scroll for "Hard" Shadow effect useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); return ( <>

{/* --- LEFT: LOGO --- */} {/* Logo Container with Hard Shadow */}

Uilora {/* --- CENTER: DESKTOP NAV --- */} {/* --- RIGHT: CTA & MOBILE TOGGLE --- */}

{/* CTA Button (Hidden on very small screens) */} {/* Mobile Menu Toggle */}

{/* --- MOBILE MENU DROPDOWN --- */} {isOpen && (

{items.map((item) => ( { setActive(item.name); setIsOpen(false); }} className={cn( "flex items-center justify-between p-4 border-2 border-black font-bold uppercase shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all", active === item.name ? "bg-[#A6FFCB]" : "bg-white hover:bg-[#FFDEE9]" )} > {item.name} {active === item.name && } ))}

)}

{/* Spacer so content doesn't get hidden behind fixed header */}

); };

Property	Type	Default	Description
items	Array<{name: string, href: string}>	[]	Array of navigation items with name and href.
className	string	undefined	Additional CSS classes for the nav container.
activeTab	string	undefined	Controlled state for active tab.

Neo Brutal Nav

Props