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

components/Footer.tsx

@@ -1,37 +1,38 @@
-"use client";
+'use client';
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 
 export default function Footer() {
-  const router = useRouter();
   const path = usePathname();
 
+  useEffect(() => {
+    if (typeof window !== 'undefined' && path === '/' && window.location.hash) {
+      const handleHashChange = () => {
+        const element = document.querySelector(window.location.hash);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth' });
+        }
+      };
+
+      handleHashChange(); // Handle the current hash on load
+
+      window.addEventListener('hashchange', handleHashChange); // Listen for future hash changes
+      return () => window.removeEventListener('hashchange', handleHashChange);
+    }
+  }, [path]);
+
   const navigation = [
     { name: 'Home', href: '/' },
-    // { name: 'Projects', href: '/projects' },
     { name: 'Supporters', href: '/supporters' },
-    { name: 'Contact', href: '/#contact' },
+    { 
+      name: 'Contact', 
+      href: path === '/' ? '/#contact' : '/?section=contact'
+    },
   ];
 
-  const handleNavigation = (href: string) => {
-    if (href.includes('#')) {
-      const [page, section] = href.split('#');
-
-      if (path === page) {
-        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
-      }
-    } else {
-      router.push(href);
-    }
-  };
-
   const socialLinks = [
     {
       name: 'YouTube',
@@ -76,15 +77,10 @@ export default function Footer() {
             <nav className="flex flex-col space-y-3">
               {navigation.map((item) => (
                 <Link
+                  prefetch={false} // Disable prefetching to avoid potential conflicts
                   key={item.name}
                   href={item.href}
                   className="text-primary-900 hover:text-primary-600 transition-colors text-sm"
-                  onClick={(e) => {
-                    if (item.href.includes('#')) {
-                      e.preventDefault();
-                      handleNavigation(item.href);
-                    }
-                  }}
                 >
                   {item.name}
                 </Link>

components/header.tsx

@@ -84,7 +84,7 @@ export default function Header(props: { fixed?: boolean }) {
     { type: "dropdown", content: "Community", items: communityItems },
     { type: "link", content: "Supporters", href: "/supporters" },
     { type: "link", content: "Timeline", href: "/timeline" },
-    { type: "section", content: "Contact", id: "contact", page: "/" },
+    { type: "link", content: "Contact", href: path === '/' ? '/#contact' : '/?section=contact' },
     {
       type: "link",
       content: (
@@ -101,6 +101,21 @@ export default function Header(props: { fixed?: boolean }) {
       href: "https://github.com/ohcnetwork",
     },
   ];
+  useEffect(() => {
+    if (typeof window !== 'undefined' && path === '/' && window.location.hash) {
+      const handleHashChange = () => {
+        const element = document.querySelector(window.location.hash);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth' });
+        }
+      };
+
+      handleHashChange(); // Handle the current hash on load
+
+      window.addEventListener('hashchange', handleHashChange); // Listen for future hash changes
+      return () => window.removeEventListener('hashchange', handleHashChange);
+    }
+  }, [path]);
 
   useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 200);

pages/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   ArrowPathIcon,
   ChevronRightIcon,
@@ -16,6 +16,7 @@ import Link from "next/link";
 import CommitLayout from "@/components/Commit/CommitLayout";
 import Header from "@/components/header";
 import Footer from "@/components/Footer";
+import { useRouter } from "next/router";
 
 const primaryFeatures = [
   {
@@ -149,6 +150,28 @@ type Banner = {
 export default function Home() {
 
   const [banner, setBanner] = useState<Banner | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.asPath.includes('#')) {
+      const elementId = router.asPath.split('#')[1];
+      const element = document.getElementById(elementId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }, [router.asPath]);
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const section = searchParams.get('section');
+    if (section === 'contact') {
+      const element = document.querySelector('#contact');
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }, []);
 
   return (
     <div className="bg-white">