Chore: Update contributing page CSS

Because:
  We are converting all page styles to Tailwind

This commit:
  * Removes old SCSS stylesheets and Bootstrap classes
  * Update contributing page and partials to use Tailwind
  * Minor stylistic changes and improvements

app/components/about_page/belief_component.html.erb

@@ -5,7 +5,7 @@
 
   <div class="sm:col-span-10 text-center sm:text-left space-y-4">
     <h3 class="pt-10 sm:pt-0 text-xl font-semibold">
-      <%= @belief[:short_text] %>
+      <%= @belief[:title] %>
     </h3>
     <p>
       <%= @belief[:description] %>

app/views/static_pages/contributing.html.erb

@@ -1,16 +1,32 @@
 <%= title('Contributing') %>
 
-<div class="container tmp-container-spacer">
-  <div class="page-intro">
-    <h1 class="page-heading-title">How to Contribute</h1>
-    <p class="page-intro__text">
-      The Odin Project is an Open Source project, built and maintained by volunteers who dedicate their time and skills to making The Odin Project one of the best free education platforms on the web. We are always working on projects to improve Odin and are always looking for people who want to join our growing team of maintainers.</a>
-    </p>
-  </div>
+<section class='page-container'>
+  <div class='grid grid-cols-12'>
+    <div class='col-span-12 md:col-start-3 md:col-span-8 space-y-8'>
+      <div class='text-center'>
+        <h1 class='page-heading-title'>How to Contribute</h1>
+        <p class='max-w-prose mx-auto'>
+          The Odin Project is an Open Source project, built and maintained by volunteers who dedicate their time
+          and skills to making The Odin Project one of the best free education platforms on the web. We are always
+          working on projects to improve Odin and are always looking for people who want to join our growing team
+          of maintainers.
+        </p>
+      </div>
 
-  <%= render 'static_pages/contributing/contributing_options' %>
-</div>
+      <%= render 'static_pages/contributing/contributing_options' %>
+    </div>
+  </div>
+</section>
 
-<%= render 'static_pages/contributing/benefits' %>
+<section class='bg-gray-100 odin-dark-bg-accent'>
+  <div class='page-container'>
+    <div class='grid grid-cols-12'>
+      <div class='col-span-12 md:col-start-3 md:col-span-8'>
+        <h2 class='text-gold font-bold text-center mb-16 text-2xl'>Why you should get involved</h2>
+        <%= render(AboutPage::BeliefComponent.with_collection(t('contributing_page_beliefs'))) %>
+      </div>
+    </div>
+  </div>
+</section>
 
-<%= render "static_pages/contributing/hall_of_fame" %>
+<%= render 'static_pages/contributing/hall_of_fame' %>

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

@@ -1,35 +1,26 @@
-<%
-  contributions = [
-    {
-      title: "Contribute to the Curriculum",
-      description: "The curriculum consists of the lessons and projects on this site. We are constantly expanding and updating the curriculum to keep it current and ensure it meets our students' needs in the ever changing world of web development. Our goal is to create the best free web development curriculum in the world, anyone is welcome to join in and help us in striving for this goal.",
-      path: "curriculum",
-    },
-    {
-      title: "Contribute to the Main Site",
-      description: "The site you are on right now is a Ruby on Rails application. We are always working on new features that improve the platform and help students in their learning journey. As with any Open Source project, there is also a constant backlog of outstanding issues and bugs that need to be fixed. Anyone is welcome to join in and start working on any of the issues we currently have posted in the Github repository for the site.",
-      path: "theodinproject",
-    }
-  ]
-%>
+<div>
+  <h3 class="text-center font-bold 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">
+    <% contributions = t('ways_to_contribute') %>
+    <% contributions.each do |contribution| %>
+      <%= render CardComponent.new(classes: "odin-dark-bg-accent mb-8 py-8 px-4 flex flex-col flex-between h-full") do |card| %>
+        <% card.header do %>
+          <h3 class="font-bold text-gold text-center text-xl my-2"><%= contribution[:title] %></h3>
+        <% end %>
 
-<div class='contributing-options'>
-  <h3 class="contributing-options__title text-xl mb-4">There are two main ways you can contribute:</h3>
-  <div class="col-lg-10 offset-lg-1 col-md-12">
-    <div class="row row-eq-height">
+        <% card.body(classes:"text-center mb-6" ) do %>
+          <p><%= contribution[:description] %></p>
+        <% end %>
 
-      <% contributions.each do |contribution| %>
-        <div class="col-lg-6">
-          <div class="contributing-card card-main">
-            <h3 class="contributing-card__title text-xl mb-2"><%= contribution[:title] %></h3>
-            <p class="contributing-card__description"><%= contribution[:description] %></p>
-            <div class="contributing-card__button">
-              <%= link_to 'View on GitHub', github_link(contribution[:path]), class: 'button button--primary', target: '_blank', rel: 'noreferrer' %>
-            </div>
-          </div>
-        </div>
+        <% card.footer(classes: 'text-center mt-auto') do %>
+            <%= link_to 'View on GitHub',
+                        github_link(contribution[:path]),
+                        class: 'button button--primary',
+                        target: '_blank',
+                        rel: 'noreferrer'
+            %>
+        <% end %>
       <% end %>
-
-    </div>
+    <% end %>
   </div>
 </div>