Navbar 2Retro

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: "60px",
16          width: "60px",
17          top: -100,
18          borderRadius: "0px",
19          background: "#ffffff",
20          border: "2px solid #000000",
21          boxShadow: "0px 0px 0px #000000",
22        }}
23        animate={{
24          height: isMobileMenuOpen ? "auto" : "60px",
25          width: "90%",
26          top: 20,
27          borderRadius: "0px",
28          background: "#ffffff",
29          border: "2px solid #000000",
30          boxShadow: "4px 4px 0px 0px #000000",
31        }}
32        transition={{
33          type: "spring",
34          stiffness: 120,
35          damping: 15,
36          mass: 1,
37          delay: 0.2,
38        }}
39        className="absolute z-20 flex flex-col overflow-hidden text-black"
40      >
41        <motion.div
42          initial={{ opacity: 0 }}
43          animate={{ opacity: 1 }}
44          transition={{ duration: 0.5, delay: 0.6 }}
45          className="flex items-center justify-between w-full px-5 h-[60px] flex-shrink-0"
46        >
47          <div className="flex items-center gap-2 cursor-pointer group">
48            <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">
49              P
50            </div>
51            <span className="text-sm font-bold tracking-widest uppercase">
52              PIXELFLOW_UI
53            </span>
54          </div>
55 
56          <div className="hidden md:flex items-center gap-4">
57            {navItems.map((item) => (
58              <a
59                key={item}
60                href="#"
61                className="text-sm font-bold hover:bg-black hover:text-white px-3 py-1.5 transition-colors duration-200 uppercase"
62              >
63                {item}
64              </a>
65            ))}
66          </div>
67 
68          <div className="flex items-center gap-2">
69// … truncated