Spaces:
Running
Running
| import React, { useState, useEffect } from 'react'; | |
| function Navigation() { | |
| const [scrolled, setScrolled] = useState(false); | |
| useEffect(() => { | |
| const handleScroll = () => { | |
| setScrolled(window.scrollY > 50); | |
| }; | |
| window.addEventListener('scroll', handleScroll); | |
| return () => window.removeEventListener('scroll', handleScroll); | |
| }, []); | |
| return ( | |
| <nav className={`editorial-nav ${scrolled ? 'scrolled' : ''}`}> | |
| <div className="nav-brand"> | |
| <span className="nav-brand-bar short"></span> | |
| <span className="nav-brand-name">TRADESTORM</span> | |
| <span className="nav-brand-bar long"></span> | |
| </div> | |
| <div className="nav-links"> | |
| <a href="#simulator" className="nav-link">Simulator</a> | |
| <a href="#features" className="nav-link">Features</a> | |
| <a href="#use-cases" className="nav-link">Use Cases</a> | |
| <a href="#contact" className="nav-link">Request Access</a> | |
| </div> | |
| </nav> | |
| ); | |
| } | |
| export default Navigation; | |