Added smooth scrolling

src/Components/Navbar/Navbar.tsx

@@ -19,11 +19,16 @@ export default () => {
 
   // Replace javascript:void(0) path with your path
   const navigation = [
-    { title: "Services", path: "#Services" },
+    { title: "Services", path: "Services" },
-    { title: "Results", path: "#Results" },
+    { title: "Results", path: "Results" },
-    { title: "Contact", path: "#Contact" },
+    { title: "Contact", path: "Contact" },
   ];
 
+  const handleNavigation = (path: string) => {
+    const element = document.getElementById(path);
+    element?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <nav
       className={`${
@@ -34,7 +39,13 @@ export default () => {
     >
       <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="/">
+          <a
+            href="Top"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent the default anchor tag behavior
+              window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to the top of the page
+            }}
+          >
             <img src={Logo} width={60} height={60} alt="logo" />
           </a>
           <div className="md:hidden">
@@ -66,7 +77,11 @@ export default () => {
                   <a
                     href={item.path}
                     className="block py-2 md:py-0 md:px-4 text-xl font-medium"
-                    onClick={() => setState(false)}
+                    onClick={(e) => {
+                      e.preventDefault(); // Prevent the default anchor tag behavior
+                      setState(false); // Close the navigation
+                      handleNavigation(item.path); // Navigate to the section
+                    }}
                   >
                     {item.title}
                   </a>

src/index.css

@@ -24,4 +24,6 @@ body {
   @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
 }
 
-
+.gold-text {
+  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
+}