Fix: wrong hierarchy for some headings (#3998)

<!-- Thank you for taking the time to contribute to The Odin Project. In
order to get this pull request (PR) merged in a reasonable amount of
time, you must complete this entire template. -->

## Because
<!-- Summarize the purpose or reasons for this PR, e.g. what problem it
solves or what benefit it provides. -->
Some headings of our static pages are not using the correct hierarchy.

## This PR
<!-- A bullet point list of one or more items describing the specific
changes. -->

1. For `/faq` page, changed `components/faq/item_component.html.erb`
heading from `h3` to `h2`.
2. For `/about` page, changed `views/shared/_bottom_cta.html.erb`
heading from `h4` to `h2`.
3. For `/contributing` page, changed two headings's hierarchy.

## Issue
<!--
If this PR closes an open issue in this repo, replace the XXXXX below
with the issue number, e.g. Closes #2013.

If this PR closes an open issue in another TOP repo, replace the #XXXXX
with the URL of the issue, e.g. Closes
https://github.com/TheOdinProject/curriculum/issues/XXXXX

If this PR does not close, but is related to another issue or PR, you
can link it as above without the 'Closes' keyword, e.g. 'Related to
#2013'.
-->
Closes #3965 

## Additional Information
<!-- Any other information about this PR, such as a link to a Discord
discussion. -->

This is a resubmitted PR due to my remote branch conflicts. The previous
PR #3995 is closed.

## Pull Request Requirements
<!-- Replace the whitespace between the square brackets with an 'x',
e.g. [x]. After you create the PR, they will become checkboxes that you
can click on. -->
- [x] I have thoroughly read and understand [The Odin Project
Contributing
Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
- [x] The title of this PR follows the `keyword: brief description of
change` format, using one of the following keywords:
  - `Feature` - adds new or amends existing user-facing behavior
- `Chore` - changes that have no user-facing value, refactors,
dependency bumps, etc
  - `Fix` - bug fixes
-   [x] The `Because` section summarizes the reason for this PR
- [x] The `This PR` section has a bullet point list describing the
changes in this PR
- [x] I have verified all tests and linters pass after making these
changes.
- [x] If this PR addresses an open issue, it is linked in the `Issue`
section
-   [ ] If applicable, this PR includes new or updated automated tests

app/components/faq/item_component.html.erb

@@ -5,22 +5,22 @@
       data-css-toggle-from-class="rotate-0"
       data-css-toggle-to-class="-rotate-180"
       type="button"
-      class="text-left w-full flex justify-between items-start text-gray-400"
+      class="flex items-start justify-between w-full text-left text-gray-400"
       aria-controls="faq-0"
       aria-expanded="false"
       data-action="click->visibility#toggle click->css-toggle#toggle"
       data-test-id="faq-question">
 
-      <h3 class="font-semibold text-gray-900 bold m-0 p-1 text-xl dark:text-gray-300">
+      <h2 class="p-1 m-0 text-xl font-semibold text-gray-900 bold dark:text-gray-300">
         <%= item.fetch(:question) %>
-      </h3>
+      </h2>
 
-      <span class="ml-6 h-7 flex items-center">
+      <span class="flex items-center ml-6 h-7">
         <%= inline_svg_tag 'icons/icon-chevron-down.svg', class: 'rotate-0 h-6 w-6 transform', data: { css_toggle_target: 'element' } %>
       </span>
     </button>
   </dt>
-  <dd class="mt-4 pr-8 hidden max-w-none prose prose-gray-500 dark:prose-invert dark:antialiased" data-visibility-target="content" data-test-id="faq-answer">
+  <dd class="hidden pr-8 mt-4 prose max-w-none prose-gray-500 dark:prose-invert dark:antialiased" data-visibility-target="content" data-test-id="faq-answer">
     <%= item.fetch(:answer).html_safe %>
   </dd>
 </div>

app/views/shared/_bottom_cta.html.erb

@@ -1,7 +1,7 @@
-<div class="py-20 text-center max-w-4xl mx-auto">
-  <h4 class="text-2xl mb-4 font-light leading-10 text-gray-600 dark:text-gray-200"><%= heading %></h4>
+<div class="max-w-4xl py-20 mx-auto text-center">
+  <h2 class="mb-4 text-2xl font-light leading-10 text-gray-600 dark:text-gray-200"><%= heading %></h2>
   <% if local_assigns[:sub_heading].present? %>
-  <p class="font-normal mb-10 text-gray-500 dark:text-gray-400"><%= sub_heading %></p>
+  <p class="mb-10 font-normal text-gray-500 dark:text-gray-400"><%= sub_heading %></p>
   <% end %>
   <%= button %>
 </div>

app/views/static_pages/contributing/_contributing_options.html.erb

@@ -1,15 +1,15 @@
 <div>
-  <h3 class="text-center font-semibold text-xl mb-8">There are two main ways you can contribute:</h3>
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+  <h2 class="mb-8 text-xl font-semibold text-center">There are two main ways you can contribute:</h2>
+  <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
     <% contributions = t('.ways_to_contribute') %>
     <% contributions.each do |contribution| %>
       <%= render CardComponent.new(classes: 'flex flex-col flex-between h-full border-t-8 border-t-gold-600 dark:border-t-gold-700') do |card| %>
         <% card.with_header do %>
-          <h3 class="font-medium text-center text-xl"><%= contribution[:title] %></h3>
+          <h3 class="text-xl font-medium text-center"><%= contribution[:title] %></h3>
         <% end %>
 
         <% card.with_body(classes: 'pt-4') do %>
-          <p class="prose prose-gray dark:prose-invert text-gray-500 dark:text-gray-300/70"><%= contribution[:description] %></p>
+          <p class="prose text-gray-500 prose-gray dark:prose-invert dark:text-gray-300/70"><%= contribution[:description] %></p>
         <% end %>
 
         <% card.with_footer(classes: 'text-center mt-auto') do %>

app/views/static_pages/contributing/_hall_of_fame.html.erb

@@ -1,8 +1,8 @@
 <section class="bg-white dark:bg-gray-900">
-  <div class='page-container space-y-10'>
+  <div class='space-y-10 page-container'>
     <div>
-      <h3 class="text-center font-bold text-2xl pb-3">Hall of Fame</h3>
-      <p class="text-center max-w-prose mx-auto text-gray-500 dark:text-gray-400">
+      <h2 class="pb-3 text-2xl font-bold text-center">Hall of Fame</h2>
+      <p class="mx-auto text-center text-gray-500 max-w-prose dark:text-gray-400">
         The Hall of Fame members are the hardworking devs who have built
         The Odin Project into the site that you see before you now.
       </p>
@@ -19,7 +19,7 @@
       <% end %>
     </div>
 
-    <div class="text-center no-underline hover:underline py-6">
+    <div class="py-6 text-center no-underline hover:underline">
       <%= link_to 'View All Contributors',
           github_link('theodinproject/graphs/contributors'),
           class: 'underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300',