1  import Button from "../components/Button";
 2  import Logo from "../assets/zechubLogo.png";
 3  import { useEffect, useState } from "react";
 4  
 5  const Header = () => {
 6    const [scrolled, setScrolled] = useState(false);
 7  
 8    useEffect(() => {
 9      const handleScroll = () => {
10        setScrolled(window.scrollY > 200);
11      };
12  
13      window.addEventListener("scroll", handleScroll);
14      return () => window.removeEventListener("scroll", handleScroll);
15    }, []);
16    return (
17      <div
18        className={`w-screen h-[60px] fixed top-0 md:h-[80px]  transition-all duration-300 ${
19          scrolled ? "z-[120] bg-[#020717]" : "z-100"
20        }`}
21      >
22        <div className="md:max-w-[1440px] h-[60px] md:h-[80px] mx-auto w-full">
23          <div className="h-full">
24            <nav className="text-white h-full px-6 py-4">
25              <div className="flex h-full items-center justify-between">
26                {/* Left: Logo & Menu */}
27                <div>
28                  <img src={Logo} alt="" className="md:w-15 md:h-15 w-10 h-10" />
29                </div>
30                <div className="hidden lg:flex items-center space-x-8">
31                  <ul className="flex space-x-6 text-sm">
32                    <li className="hover:text-gray-300 cursor-pointer">
33                      <a href="https://youtube.com/@zechub">Tutorials</a>
34                    </li>
35                    <li className="hover:text-gray-300 cursor-pointer">
36                      <a href="https://zechub.wiki/developers">Developers</a>
37                    </li>
38                    <li className="hover:text-gray-300 cursor-pointer">
39                      <a href="https://zechub.wiki/contribute/help-build-zechub">
40                        Contribute
41                      </a>
42                    </li>
43                  </ul>
44                </div>
45  
46                {/* Right: Buttons */}
47                <div className="flex space-x-3">
48                  <Button className="text-[16px] block font-inter h-[40px] w-[96px]">
49                    <a href="/">Home</a>
50                  </Button>
51                  <Button className="text-[16px] hidden lg:block font-inter h-[40px] w-[96px]">
52                    <a href="https://zechub.wiki/dao">DAO</a>
53                  </Button>
54                  <Button className="text-[16px] hidden lg:block font-inter h-[40px] w-[127px]">
55                    <a href="https://zechub.wiki/dashboard">Dashboard</a>
56                  </Button>
57                  {/* <Button className="text-[16px] block font-inter md:h-[40px] md:w-[127px]">
58                    <a href="https://zechub.wiki/dashboard">FAQs</a>
59                  </Button> */}
60                  <Button
61                    className="text-[14px] md:text-[16px] font-inter md:h-[40px] md:w-[120px]"
62                    variant="filled"
63                  >
64                    <a href="https://zechub.wiki/donation">Donate</a>
65                  </Button>
66                </div>
67              </div>
68            </nav>
69          </div>
70        </div>
71      </div>
72    );
73  };
74  
75  export default Header;