forked from emre/www_projectmycelium_com
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
This commit is contained in:
@@ -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.
|
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>
|
</P>
|
||||||
<div className="mt-10 flex items-center gap-x-6">
|
<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
|
How it works
|
||||||
</Button>
|
</Button>
|
||||||
<Button to="#node-architecture" as="a" variant="outline">
|
<Button to="#node-architecture" as="a" variant="outline">
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ const steps = [
|
|||||||
|
|
||||||
export function NodeSteps() {
|
export function NodeSteps() {
|
||||||
return (
|
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 */}
|
{/* Header spacing + borders */}
|
||||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||||||
|
|||||||
Reference in New Issue
Block a user