{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar1",
  "title": "Navbar Exemple 1",
  "description": "Modern responsive navigation bar with animated interactions, customizable links, and mobile menu support.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/navbar/navbar1.tsx",
      "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport Image from \"next/image\";\n\ntype Theme = \"dark\" | \"light\" | \"system\";\n\nconst NAV_LINKS = [\n    { label: \"Services\", href: \"#services\" },\n    { label: \"Coverage\", href: \"#coverage\" },\n    { label: \"Offers\", href: \"#offers\" },\n    { label: \"Price\", href: \"#price\" },\n    { label: \"About\", href: \"#about\" },\n    { label: \"Contact\", href: \"#contact\" },\n];\n\nconst SunIcon = () => (\n    <svg\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n    >\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\" />\n    </svg>\n);\n\nconst MoonIcon = () => (\n    <svg\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n    >\n        <path d=\"M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z\" />\n    </svg>\n);\n\nconst SystemIcon = () => (\n    <svg\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n    >\n        <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n        <path d=\"M8 21h8M12 17v4\" />\n    </svg>\n);\n\nconst UserIcon = () => (\n    <svg\n        width=\"13\"\n        height=\"13\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n    >\n        <path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\" />\n        <circle cx=\"12\" cy=\"7\" r=\"4\" />\n    </svg>\n);\n\nconst PlusIcon = () => (\n    <svg\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n    >\n        <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n);\n\nexport default function Navbar1() {\n    const [activeLink, setActiveLink] = useState(\"Services\");\n    const [theme, setTheme] = useState<Theme>(() => {\n        if (typeof window === \"undefined\") return \"system\";\n        const storedTheme = window.localStorage.getItem(\"theme\") as Theme | null;\n        return storedTheme === \"dark\" ||\n        storedTheme === \"light\" ||\n        storedTheme === \"system\"\n            ? storedTheme\n            : \"system\";\n    });\n    const [mounted, setMounted] = useState(false);\n    const [scrolled, setScrolled] = useState(false);\n    const [mobileOpen, setMobileOpen] = useState(false);\n\n    const prefersDark =\n        typeof window !== \"undefined\" &&\n        window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\n    const visibleTheme = mounted ? theme : \"system\";\n    const isDark =\n        mounted &&\n        (visibleTheme === \"dark\" || (visibleTheme === \"system\" && prefersDark));\n\n    useEffect(() => {\n        const handleScroll = () => setScrolled(window.scrollY > 12);\n        window.addEventListener(\"scroll\", handleScroll, { passive: true });\n        return () => window.removeEventListener(\"scroll\", handleScroll);\n    }, []);\n\n    useEffect(() => {\n        Promise.resolve().then(() => setMounted(true));\n    }, []);\n\n    useEffect(() => {\n        if (!mounted) return;\n\n        const root = window.document.documentElement;\n        const shouldUseDark =\n            theme === \"dark\" ||\n            (theme === \"system\" &&\n                window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n\n        root.classList.toggle(\"dark\", shouldUseDark);\n        window.localStorage.setItem(\"theme\", theme);\n    }, [mounted, theme]);\n\n    useEffect(() => {\n        if (theme !== \"system\") return;\n        const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n        const handleChange = (event: MediaQueryListEvent) => {\n            window.document.documentElement.classList.toggle(\"dark\", event.matches);\n        };\n        mediaQuery.addEventListener(\"change\", handleChange);\n        return () => mediaQuery.removeEventListener(\"change\", handleChange);\n    }, [theme]);\n\n    const themeButtons: { key: Theme; icon: React.ReactNode; label: string }[] = [\n        { key: \"dark\", icon: <MoonIcon />, label: \"Dark mode\" },\n        { key: \"system\", icon: <SystemIcon />, label: \"System\" },\n        { key: \"light\", icon: <SunIcon />, label: \"Light mode\" },\n    ];\n\n    return (\n        <header className=\"relative flex justify-center px-4 py-4\">\n            <motion.nav\n                initial={{ y: -24, opacity: 0 }}\n                animate={{ y: 0, opacity: 1 }}\n                transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\n                className={[\n                    \"w-full max-w-5xl rounded-2xl border px-6 flex items-center h-[62px] gap-0 transition-all duration-300\",\n                    isDark\n                        ? \"bg-[#0f0f0f] border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.45)]\"\n                        : \"bg-white border-black/10 shadow-[0_8px_32px_rgba(0,0,0,0.08)]\",\n                    scrolled ? \"shadow-2xl\" : \"\",\n                ].join(\" \")}\n            >\n                {/* Logo */}\n                <Link href=\"/\" className=\"flex items-center gap-2.5 mr-8 shrink-0\">\n                    <img\n                        src=\"https://bagui.vercel.app/logoR.png\"\n                        alt=\"Debisol icon\"\n                        width={36}\n                        height={36}\n                        className=\"rounded-lg\"\n                    />\n\n                    <span\n                        className={`font-bold text-[20px] tracking-tight transition-colors duration-300 ${\n                            isDark ? \"text-white\" : \"text-[#111]\"\n                        }`}\n                        style={{ fontFamily: \"'Syne', sans-serif\" }}\n                    >\n            Bag<span className=\"text-[#F59431]\">\\</span>Ui\n          </span>\n                </Link>\n\n                {/* Desktop Links */}\n                <div className=\"hidden md:flex items-center flex-1\">\n                    {NAV_LINKS.map((link, i) => (\n                        <motion.a\n                            key={link.label}\n                            href={link.href}\n                            initial={{ opacity: 0, y: -6 }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={{\n                                delay: 0.05 * i + 0.15,\n                                duration: 0.35,\n                                ease: \"easeOut\",\n                            }}\n                            onClick={() => setActiveLink(link.label)}\n                            className={[\n                                \"relative px-[13px] h-[62px] flex items-center text-[13.5px] transition-all duration-200 cursor-pointer whitespace-nowrap select-none\",\n                                activeLink === link.label\n                                    ? isDark\n                                        ? \"text-white\"\n                                        : \"text-[#111]\"\n                                    : isDark\n                                        ? \"text-white/50 hover:text-white hover:bg-white/5\"\n                                        : \"text-black/40 hover:text-black hover:bg-black/5\",\n                            ].join(\" \")}\n                        >\n                            {link.label}\n                            {activeLink === link.label && (\n                                <motion.span\n                                    layoutId=\"nav-underline\"\n                                    className=\"absolute bottom-0 left-[13px] right-[13px] h-[2px] rounded-t-full bg-[#F59431]\"\n                                    transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n                                />\n                            )}\n                        </motion.a>\n                    ))}\n                </div>\n\n                {/* Actions */}\n                <div className=\"hidden md:flex items-center gap-2 shrink-0\">\n                    {/* Theme Switcher */}\n                    <motion.div\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        transition={{ delay: 0.5 }}\n                        className={`flex items-center rounded-[10px] p-[3px] gap-[2px] border ${\n                            isDark\n                                ? \"bg-white/8 border-white/10\"\n                                : \"bg-black/5 border-black/10\"\n                        }`}\n                        role=\"group\"\n                        aria-label=\"Theme switcher\"\n                    >\n                        {themeButtons.map(({ key, icon, label }) => (\n                            <button\n                                key={key}\n                                onClick={() => setTheme(key)}\n                                title={label}\n                                className={[\n                                    \"w-7 h-7 rounded-[8px] flex items-center justify-center transition-all duration-200 cursor-pointer\",\n                                    visibleTheme === key\n                                        ? isDark\n                                            ? \"bg-[#0f0f0f] text-white border border-white/10 shadow-sm\"\n                                            : \"bg-white text-[#111] border border-black/10 shadow-sm\"\n                                        : isDark\n                                            ? \"text-white/40 hover:text-white hover:bg-white/10\"\n                                            : \"text-black/35 hover:text-black hover:bg-black/8\",\n                                ].join(\" \")}\n                            >\n                                {icon}\n                            </button>\n                        ))}\n                    </motion.div>\n\n                    {/* Divider */}\n                    <div\n                        className={`w-px h-5 ${isDark ? \"bg-white/10\" : \"bg-black/10\"}`}\n                    />\n\n                    {/* Login */}\n                    <motion.div\n                        initial={{ opacity: 0, x: 8 }}\n                        animate={{ opacity: 1, x: 0 }}\n                        transition={{ delay: 0.55 }}\n                    >\n                        <Link\n                            href=\"/login\"\n                            className={[\n                                \"h-[34px] px-4 rounded-[10px] border text-[13px] font-medium flex items-center gap-[6px] transition-all duration-200 whitespace-nowrap\",\n                                isDark\n                                    ? \"text-white/80 bg-white/8 border-white/10 hover:bg-white/14 hover:text-white\"\n                                    : \"text-[#111] bg-black/5 border-black/10 hover:bg-black/10 hover:text-black\",\n                            ].join(\" \")}\n                        >\n                            <UserIcon />\n                            Log in\n                        </Link>\n                    </motion.div>\n\n                    {/* CTA */}\n                    <motion.div\n                        initial={{ opacity: 0, x: 8 }}\n                        animate={{ opacity: 1, x: 0 }}\n                        transition={{ delay: 0.62 }}\n                        whileHover={{ y: -1 }}\n                        whileTap={{ scale: 0.97 }}\n                    >\n                        <Link\n                            href=\"/register\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={[\n                                \"h-[34px] px-4 rounded-[10px] text-[13px] font-semibold flex items-center gap-[6px] transition-opacity duration-200 whitespace-nowrap\",\n                                isDark\n                                    ? \"bg-[#F59431] text-[#0f0f0f] hover:opacity-90\"\n                                    : \"bg-[#111] text-white hover:opacity-85\",\n                            ].join(\" \")}\n                        >\n                            <PlusIcon />\n                            Create Free Account\n                        </Link>\n                    </motion.div>\n                </div>\n\n                {/* Mobile Hamburger */}\n                <button\n                    className={`ml-auto md:hidden flex flex-col gap-[5px] justify-center items-center w-9 h-9 rounded-lg transition-colors ${\n                        isDark\n                            ? \"text-white hover:bg-white/10\"\n                            : \"text-black hover:bg-black/5\"\n                    }`}\n                    onClick={() => setMobileOpen(!mobileOpen)}\n                    aria-label=\"Toggle menu\"\n                >\n                    <motion.span\n                        animate={{ rotate: mobileOpen ? 45 : 0, y: mobileOpen ? 7 : 0 }}\n                        className={`block w-5 h-[1.5px] ${isDark ? \"bg-white\" : \"bg-black\"}`}\n                    />\n                    <motion.span\n                        animate={{ opacity: mobileOpen ? 0 : 1 }}\n                        className={`block w-5 h-[1.5px] ${isDark ? \"bg-white\" : \"bg-black\"}`}\n                    />\n                    <motion.span\n                        animate={{ rotate: mobileOpen ? -45 : 0, y: mobileOpen ? -7 : 0 }}\n                        className={`block w-5 h-[1.5px] ${isDark ? \"bg-white\" : \"bg-black\"}`}\n                    />\n                </button>\n            </motion.nav>\n\n            {/* Mobile Menu */}\n            <AnimatePresence>\n                {mobileOpen && (\n                    <motion.div\n                        initial={{ opacity: 0, y: -8, scale: 0.97 }}\n                        animate={{ opacity: 1, y: 0, scale: 1 }}\n                        exit={{ opacity: 0, y: -8, scale: 0.97 }}\n                        transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}\n                        className={[\n                            \"absolute top-[72px] left-4 right-4 rounded-2xl border p-4 flex flex-col gap-1\",\n                            isDark\n                                ? \"bg-[#0f0f0f] border-white/10 shadow-[0_16px_48px_rgba(0,0,0,0.6)]\"\n                                : \"bg-white border-black/10 shadow-[0_16px_48px_rgba(0,0,0,0.12)]\",\n                        ].join(\" \")}\n                    >\n                        {NAV_LINKS.map((link) => (\n                            <a\n                                key={link.label}\n                                href={link.href}\n                                onClick={() => {\n                                    setActiveLink(link.label);\n                                    setMobileOpen(false);\n                                }}\n                                className={[\n                                    \"px-4 py-3 rounded-xl text-[14px] font-medium transition-all duration-200\",\n                                    activeLink === link.label\n                                        ? isDark\n                                            ? \"bg-amber-400/10 text-[#F59431]\"\n                                            : \"bg-amber-50 text-[#F59431]\"\n                                        : isDark\n                                            ? \"text-white/60 hover:text-white hover:bg-white/6\"\n                                            : \"text-black/50 hover:text-black hover:bg-black/5\",\n                                ].join(\" \")}\n                            >\n                                {link.label}\n                            </a>\n                        ))}\n\n                        <div\n                            className={`my-2 h-px ${isDark ? \"bg-white/10\" : \"bg-black/8\"}`}\n                        />\n\n                        {/* Mobile Theme Switcher */}\n                        <div className=\"flex items-center justify-between px-2\">\n              <span\n                  className={`text-[12px] ${isDark ? \"text-white/40\" : \"text-black/35\"}`}\n              >\n                Theme\n              </span>\n                            <div\n                                className={`flex items-center rounded-[10px] p-[3px] gap-[2px] border ${\n                                    isDark\n                                        ? \"bg-white/8 border-white/10\"\n                                        : \"bg-black/5 border-black/10\"\n                                }`}\n                            >\n                                {themeButtons.map(({ key, icon, label }) => (\n                                    <button\n                                        key={key}\n                                        onClick={() => setTheme(key)}\n                                        title={label}\n                                        className={[\n                                            \"w-7 h-7 rounded-[8px] flex items-center justify-center transition-all duration-200\",\n                                            visibleTheme === key\n                                                ? isDark\n                                                    ? \"bg-[#0f0f0f] text-white border border-white/10\"\n                                                    : \"bg-white text-[#111] border border-black/10\"\n                                                : isDark\n                                                    ? \"text-white/40 hover:text-white\"\n                                                    : \"text-black/35 hover:text-black\",\n                                        ].join(\" \")}\n                                    >\n                                        {icon}\n                                    </button>\n                                ))}\n                            </div>\n                        </div>\n\n                        <div className=\"flex flex-col gap-2 mt-1 px-0\">\n                            <Link\n                                href=\"/\"\n                                className={[\n                                    \"h-10 px-4 rounded-[10px] border text-[13px] font-medium flex items-center gap-2 justify-center\",\n                                    isDark\n                                        ? \"text-white/80 bg-white/8 border-white/10\"\n                                        : \"text-[#111] bg-black/5 border-black/10\",\n                                ].join(\" \")}\n                            >\n                                <UserIcon /> Log in\n                            </Link>\n                            <Link\n                                href=\"/\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className={[\n                                    \"h-10 px-4 rounded-[10px] text-[13px] font-semibold flex items-center gap-2 justify-center\",\n                                    isDark\n                                        ? \"bg-[#F59431] text-[#0f0f0f]\"\n                                        : \"bg-[#111] text-white\",\n                                ].join(\" \")}\n                            >\n                                <PlusIcon /> Create Free Account\n                            </Link>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </header>\n    );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/navbar1.tsx"
    }
  ],
  "type": "registry:block"
}