Navbar 2Lyra

1"use client";
2 
3import React, { useState } from "react";
4import { motion, AnimatePresence } from "framer-motion";
5import { Menu, X, ArrowRight } from "lucide-react";
6 
7const Navbar = () => {
8  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
9  const navItems = ["Home", "Products", "Resources", "Pricing"];
10 
11  return (
12    <div className="flex justify-center items-center">
13      <motion.nav
14        initial={{
15          height: "60px",
16          width: "60px",
17          top: -100,
18          borderRadius: "0px",
19          background: "rgba(0, 0, 0, 1)",
20          border: "1px solid rgba(255,255,255,0)",
21        }}
22        animate={{
23          height: isMobileMenuOpen ? "auto" : "60px",
24          width: "90%",
25          top: 20,
26          borderRadius: "0px",
27          background: "rgba(0, 0, 0, 0.8)",
28          backdropFilter: "blur(10px)",
29          border: "1px solid rgba(255,255,255,0.2)",
30          boxShadow:
31            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
32        }}
33        transition={{
34          type: "spring",
35          stiffness: 120,
36          damping: 15,
37          mass: 1,
38          delay: 0.2,
39        }}
40        className="absolute z-20 flex flex-col overflow-hidden text-white"
41      >
42        <motion.div
43          initial={{ opacity: 0 }}
44          animate={{ opacity: 1 }}
45          transition={{ duration: 0.5, delay: 0.6 }}
46          className="flex items-center justify-between w-full px-5 h-[60px] flex-shrink-0"
47        >
48          <div className="flex items-center gap-2 cursor-pointer">
49            <div className="w-8 h-8 bg-white flex items-center justify-center text-black font-bold text-xs">
50              P
51            </div>
52            <span className="text-sm font-semibold text-neutral-200 tracking-tight uppercase">
53              PixelFlow
54            </span>
55          </div>
56 
57          <div className="hidden md:flex items-center gap-1">
58            {navItems.map((item) => (
59              <a
60                key={item}
61                href="#"
62                className="text-xs uppercase font-medium text-neutral-400 hover:text-white px-3 py-1.5 hover:bg-white/10 transition-all duration-200"
63              >
64                {item}
65              </a>
66            ))}
67          </div>
68 
69          <div className="flex items-center gap-2">
70// … truncated