From 6b4c7b3329678bd472f3bc60375f68308c6b20e7 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 24 Nov 2025 14:13:40 +0100
Subject: [PATCH] refactor: implement smart navigation for "Get Mycelium
 Connector" button with smooth scroll utility

- Added smoothScrollToElement utility function in src/utils/scroll.ts with easeInOutQuad animation and configurable duration
- Changed Header and HeaderDark "Get Mycelium Connector" button from static /download link to onClick handler with conditional navigation
- Added handleGetConnectorClick function that scrolls to #download section when on /network page, otherwise navigates to /network
- Change
---
 src/components/Header.tsx             | 26 ++++++++++++++++++++++---
 src/components/HeaderDark.tsx         | 26 ++++++++++++++++++++++---
 src/components/ui/floating-navbar.tsx | 16 ++++++++++++---
 src/pages/network/Hero.tsx            |  7 ++++++-
 src/pages/nodes/NodeHero.tsx          |  8 ++------
 src/utils/scroll.ts                   | 28 +++++++++++++++++++++++++++
 6 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/scroll.ts

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index abbc88d..c651c1e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { smoothScrollToElement } from '@/utils/scroll'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/mainlogo.svg'
@@ -9,6 +10,17 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 export function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === '/network') {
+      smoothScrollToElement('download', 1200)
+    } else {
+      navigate('/network')
+    }
+  }
+
   return (
     <header className="bg-white">
       <nav className="border-b border-gray-100">
@@ -61,7 +73,7 @@ export function Header() {
               >
                 Deploy Now
               </Button>
-              <Button to="/download" variant="solid" color="cyan">
+              <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
                 Get Mycelium Connector
               </Button>
             </div>
@@ -150,7 +162,15 @@ export function Header() {
                 >
                   Start Deployment
                 </Button>
-                <Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant="solid"
+                  color="cyan"
+                  className="mt-4 w-full"
+                  onClick={() => {
+                    setMobileMenuOpen(false)
+                    handleGetConnectorClick()
+                  }}
+                >
                   Get Mycelium Connector
                 </Button>
               </div>
diff --git a/src/components/HeaderDark.tsx b/src/components/HeaderDark.tsx
index ed1d266..fb42bac 100644
--- a/src/components/HeaderDark.tsx
+++ b/src/components/HeaderDark.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { smoothScrollToElement } from '@/utils/scroll'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/mainlogo.svg'
@@ -9,6 +10,17 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 export function HeaderDark() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === '/network') {
+      smoothScrollToElement('download', 1200)
+    } else {
+      navigate('/network')
+    }
+  }
+
   return (
     <header className="bg-[#111111]">
       <nav className="border-b border-gray-800">
@@ -61,7 +73,7 @@ export function HeaderDark() {
               >
                 Deploy Now
               </Button>
-              <Button to="/download" variant="solid" color="cyan">
+              <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
                 Get Mycelium Connector
               </Button>
             </div>
@@ -150,7 +162,15 @@ export function HeaderDark() {
                 >
                   Start Deployment
                 </Button>
-                <Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant="solid"
+                  color="cyan"
+                  className="mt-4 w-full"
+                  onClick={() => {
+                    setMobileMenuOpen(false)
+                    handleGetConnectorClick()
+                  }}
+                >
                   Get Mycelium Connector
                 </Button>
               </div>
diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx
index 658e784..071f909 100644
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -6,9 +6,10 @@ import {
   useScroll,
   useMotionValueEvent,
 } from "motion/react";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { Button } from "../Button";
+import { smoothScrollToElement } from "@/utils/scroll";
 
 
 export const FloatingNav = ({
@@ -23,8 +24,17 @@ export const FloatingNav = ({
   className?: string;
 }) => {
   const { scrollYProgress } = useScroll();
-
   const [visible, setVisible] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === "/network") {
+      smoothScrollToElement("download", 1200);
+    } else {
+      navigate("/network");
+    }
+  };
 
   useMotionValueEvent(scrollYProgress, "change", (current) => {
     if (typeof current === "number") {
@@ -80,7 +90,7 @@ export const FloatingNav = ({
           >
             <span className="hidden sm:block text-sm">Docs</span>
           </a>
-          <Button to="/download" variant="solid" color="cyan">
+          <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
             Get Mycelium Connector
           </Button>
         </div>
diff --git a/src/pages/network/Hero.tsx b/src/pages/network/Hero.tsx
index 525c36d..9d228a4 100644
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -1,6 +1,7 @@
 import { useId } from 'react'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
+import { smoothScrollToElement } from '@/utils/scroll'
 import phoneFrame from '../../images/phoneframe.png'
 import { H3, P
   , Eyebrow } from "@/components/Texts";
@@ -93,7 +94,11 @@ export function Hero() {
               Your Pod is your personal gateway to the network.
             </P>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <Button to="/download" variant="solid" color="cyan">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={() => smoothScrollToElement('download', 1200)}
+              >
                 Get Started
               </Button>
               <Button
diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index 709ad17..bccf0b6 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -2,6 +2,7 @@
 
 import { Button } from '@/components/Button'
 import { Eyebrow, H3, P } from '@/components/Texts'
+import { smoothScrollToElement } from '@/utils/scroll'
 
 export function NodeHero() {
   return (
@@ -31,12 +32,7 @@ export function NodeHero() {
               <Button
                 variant="solid"
                 color="cyan"
-                onClick={() => {
-                  const el = document.getElementById('node-how-it-works')
-                  if (el) {
-                    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-                  }
-                }}
+                onClick={() => smoothScrollToElement('node-how-it-works', 1200)}
               >
                 How it works
               </Button>
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
new file mode 100644
index 0000000..167463f
--- /dev/null
+++ b/src/utils/scroll.ts
@@ -0,0 +1,28 @@
+export function smoothScrollToElement(id: string, duration = 800) {
+  const element = document.getElementById(id)
+  if (!element) return
+
+  const startY = window.scrollY || window.pageYOffset
+  const targetRect = element.getBoundingClientRect()
+  const targetY = startY + targetRect.top
+  const startTime = performance.now()
+
+  function easeInOutQuad(t: number) {
+    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+  }
+
+  function step(currentTime: number) {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    const eased = easeInOutQuad(progress)
+    const nextY = startY + (targetY - startY) * eased
+
+    window.scrollTo(0, nextY)
+
+    if (progress < 1) {
+      requestAnimationFrame(step)
+    }
+  }
+
+  requestAnimationFrame(step)
+}