solved #20 i.e contact link is now working from other than homepage

components/Footer.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
 export default function Footer() {
   const router = useRouter();
@@ -15,17 +16,44 @@ export default function Footer() {
     { name: 'Contact', href: '/#contact' },
   ];
 
+  useEffect(() => {
+    const handleScrollToHash = () => {
+      const hash = window.location.hash;
+      if (hash) {
+        const id = hash.replace('#', '');
+        const element = document.getElementById(id);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth' });
+          history.replaceState(null, '', window.location.pathname);
+        }
+      }
+    };
+
+    // Immediately invoke the function once after navigation
+    handleScrollToHash();
+
+    // Cleanup logic: Only observe for initial change and then disconnect
+    const observer = new MutationObserver(() => {
+      handleScrollToHash();
+      observer.disconnect(); // Disconnect after one scroll to prevent repeated triggers
+    });
+
+    observer.observe(document.body, { attributes: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, [path]);
+
+
+
   const handleNavigation = (href: string) => {
     if (href.includes('#')) {
       const [page, section] = href.split('#');
+      const targetPage = page || '/';
 
-      if (path === page) {
+      if (path === targetPage) {
         document.getElementById(section)?.scrollIntoView({ behavior: 'smooth' });
       } else {
-        router.push(page);
-        setTimeout(() => {
-          document.getElementById(section)?.scrollIntoView({ behavior: 'smooth' });
-        }, 100); // Adding a small delay to ensure the page has navigated
+        router.push(targetPage + '#' + section);
       }
     } else {
       router.push(href);