From a3347ed1c24ef9182171cc461c02ea6bcbac734d Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Fri, 7 Mar 2025 13:23:19 +0100
Subject: homepage fix

---
 src/pages/HomePage.tsx | 50 ++++++++++++++++++++++++--------------------------
 1 file 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">
-- 
cgit v1.3.1