{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-1-retro",
  "title": "Navbar 1Retro",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/navbars/retro/Navbar1Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Menu, X, ArrowRight } from \"lucide-react\";\n\nconst NavbarRetro = () => {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const navItems = [\"HOME\", \"PRODUCTS\", \"RESOURCES\", \"PRICING\"];\n\n  return (\n    <div className=\"flex justify-center items-center font-mono\">\n      <motion.nav\n        initial={{\n          height: \"100%\",\n          width: \"100%\",\n          top: 0,\n          background: \"#ffffff\",\n          border: \"2px solid #000000\",\n          boxShadow: \"0px 0px 0px #000000\",\n        }}\n        animate={{\n          height: isMobileMenuOpen ? \"auto\" : \"60px\",\n          width: \"90%\",\n          top: 20,\n          background: \"#ffffff\",\n          border: \"2px solid #000000\",\n          boxShadow: \"4px 4px 0px 0px #000000\",\n        }}\n        transition={{ duration: 0.8, ease: \"anticipate\" }}\n        className=\"absolute z-20 flex flex-col overflow-hidden text-black\"\n      >\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.8, ease: \"easeInOut\", delay: 0.4 }}\n          className=\"flex items-center justify-between w-full px-5 h-[60px] flex-shrink-0\"\n        >\n          <div className=\"flex items-center gap-2 cursor-pointer group\">\n            <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\">\n              &gt;_\n            </div>\n            <span className=\"text-sm font-bold tracking-widest uppercase\">\n              PIXELFLOW_UI\n            </span>\n          </div>\n\n          <div className=\"hidden md:flex items-center gap-4\">\n            {navItems.map((item) => (\n              <a\n                key={item}\n                href=\"#\"\n                className=\"text-sm font-bold hover:underline underline-offset-4 decoration-2 px-3 py-1.5 transition-all duration-200 uppercase\"\n              >\n                {item}\n              </a>\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <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\">\n              START <ArrowRight size={12} />\n            </button>\n\n            <button\n              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n              className=\"md:hidden p-2 hover:bg-black hover:text-white transition-colors\"\n            >\n              {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}\n            </button>\n          </div>\n        </motion.div>\n\n        <AnimatePresence>\n          {isMobileMenuOpen && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: \"auto\" }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.3, ease: \"easeInOut\" }}\n              className=\"md:hidden px-4 pb-4 border-t-2 border-black\"\n            >\n              <div className=\"flex flex-col space-y-2 pt-4\">\n                {navItems.map((item, idx) => (\n                  <motion.a\n                    key={item}\n                    href=\"#\"\n                    initial={{ opacity: 0, x: -10 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ delay: idx * 0.05 }}\n                    className=\"text-lg font-bold hover:bg-black hover:text-white py-2 px-2 transition-colors uppercase\"\n                  >\n                    {\">\"} {item}\n                  </motion.a>\n                ))}\n                <motion.button\n                  initial={{ opacity: 0, y: 10 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 0.2 }}\n                  className=\"mt-4 w-full border-2 border-black text-black hover:bg-black hover:text-white py-3 font-bold flex items-center justify-center gap-2 uppercase transition-all\"\n                >\n                  INITIALIZE <ArrowRight size={16} />\n                </motion.button>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <motion.div\n          initial={{ opacity: 1 }}\n          animate={{ opacity: 0 }}\n          transition={{ duration: 0.8, ease: \"easeInOut\" }}\n          className=\"absolute inset-0 flex flex-col items-center justify-center pointer-events-none bg-white\"\n        >\n          <div className=\"text-4xl md:text-5xl font-bold tracking-tighter text-black uppercase flex flex-col items-center gap-2\">\n             <span>PIXELFLOW_UI</span>\n             <span className=\"text-sm tracking-[0.5em] animate-pulse\">LOADING...</span>\n          </div>\n        </motion.div>\n      </motion.nav>\n    </div>\n  );\n};\n\nexport default NavbarRetro;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}