Feature: Team Page

Because:
* TheOdinProject/top-meta#3
* Replaces the [hall of fame on the contributing page](http://theodinproject.com/contributing)

This commit:
* Adds a team locales file where team member details will live
* Divides the page into the team role structure we have within TOP.
* Adds an alumni section for former team members.
* Adds a smooth scroll anchor links for easier navigation between roles.

app/assets/stylesheets/stylesheets/typography.css

@@ -6,7 +6,7 @@
 
 @layer components {
   .page-heading-title {
-    @apply text-3xl text-gray-800 font-semibold pb-10 text-center mx-auto dark:text-gray-300;
+    @apply text-3xl text-gray-800 font-semibold pb-10 text-center mx-auto dark:text-gray-200;
   }
 
   .anchor-link {

app/components/team/former_member_component.html.erb

@@ -0,0 +1,6 @@
+<li>
+  <%= image_tag team_member.image, alt: "#{team_member.name} avatar", class: 'mx-auto h-14 w-14 rounded-full' %>
+  <%= link_to team_member.url, class: 'text-gray-900 hover:underline hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-200' do %>
+    <h3 class="mt-4 text-sm font-semibold leading-7 tracking-tight"><%= team_member.name %></h3>
+  <% end %>
+</li>

app/components/team/former_member_component.rb

@@ -0,0 +1,13 @@
+module Team
+  class FormerMemberComponent < ApplicationComponent
+    FormerTeamMember = Data.define(:name, :image, :url)
+
+    def initialize(team_member)
+      @team_member = FormerTeamMember.new(**team_member)
+    end
+
+    private
+
+    attr_reader :team_member
+  end
+end

app/components/team/member_component.html.erb

@@ -0,0 +1,21 @@
+<li class="rounded-2xl bg-white shadow dark:bg-gray-800 p-4 flex flex-col">
+  <%= image_tag team_member.image, alt: '', class: 'mx-auto h-20 w-20 rounded-full' %>
+
+  <div class="text-center pb-6">
+    <h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900 dark:text-white"><%= team_member.name %></h3>
+    <p class="text-sm leading-6 text-gray-500 dark:text-gray-400">Joined <%= team_member.joined %> &centerdot; <%= team_member.location %></p>
+  </div>
+
+  <% if team_member.socials.any? %>
+    <ul role="list" class="mt-auto flex justify-center gap-x-6">
+      <% team_member.socials.each do |social| %>
+        <li>
+          <%= link_to social.url, class: 'text-gray-500 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-100' do %>
+            <span class="sr-only"><%= team_member.name %> on <%= social.name %></span>
+            <%= inline_svg_tag "socials/#{social.name}.svg", class: 'h-5 w-5', aria: true %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</li>

app/components/team/member_component.rb

@@ -0,0 +1,20 @@
+module Team
+  class MemberComponent < ApplicationComponent
+    Social = Data.define(:name, :url)
+
+    TeamMember = Data.define(:name, :image, :location, :joined, :socials) do
+      def initialize(**args)
+        socials = args.fetch(:socials, []).map { |social| Social.new(**social) }
+        super(**args.merge(socials:))
+      end
+    end
+
+    def initialize(team_member)
+      @team_member = TeamMember.new(**team_member)
+    end
+
+    private
+
+    attr_reader :team_member
+  end
+end

app/components/team/navigation_component.html.erb

@@ -0,0 +1,14 @@
+<div>
+  <div class="sm:hidden">
+    <label for="tabs" class="sr-only">Select a tab</label>
+    <%= select_tag nil, options_for_select(roles.map(&:values)), class: 'block mx-auto rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-gray-100 dark:focus:border-gray-700 focus:outline-none focus:ring-gray-400 dark:focus:ring-gray-700 sm:text-sm dark:text-gray-300 w-2/3 dark:bg-gray-800 dark:border-gray-700', data: { controller: 'scroll-to'} %>
+  </div>
+
+  <div class="hidden sm:block">
+    <nav class="flex justify-center space-x-4" aria-label="Tabs">
+      <% roles.each do |role| %>
+        <%= link_to role[:name], role[:url], class: 'text-gray-600 hover:text-gray-800 hover:bg-gray-200 rounded-md px-3 py-2 font-medium dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-800', data: { controller: 'scroll-to'} %>
+      <% end %>
+    </nav>
+  </div>
+</div>

app/components/team/navigation_component.rb

@@ -0,0 +1,11 @@
+module Team
+  class NavigationComponent < ApplicationComponent
+    def initialize(roles:)
+      @roles = roles
+    end
+
+    private
+
+    attr_reader :roles
+  end
+end

app/controllers/static_pages_controller.rb

@@ -9,6 +9,8 @@ def about; end
 
   def faq; end
 
+  def team; end
+
   def terms_of_use; end
 
   def privacy_policy; end

app/helpers/button_helper.rb

@@ -8,7 +8,7 @@ def curriculum_button
   end
 
   def contribute_button
-    link_to 'Contribute', contributing_path, class: 'button button--primary'
+    link_to 'Learn how to contribute', contributing_path, class: 'button button--primary'
   end
 
   def chat_button

app/javascript/controllers/scroll_to_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class ScrollToController extends Controller {
+  static values = {
+    offset: { type: Number, default: 25 },
+    behavior: { type: String, default: 'smooth' },
+  };
+
+  connect() {
+    this.element.dataset.action = 'scroll-to#scrollTo';
+  }
+
+  scrollTo(event) {
+    event.preventDefault();
+
+    const id = this.element.hash || this.element.value;
+    const targetElement = document.querySelector(id);
+    const targetElementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+
+    window.scrollTo({
+      top: targetElementPosition - this.offsetValue,
+      behavior: this.behaviorValue,
+    });
+  }
+}

app/views/static_pages/team.html.erb

@@ -0,0 +1,34 @@
+<%= title('Team') %>
+
+<div class="page-container">
+  <div>
+    <h1 class="page-heading-title pb-4">Meet The Team</h1>
+    <p class="pb-4 text-center text-sm sm:text-base mx-auto text-gray-500 dark:text-gray-400">
+      The Odin project is run by a group of dedicated volunteers from around the world.
+    </p>
+    <%= render Team::NavigationComponent.new(
+          roles: [
+            { name: 'Core', url: '#core' },
+            { name: 'Maintainers', url: '#maintainers' },
+            { name: 'Moderators', url: '#moderators' },
+            { name: 'Alumni', url: '#alumni' }
+          ]
+        ) %>
+  </div>
+
+  <div class="max-w-7xl mx-auto pt-10 px-4 sm:pt-12 sm:px-6 lg:px-8">
+    <div class="mt-10 space-y-16">
+      <%= render 'static_pages/team/role', role: 'core', title: 'Core' %>
+      <%= render 'static_pages/team/role', role: 'maintainers', title: 'Maintainers' %>
+      <%= render 'static_pages/team/role', role: 'moderators', title: 'Moderators' %>
+      <%= render 'static_pages/team/alumni', role: 'alumni' %>
+    </div>
+
+      <p class="text-center">
+        <%= render 'shared/bottom_cta',
+          button: contribute_button,
+          heading: 'To all our contributors ❤️',
+          sub_heading: "We've had thousands of contributors outside of the official teams. To them, we extend a special thanks. Each and every contribution has played an important role in improving The Odin Project for the benefit of all learners." %>
+      </p>
+  </div>
+</div>

app/views/static_pages/team/_alumni.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-10" id="alumni">
+  <div>
+    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white pb-2">Alumni</h2>
+    <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base"><%= t("team_members.#{role}.description") %> </p>
+  </div>
+
+  <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-3 gap-x-8 gap-y-8 text-center sm:grid-cols-4 md:grid-cols-6 lg:mx-0 lg:max-w-none lg:grid-cols-6 xl:grid-cols-8">
+    <% t("team_members.#{role}.members").each do |team_member| %>
+      <%= render Team::FormerMemberComponent.new(team_member) %>
+    <% end %>
+  </ul>
+</div>

app/views/static_pages/team/_role.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-10" id="<%= role %>">
+  <div>
+    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white pb-2"><%= title %></h2>
+    <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base"><%= t("team_members.#{role}.description") %></p>
+  </div>
+
+  <ul role="list" class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-3 lg:mx-0 lg:max-w-none lg:grid-cols-4 xl:grid-cols-5 lg:gap-8">
+    <% t("team_members.#{role}.members").each do |team_member| %>
+      <%= render Team::MemberComponent.new(team_member) %>
+    <% end %>
+  </ul>
+</div>