Navbar added + backgroung gradient

src/Components/Navbar/Navbar.css

@@ -0,0 +1,84 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  position: fixed;
+  width: 100%;
+  height: 90px;
+  z-index: 10;
+}
+
+.header h1 {
+  padding-top: 7px;
+}
+
+.logo {
+  width: 60px;
+  height: 60px;
+}
+
+.header-title-child {
+  float: left;
+  width: 30%;
+}
+
+.header-bg {
+  background-color: rgba(0, 0, 0, 0.85);
+  transition: 0.5s;
+}
+
+.nav-menu {
+  display: flex;
+}
+
+.nav-menu li {
+  padding: 0 1rem;
+}
+
+.nav-menu li a {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.burger {
+  display: none;
+}
+
+@media screen and (max-width: 1040px) {
+  .nav-menu {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.9);
+    position: absolute;
+    top: 0;
+    left: -100%;
+    z-index: -3;
+    transition: 0.3s;
+  }
+
+  .nav-menu.active {
+    left: 0;
+  }
+
+  .logo {
+    padding-top: 7px;
+    width: 45px;
+    height: 45px;
+  }
+
+  .nav-menu li {
+    padding: 1rem 0;
+  }
+  .nav-menu li a {
+    font-size: 2rem;
+  }
+
+  .burger {
+    display: initial;
+    cursor: pointer;
+  }
+}

src/Components/Navbar/Navbar.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { FaTimes, FaBars } from "react-icons/fa";
+
+import Logo from "../../assets/logo.svg";
+
+export default () => {
+  const [state, setState] = useState(false);
+
+  const [colorChange, setColorChange] = useState(false);
+  const changeColor = () => {
+    if (window.scrollY >= 100) {
+      setColorChange(true);
+    } else {
+      setColorChange(false);
+    }
+  };
+
+  window.addEventListener("scroll", changeColor);
+
+  // Replace javascript:void(0) path with your path
+  const navigation = [
+    { title: "Home", path: "/" },
+    { title: "Services", path: "javascript:void(0)" },
+    { title: "Work", path: "javascript:void(0)" },
+    { title: "About Us", path: "javascript:void(0)" },
+  ];
+
+  return (
+    <nav
+      className={`${
+        colorChange
+          ? "bg-black bg-opacity-80 transition duration-500 w-full border-b md:border-0 md:static"
+          : ""
+      }`}
+    >
+      <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
+        <div className="flex items-center justify-between py-3 md:py-5 md:block">
+          <a href="/">
+            <img src={Logo} width={60} height={60} alt="logo" />
+          </a>
+          <div className="md:hidden">
+            <button
+              className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
+              onClick={() => setState(!state)}
+            >
+              {state ? (
+                <FaTimes className="h-6 w-6" />
+              ) : (
+                <FaBars className="h-6 w-6" />
+              )}
+            </button>
+          </div>
+        </div>
+        <div
+          className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
+            state ? "block" : "hidden"
+          }`}
+        >
+          <ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+            {navigation.map((item, idx) => {
+              return (
+                <li key={idx} className="hover:text-white">
+                  <a
+                    href={item.path}
+                    className="block py-2 md:py-0 md:px-4 text-lg font-medium$"
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};