feat: Improved Navbar

src/Components/Navbar/Navbar.scss

@@ -1,5 +1,9 @@
 /* Variables for styling */
 $background-color: #262f2aec;
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #95b9b0;
 $text-color: #c6c9bf;
 $navbar-text-color: #c6c9bf;
 $hamburger-size: 32px;
@@ -11,7 +15,13 @@ $hamburger-size: 32px;
   align-items: center;
   padding: 20px;
   color: $text-color;
-  margin-top: 0em;
+  margin-top: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #27302B;
 
   @media (max-width: 768px) {
     padding-top: 20px;
@@ -27,6 +37,26 @@ $hamburger-size: 32px;
   @media (max-width: 768px) {
     margin-left: 20px;
   }
+
+  a {
+    color: $navbar-text-color;
+    transition: background 0.5s ease, color 0.5s ease;
+
+    &:hover {
+      background: linear-gradient(
+        90deg,
+        $primary-color,
+        $secondary-color,
+        $tertiary-color,
+        $quaternary-color
+      );
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: gradientAnimation 5s ease infinite;
+    }
+  }
 }
 
 /* Navbar Right */
@@ -41,7 +71,7 @@ $hamburger-size: 32px;
     align-items: flex-end;
     width: 100%;
     position: absolute;
-    top: 60px;
+    top: 55px;
     right: 0;
     background-color: $background-color;
     padding: 1vh;
@@ -66,6 +96,8 @@ $hamburger-size: 32px;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 700;
+  position: relative;
+  transition: background 0.5s ease, color 0.5s ease;
 
   @media (max-width: 768px) {
     margin: 0;
@@ -74,9 +106,7 @@ $hamburger-size: 32px;
     text-align: right;
     font-weight: 700;
     background-color: $background-color;
-    transition:
-      transform 0.3s ease,
-      opacity 0.3s ease;
+    transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateY(0px);
 
     &.show {
@@ -88,6 +118,21 @@ $hamburger-size: 32px;
       text-decoration: underline;
     }
   }
+
+  &:hover {
+    background: linear-gradient(
+      90deg,
+      $primary-color,
+      $secondary-color,
+      $tertiary-color,
+      $quaternary-color
+    );
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradientAnimation 5s ease infinite;
+  }
 }
 
 /* Hamburger Menu */
@@ -111,3 +156,16 @@ $hamburger-size: 32px;
     }
   }
 }
+
+/* Gradient Animation */
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

src/Components/Navbar/Navbar.tsx

@@ -17,14 +17,26 @@ const Navbar: React.FC = () => {
     event.preventDefault();
     const element = document.getElementById(id);
     if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+      const offsetPosition = elementPosition - 60; 
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      });
     }
     setMenuOpen(false);
   };
 
   return (
     <nav className="navbar">
-      <div className="navbar-left">carsonSgit</div>
+      <div className="navbar-left">
+          <a
+            href={`#hero`}
+            onClick={event => handleLinkClick(event, 'hero')}
+          >
+            carsonSgit
+          </a>
+          </div>
       <div className="hamburger" onClick={toggleMenu}>
         {menuOpen ? <FaTimes /> : <FaBars />}
       </div>