Added new image + added smooth scrolling for navar

app/components/navbar.jsx

@@ -1,37 +1,71 @@
+'use client';
+
 // @flow strict
 import Link from "next/link";
-
+import { useEffect } from "react";
+import { useRouter } from 'next/navigation';
 
 function Navbar() {
-  return (
-    <nav className="bg-transparent">
-      <div className="flex items-center justify-between py-5">
-        <div className="flex flex-shrink-0 items-center">
-          <Link
-            href="/"
-            className=" text-[#16f2b3] text-3xl font-bold">
-            arushyadlapati.com
-          </Link>
-        </div>
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleSmoothScroll = (e) => {
+      const href = e.currentTarget.href;
+      const targetId = href.replace(/.*\#/, "");
+      if (targetId) {
+        e.preventDefault();
+        const targetElement = document.getElementById(targetId);
+        if (targetElement) {
+          targetElement.scrollIntoView({
+            behavior: "smooth"
+          });
+          // Update the URL without a page reload
+          window.history.pushState({}, '', href);
+        }
+      }
+    };
 
-        <ul className="mt-4 flex h-screen max-h-0 w-full flex-col items-start text-sm opacity-0 md:mt-0 md:h-auto md:max-h-screen md:w-auto md:flex-row md:space-x-1 md:border-0 md:opacity-100" id="navbar-default">
-          <li>
-            <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#about">
-              <div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">ABOUT</div>
+    const links = document.querySelectorAll('a[href^="/#"]');
+    links.forEach(link => {
+      link.addEventListener("click", handleSmoothScroll);
+    });
+
+    return () => {
+      links.forEach(link => {
+        link.removeEventListener("click", handleSmoothScroll);
+      });
+    };
+  }, []);
+
+  return (
+      <nav className="bg-transparent">
+        <div className="flex items-center justify-between py-5">
+          <div className="flex flex-shrink-0 items-center">
+            <Link
+                href="/"
+                className="text-[#16f2b3] text-3xl font-bold">
+              arushyadlapati.com
             </Link>
-          </li>
-          <li>
-            <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#experience"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">EXPERIENCE</div></Link>
-          </li>
-          <li>
-            <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#skills"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">SKILLS</div></Link>
-          </li>
-          <li>
-            <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#projects"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">PROJECTS</div></Link>
-          </li>
-        </ul>
-      </div>
-    </nav>
+          </div>
+
+          <ul className="mt-4 flex h-screen max-h-0 w-full flex-col items-start text-sm opacity-0 md:mt-0 md:h-auto md:max-h-screen md:w-auto md:flex-row md:space-x-1 md:border-0 md:opacity-100" id="navbar-default">
+            <li>
+              <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#about">
+                <div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">ABOUT</div>
+              </Link>
+            </li>
+            <li>
+              <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#experience"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">EXPERIENCE</div></Link>
+            </li>
+            <li>
+              <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#skills"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">SKILLS</div></Link>
+            </li>
+            <li>
+              <Link className="block px-4 py-2 no-underline outline-none hover:no-underline" href="/#projects"><div className="text-sm text-white transition-colors duration-300 hover:text-pink-600">PROJECTS</div></Link>
+            </li>
+          </ul>
+        </div>
+      </nav>
   );
 };