fix: scroll of Explore button to the footer (#136)

* fix: scroll of Explore button to the footer

Signed-off-by: Adi-204 <adiboghawala@gmail.com>

* refactor: removed explore id

Signed-off-by: Adi-204 <adiboghawala@gmail.com>

---------

Signed-off-by: Adi-204 <adiboghawala@gmail.com>

Author: Adi-204

src/App.tsx

@@ -27,8 +27,8 @@ const App = () => {
   const [loading, setLoading] = useState(true);
   const [searchParams] = useSearchParams();
 
-  const scrollToExplore = () => {
-    const exploreContent = document.getElementById("explore");
+  const scrollToFooter = () => {
+    const exploreContent = document.getElementById("footer");
     if (exploreContent) {
       exploreContent.scrollIntoView({ behavior: "smooth" });
     }
@@ -102,7 +102,7 @@ const App = () => {
   return (
     <AntdApp>
       <Layout style={{ minHeight: "100vh" }}>
-        <Navbar scrollToExplore={scrollToExplore} />
+        <Navbar scrollToFooter={scrollToFooter} />
         <Content>
           <Routes>
             <Route
@@ -116,7 +116,7 @@ const App = () => {
                     background: backgroundColor,
                   }}
                 >
-                  <Row id="explore">
+                  <Row>
                     <Col xs={24} sm={8}>
                       <Row
                         style={{

src/components/Footer.tsx

@@ -22,6 +22,7 @@ const CustomFooter: React.FC = () => {
 
   return (
     <Footer
+      id="footer"
       style={{
         background: "#1b2540",
         color: "white",

src/components/Navbar.tsx

@@ -14,7 +14,7 @@ import ToggleDarkMode from "./ToggleDarkMode";
 
 const { useBreakpoint } = Grid;
 
-function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
+function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
   const [hovered, setHovered] = useState<
     null | "home" | "explore" | "help" | "github" | "join"
   >(null);
@@ -143,7 +143,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
               ...menuItemStyle("explore", false),
               cursor: "pointer",
             }}
-            onClick={scrollToExplore}
+            onClick={scrollToFooter}
             onMouseEnter={() => setHovered("explore")}
             onMouseLeave={() => setHovered(null)}
           >

src/tests/components/Navbar.test.tsx

@@ -11,7 +11,7 @@ vi.mock("../../components/ToggleDarkMode", () => ({
 const renderNavbar = () => {
   render(
     <MemoryRouter>
-      <Navbar scrollToExplore={() => {}} />
+      <Navbar scrollToFooter={() => {}} />
     </MemoryRouter>
   );
 };