From 8e621c28b3b912940dc248debb8adf9937004d6d Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 24 Nov 2025 13:09:22 +0100
Subject: [PATCH] refactor: update NodeHero "How it works" button to use smooth
 scroll with onClick handler instead of anchor link

- Changed Button from anchor link with to="#node-getting-started" to onClick handler with smooth scroll behavior
- Added id="node-how-it-works" to NodeSteps section for scroll target
- Removed as="a" prop from Button component
- Implemented scrollIntoView with smooth behavior and start block positioning
---
 src/pages/nodes/NodeHero.tsx  | 11 ++++++++++-
 src/pages/nodes/NodeSteps.tsx |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index 4c9c697..dc3cd02 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -28,7 +28,16 @@ export function NodeHero() {
               The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
             </P>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={() => {
+                  const el = document.getElementById('node-how-it-works')
+                  if (el) {
+                    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+                  }
+                }}
+              >
                 How it works
               </Button>
               <Button to="#node-architecture" as="a" variant="outline">
diff --git a/src/pages/nodes/NodeSteps.tsx b/src/pages/nodes/NodeSteps.tsx
index 922ee3c..cb6c05f 100644
--- a/src/pages/nodes/NodeSteps.tsx
+++ b/src/pages/nodes/NodeSteps.tsx
@@ -37,7 +37,7 @@ const steps = [
 
 export function NodeSteps() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
+    <section id="node-how-it-works" className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* Header spacing + borders */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />