fix: headings markup

Author: jurajkapsz

src/components/Features.astro

@@ -20,7 +20,7 @@ const descriptions = Object.values(features.featureTabs).map(tab => tab.descript
 ---
 
 <section id="features" class="relative flex w-full flex-col py-12 text-start lg:py-36">
-  <Description class="mb-2 text-4xl font-bold sm:text-6xl">
+  <h2 class="mb-2 text-4xl font-bold sm:text-6xl">
     {
       (titles || features.titles).map((title, index) =>
         title !== '\n' ? (
@@ -32,7 +32,7 @@ const descriptions = Object.values(features.featureTabs).map(tab => tab.descript
         )
       )
     }
-  </Description>
+  </h2>
 
   <p class="feature-description-text opacity-0 lg:w-1/2">
     {features.description}
@@ -66,7 +66,7 @@ const descriptions = Object.values(features.featureTabs).map(tab => tab.descript
               data-feature-key={key}
               data-active={i === 0 ? 'true' : undefined}
             >
-              <Description class="text-2xl font-bold">{tab.title}</Description>
+              <h3 class="text-2xl font-bold">{tab.title}</h3>
               <Description>{tab.description}</Description>
             </div>
           ))

src/components/Footer.astro

@@ -1,7 +1,6 @@
 ---
 import Button from '~/components/Button.astro'
 import Circles from '~/components/Circles.astro'
-import Description from '~/components/Description.astro'
 import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
 import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
 import { getLocale, getPath, getUI } from '~/utils/i18n'
@@ -24,14 +23,13 @@ const {
       class="flex w-full flex-col gap-4 text-center lg:w-1/2 lg:text-left"
       aria-labelledby="footer-title"
     >
-      <a href="/">
-        <Description id="footer-title" class="text-6xl font-bold !text-paper"
-          >{footer.title}</Description
-        >
-      </a>
-      <Description class="mx-auto max-w-xl lg:mx-0">
+      <h2 id="footer-title" class="text-6xl font-bold !text-paper">
+        <a href="/">{footer.title}</a>
+      </h2>
+
+      <p class="mx-auto max-w-xl lg:mx-0">
         {footer.description}
-      </Description>
+      </p>
     </section>
     <section class="grid gap-10 place-self-center lg:place-self-start">
       <Button
@@ -54,15 +52,15 @@ const {
             class="flex flex-col items-center gap-2 sm:items-start"
             aria-labelledby="follow-us-heading"
           >
-            <h2 id="follow-us-heading" class="text-base !font-semibold">
+            <h3 id="follow-us-heading" class="text-base !font-semibold">
               {footer.followUs}
-            </h2>
+            </h3>
             <SocialMediaStrip />
           </section>
           <section class="flex flex-col gap-2" aria-labelledby="about-us-heading">
-            <h2 id="about-us-heading" class="text-base !font-semibold">
+            <h3 id="about-us-heading" class="text-base !font-semibold">
               {footer.aboutUs}
-            </h2>
+            </h3>
             <nav aria-label="About navigation">
               <ul class="grid gap-2 opacity-80">
                 <li>
@@ -80,9 +78,9 @@ const {
           </section>
         </div>
         <nav class="flex flex-col gap-2" aria-labelledby="get-started-heading">
-          <h2 id="get-started-heading" class="text-base !font-semibold">
+          <h3 id="get-started-heading" class="text-base !font-semibold">
             {footer.getStarted}
-          </h2>
+          </h3>
           <ul class="grid gap-2 opacity-80">
             <li>
               <a href="https://docs.zen-browser.app/" class="font-normal">{footer.documentation}</a>
@@ -101,9 +99,9 @@ const {
           </ul>
         </nav>
         <nav class="flex flex-col gap-2" aria-labelledby="get-help-heading">
-          <h2 id="get-help-heading" class="text-base !font-semibold">
+          <h3 id="get-help-heading" class="text-base !font-semibold">
             {footer.getHelp}
-          </h2>
+          </h3>
           <ul class="grid gap-2 opacity-80">
             <li>
               <a href="https://discord.gg/zen-browser" class="font-normal">{footer.discord}</a>

src/components/Sponsors.astro

@@ -19,12 +19,12 @@ const {
 <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
   <div class="grid items-center gap-8 text-center">
     <div class="grid gap-2">
-      <h3
+      <h2
         class="text-4xl font-bold sm:text-6xl"
         style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
       >
         {sponsors.title}
-      </h3>
+      </h2>
       <p class="text-base" style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
         <span class="opacity-80" set:html={sponsors.description} />
       </p>
@@ -74,7 +74,7 @@ const {
     const debug = false
 
     const elements = document.querySelectorAll(
-      '#sponsors h3, #sponsors p, #sponsors .sponsors__sponsor a'
+      '#sponsors h2, #sponsors p, #sponsors .sponsors__sponsor a'
     )
 
     animate(elements, {

src/pages/[...locale]/about.astro

@@ -1,10 +1,10 @@
 ---
 import { Image } from 'astro:assets'
+import Button from '~/components/Button.astro'
 import Description from '~/components/Description.astro'
 import Layout from '~/layouts/Layout.astro'
 import { getLocale, getUI } from '~/utils/i18n'
 export { getStaticPaths } from '~/utils/i18n'
-import Button from '~/components/Button.astro'
 
 const locale = getLocale(Astro)
 
@@ -17,24 +17,24 @@ const {
 <Layout title={layout.about.title} description={layout.about.description}>
   <main class="container flex min-h-screen w-full flex-col gap-24 py-24">
     <div class="flex w-full flex-col gap-6">
-      <Description class="text-6xl font-bold leading-none">{about.title}</Description>
+      <h1 class="text-6xl font-bold leading-none">{about.title}</h1>
       <Description class="max-w-4xl">
         {about.description}
       </Description>
       <Button href="/donate" class="w-fit" isPrimary>{about.littleHelp}</Button>
     </div>
     <div class="flex w-full flex-col gap-4">
-      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.mainTeam.title}</div>
+      <h2 class="text-4xl font-bold leading-none lg:text-5xl">{about.mainTeam.title}</h2>
       <Description>
         {about.mainTeam.description}
       </Description>
       <div class="flex flex-col gap-6">
         {
           Object.entries(about.mainTeam.members).map(([team, members]) => (
             <div class="flex flex-col gap-2">
-              <div class="text-3xl font-semibold">
+              <h3 class="text-3xl font-semibold">
                 {about.mainTeam.subTitle[team as keyof typeof about.mainTeam.subTitle]}
-              </div>
+              </h3>
               <ul class="flex flex-col gap-2">
                 {Object.entries(members).map(([_key, member]) => (
                   <li class="text-sm">
@@ -55,14 +55,12 @@ const {
       </div>
     </div>
     <div class="flex w-full flex-col gap-4">
-      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.contributors.title}</div>
+      <h2 class="text-4xl font-bold leading-none lg:text-5xl">{about.contributors.title}</h2>
       <Description>
         {about.contributors.description}
       </Description>
       <div class="flex w-fit flex-col gap-4">
-        <Description class="text-3xl font-semibold lg:text-4xl"
-          >{about.contributors.browser}</Description
-        >
+        <h3 class="text-3xl font-semibold lg:text-4xl">{about.contributors.browser}</h3>
         <a href="https://github.com/zen-browser/desktop/graphs/contributors"
           ><Image
             src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
@@ -73,9 +71,7 @@ const {
         >
       </div>
       <div class="flex w-fit flex-col gap-4">
-        <Description class="text-3xl font-semibold lg:text-4xl"
-          >{about.contributors.website}</Description
-        >
+        <h3 class="text-3xl font-semibold lg:text-4xl">{about.contributors.website}</h3>
         <a href="https://github.com/zen-browser/www/graphs/contributors"
           ><Image
             src="https://contributors-img.web.app/image?repo=zen-browser/www"

src/pages/[...locale]/index.astro

@@ -34,4 +34,3 @@ const { layout } = getUI(locale)
     animation: headerSlideIn 0.5s ease-in-out;
   }
 </style>
-<script></script>

src/pages/[...locale]/mods/index.astro

@@ -20,7 +20,7 @@ const allMods = (await getAllMods()) || []
 <Layout title={layout.mods.title}>
   <main class="container mt-32 flex flex-col gap-10 2xl:mt-32">
     <header class="flex w-full flex-col gap-8 border-dark">
-      <Description class="text-6xl font-bold">{mods.title}</Description>
+      <h1 class="text-6xl font-bold">{mods.title}</h1>
       <Description class="max-w-3xl">
         {mods.description}
       </Description>

src/pages/[...locale]/release-notes/index.astro

@@ -1,7 +1,6 @@
 ---
 import { Modal, ModalBody, ModalHeader } from 'free-astro-components'
 import Button from '~/components/Button.astro'
-import Description from '~/components/Description.astro'
 import ReleaseNoteItem from '~/components/ReleaseNoteItem.astro'
 import ArrowUpIcon from '~/icons/ArrowUp.astro'
 import Layout from '~/layouts/Layout.astro'
@@ -22,7 +21,7 @@ const {
     class="container flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
   >
     <div id="release-notes" class="py-42 flex min-h-screen w-full flex-col justify-center gap-8">
-      <Description class="mt-48 text-6xl font-bold">{releaseNotes.topSection.title}</Description>
+      <h1 class="mt-48 text-6xl font-bold">{releaseNotes.topSection.title}</h1>
       <p
         class="text-base opacity-55"
         set:html={releaseNotes.topSection.description.replaceAll(