Navbar 1Retro

1"use client";
2 
3import React, { useState } from "react";
4import { motion, AnimatePresence } from "framer-motion";
5import { Menu, X, ArrowRight } from "lucide-react";
6 
7const NavbarRetro = () => {
8  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
9  const navItems = ["HOME", "PRODUCTS", "RESOURCES", "PRICING"];
10 
11  return (
12    <div className="flex justify-center items-center font-mono">
13      <motion.nav
14        initial={{
15          height: "100%",
16          width: "100%",
17          top: 0,
18          background: "#ffffff",
19          border: "2px solid #000000",
20          boxShadow: "0px 0px 0px #000000",
21        }}
22        animate={{
23          height: isMobileMenuOpen ? "auto" : "60px",
24          width: "90%",
25          top: 20,
26          background: "#ffffff",
27          border: "2px solid #000000",
28          boxShadow: "4px 4px 0px 0px #000000",
29        }}
30        transition={{ duration: 0.8, ease: "anticipate" }}
31        className="absolute z-20 flex flex-col overflow-hidden text-black"
32      >
33        <motion.div
34          initial={{ opacity: 0 }}
35          animate={{ opacity: 1 }}
36          transition={{ duration: 0.8, ease: "easeInOut", delay: 0.4 }}
37          className="flex items-center justify-between w-full px-5 h-[60px] flex-shrink-0"
38        >
39          <div className="flex items-center gap-2 cursor-pointer group">
40            <div className="w-8 h-8 bg-black flex items-center justify-center text-white font-bold text-xs border-2 border-black group-hover:bg-white group-hover:text-black transition-colors">
41              &gt;_
42            </div>
43            <span className="text-sm font-bold tracking-widest uppercase">
44              PIXELFLOW_UI
45            </span>
46          </div>
47 
48          <div className="hidden md:flex items-center gap-4">
49            {navItems.map((item) => (
50              <a
51                key={item}
52                href="#"
53                className="text-sm font-bold hover:underline underline-offset-4 decoration-2 px-3 py-1.5 transition-all duration-200 uppercase"
54              >
55                {item}
56              </a>
57            ))}
58          </div>
59 
60          <div className="flex items-center gap-2">
61            <button className="hidden md:flex items-center gap-1 bg-black text-white border-2 border-black px-4 py-2 text-xs font-bold hover:bg-white hover:text-black transition-colors uppercase">
62              START <ArrowRight size={12} />
63            </button>
64 
65            <button
66// … truncated