🎨 Palette: Convert div-buttons to semantic buttons

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-10-25 - Legacy Div-Button Pattern
+**Learning:** Found interactive elements implemented as `div` wrappers containing `h4` tags. This pattern strips semantic meaning and prevents keyboard accessibility (no focus).
+**Action:** Replace with `<button>`, but ensure to explicitly re-apply typography styles (font-weight, font-family) to the button itself, as it no longer inherits from the removed `h4`.

index.html

@@ -34,9 +34,9 @@ <h3>Cooking Recipes</h3>
           collection of delicious and easy-to-follow recipes that are from
           Guyana.
         </p>
-        <div class="btn">
-          <h4>Join Us</h4>
-        </div>
+        <button class="btn">
+          Join Us
+        </button>
       </div>
       <div class="home-img">
         <img src="./assets/home_img.png" alt="home-img" />
@@ -101,9 +101,9 @@ <h3>Call to action! It's time!</h3>
           <p>Sign up to our website and get the best food recipes delivered to your inbox.</p>
         </div>
 
-        <div class="sign-up-btn">
-          <h4>Sign up</h4>
-        </div>
+        <button class="sign-up-btn">
+          Sign up
+        </button>
       </div>
     </div>