From 6d684b4eb14c0a5c783e2c47455107e52a5f0cd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofie=20Sirev=C3=A5g=20Tysdal?= <sofiesty@stud.ntnu.no>
Date: Thu, 22 Oct 2026 14:16:18 +0000
Subject: [PATCH] Use the first band's heading as the front page's <h1> (#24)

Replaces the extra "Welcome to Wine not?" line. The front page looks
as before, and still has one <h1> without hidden text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SZzZEhTCwx4Swv7vYX3aPk
---
 frontend/src/components/HomePage.css |  3 ++-
 frontend/src/components/HomePage.tsx | 15 ++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/HomePage.css b/frontend/src/components/HomePage.css
index 9188e98..1af42d7 100644
--- a/frontend/src/components/HomePage.css
+++ b/frontend/src/components/HomePage.css
@@ -116,7 +116,8 @@ main.home {
   color: var(--photo-eyebrow);
 }
 
-.home-band h2 {
+/* The first band's heading is the page's <h1>, the others <h2>; all look the same */
+.home-band :is(h1, h2) {
   font-family: var(--font-display);
   font-weight: 400;
   font-size: clamp(2.2rem, 4.5vw, 3.5rem);
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index fdff897..9729164 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -22,11 +22,12 @@ import './HomePage.css';
  * later. When it does, see the note in the food band below.
  *
  * Accessibility:
- * - The page has one visible <h1>, "Welcome to Wine not?", styled as the
- *   small line above the first band's heading, and one <h2> per band, so
- *   screen reader users can jump between the bands by heading. (Earlier
- *   the <h1> was hidden text for screen readers only; we use visible text
- *   or aria-label instead of hidden helper elements.)
+ * - The first band's heading, "Find wines that match your taste", is the
+ *   page's <h1>, and the two other bands have an <h2> each, so screen
+ *   reader users can jump to the start of the page and between the bands
+ *   by heading. It looks the same as the <h2>s. (Earlier the <h1> was
+ *   hidden text for screen readers only; we use visible text or
+ *   aria-label instead of hidden helper elements.)
  * - Each band is a <section> named by its heading (aria-labelledby).
  * - The photos are decorative (alt=""): the text says where each band
  *   leads. A dark veil behind the text keeps the white text at 4.5:1 or
@@ -65,8 +66,8 @@ export default function HomePage() {
           height={807}
           fetchPriority="high"
         />
-        <h1 className="home-eyebrow">Welcome to Wine not?</h1>
-        <h2 id="home-explore">Find wines that match your taste</h2>
+        <p className="home-eyebrow">Explore by taste</p>
+        <h1 id="home-explore">Find wines that match your taste</h1>
         <p className="home-lead">
           See how wines compare on body and acidity, and pick one from the map.
         </p>