Navbar 1Nova

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: "100%",
16          width: "100%",
17          top: 0,
18          borderRadius: "0px",
19          background: "rgba(255, 255, 255, 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: "25px",
27          background: "rgba(255, 255, 255, 0.8)",
28          backdropFilter: "blur(10px)",
29          border: "1px solid rgba(255,255,255,0.5)",
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={{ duration: 0.8, ease: "anticipate" }}
34        className="absolute z-20 flex flex-col overflow-hidden text-black"
35      >
36        <motion.div
37          initial={{ opacity: 0 }}
38          animate={{ opacity: 1 }}
39          transition={{ duration: 0.8, ease: "easeInOut", delay: 0.4 }}
40          className="flex items-center justify-between w-full px-5 h-[60px] flex-shrink-0"
41        >
42          <div className="flex items-center gap-2 cursor-pointer">
43            <div className="w-8 h-8 bg-black rounded-full flex items-center justify-center text-white font-bold text-xs">
44              P
45            </div>
46            <span className="text-sm font-semibold text-neutral-800 tracking-tight">
47              PixelFlow
48            </span>
49          </div>
50 
51          <div className="hidden md:flex items-center gap-1">
52            {navItems.map((item) => (
53              <a
54                key={item}
55                href="#"
56                className="text-sm font-medium text-neutral-600 hover:text-black px-3 py-1.5 hover:bg-black/5 rounded-full transition-all duration-200"
57              >
58                {item}
59              </a>
60            ))}
61          </div>
62 
63          <div className="flex items-center gap-2">
64            <button className="hidden md:flex items-center gap-1 bg-black text-white px-4 py-2 rounded-full text-xs font-medium hover:bg-neutral-800 transition-colors">
65// … truncated