"use client"; import React, { useState } from 'react'; import { FaBars, FaTimes, FaHome, FaInfoCircle, FaCog, FaEnvelope } from 'react-icons/fa'; // Editable brand name const brandName = 'NIHILIST PARADISE'; // Navigation items const navItems = [ { name: 'Home', href: '#', icon: }, { name: 'About', href: '#', icon: }, { name: 'Services', href: '#', icon: }, { name: 'Contact', href: '#', icon: }, ]; // Button styles const buttonStyle = "group border-4 text-black/80 hover:text-black border-black shadow-[8px_8px_0_#000] px-3 py-2 bg-white hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0_#000] active:translate-x-2 active:translate-y-2 active:shadow-none transition-all duration-300 ease-in-out font-bold uppercase flex items-center justify-center space-x-2"; const iconStyle = "text-lg"; // Brand name style with smoother "wonk" effect const brandNameStyle = "text-2xl md:text-3xl font-bold text-black bg-yellow-400 px-3 py-2 border-4 border-black transform rotate-2 transition-transform duration-[1000ms] ease-in-out hover:rotate-[-1deg] hover:translate-x-1 hover:scale-105"; const BrutalistNavbar = () => { const [isOpen, setIsOpen] = useState(false); return (

{/* Logo Section with Smoother Wonk Effect */}

{brandName}

{/* Desktop Menu */}

{navItems.map((item) => ( ))}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isOpen && (

{navItems.map((item) => ( {item.icon} {item.name} ))}

)}

); }; export default BrutalistNavbar;

Header Components

Brutalism Navigation