diff options
| author | Yuval Adam <_@yuv.al> | 2025-03-07 13:23:19 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-03-07 13:23:19 +0100 |
| commit | a3347ed1c24ef9182171cc461c02ea6bcbac734d (patch) | |
| tree | 0f36718b6f2d9fd3d9741362082b0a223d0a1599 /src | |
| parent | 14f4eafbe2011c12650bf6717028e99da21d1805 (diff) | |
homepage fix
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/HomePage.tsx | 50 |
1 files changed, 24 insertions, 26 deletions
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index c5fa257..442d8c4 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -240,29 +240,6 @@ const HomePage = () => { <h2>Master Morse Code Through Play</h2> <p>Morse Hero turns learning Morse code into an engaging game. Listen to the signals, identify the characters, and improve your skills with every round.</p> - <div className="feature-grid"> - <div className="feature-item"> - <div className="feature-icon">🎮</div> - <h3>Interactive Learning</h3> - <p>Learn by doing with our interactive game format</p> - </div> - <div className="feature-item"> - <div className="feature-icon">🔊</div> - <h3>Audio Recognition</h3> - <p>Train your ear to recognize Morse code sounds</p> - </div> - <div className="feature-item"> - <div className="feature-icon">📈</div> - <h3>Track Progress</h3> - <p>See your improvement with each practice session</p> - </div> - <div className="feature-item"> - <div className="feature-icon">⚡</div> - <h3>Adjustable Speed</h3> - <p>Set your own pace as you build your skills</p> - </div> - </div> - <div className="cta-container"> <button id="startButton" className="start-button" onClick={startGame}> Start Playing @@ -273,6 +250,7 @@ const HomePage = () => { </button> </div> + {showHowToPlay && ( <div className="how-to-play"> <h3>How to Play Morse Hero</h3> @@ -293,6 +271,29 @@ const HomePage = () => { <div className="chart-link"> <Link to="/chart">View Morse Code Chart</Link> </div> + + <div className="feature-grid"> + <div className="feature-item"> + <div className="feature-icon">🎮</div> + <h3>Interactive Learning</h3> + <p>Learn by doing with our interactive game format</p> + </div> + <div className="feature-item"> + <div className="feature-icon">🔊</div> + <h3>Audio Recognition</h3> + <p>Train your ear to recognize Morse code sounds</p> + </div> + <div className="feature-item"> + <div className="feature-icon">📈</div> + <h3>Track Progress</h3> + <p>See your improvement with each practice session</p> + </div> + <div className="feature-item"> + <div className="feature-icon">⚡</div> + <h3>Adjustable Speed</h3> + <p>Set your own pace as you build your skills</p> + </div> + </div> </div> </div> ) : ( @@ -312,9 +313,6 @@ const HomePage = () => { <div className="game-container"> <div className="game-instructions"> <p>Listen to the Morse code and select the correct character</p> - <button className="replay-button" onClick={() => playMorseCode(currentChar)}> - <span className="replay-icon">↻</span> Replay Sound - </button> </div> <div className="options"> |