fix: remove extra headings

src/components/categories/donate/donate.tsx

@@ -14,7 +14,7 @@ export function Donate() {
         </div>
       </div>
 
-      <h2 className={styles.title}>Support Me</h2>
+      <div className={styles.title}>Support Me</div>
       <p className={styles.desc}>Help me keep Moodist ad-free.</p>
       <SpecialButton
         className={styles.button}

src/components/category/category.tsx

@@ -22,7 +22,7 @@ export function Category({
         <div className={styles.icon}>{icon}</div>
       </div>
 
-      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.title}>{title}</div>
 
       <Sounds functional={functional} id={id} sounds={sounds} />
     </div>

src/components/hero/hero.module.css

@@ -61,7 +61,7 @@
       }
     }
 
-    & h1 {
+    & h2 {
       font-family: var(--font-display);
       font-size: var(--font-2xlg);
       font-weight: 600;

src/components/hero/hero.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { Balancer } from 'react-wrap-balancer';
 import { BsSoundwave } from 'react-icons/bs/index';
 
 import { Container } from '@/components/container';
@@ -25,13 +24,11 @@ export function Hero() {
 
         <div className={styles.title}>
           <div className={styles.left}></div>
-          <h1>Moodist</h1>
+          <h2>Moodist</h2>
           <div className={styles.right}></div>
         </div>
 
-        <h2 className={styles.desc}>
+        <h1 className={styles.desc}>Ambient sounds for focus and calm.</h1>
-          <Balancer>Ambient sounds for focus and calm.</Balancer>
-        </h2>
 
         <p className={styles.sounds}>
           <span className={styles.icon}>

src/components/sound/sound.module.css

@@ -91,7 +91,7 @@
     }
   }
 
-  & h3 {
+  & .label {
     margin-top: 8px;
     font-family: var(--font-heading);
     font-size: var(--font-sm);

src/components/sound/sound.tsx

@@ -90,7 +90,9 @@ export function Sound({
           icon
         )}
       </div>
-      <h3 id={id}>{label}</h3>
+      <div className={styles.label} id={id}>
+        {label}
+      </div>
       <Range id={id} />
     </div>
   );