web/wp-content/themes/mozilla-builders/templates/pages/archive-people.twig

{% extends "layouts/base.twig" %}

{%- block custom_body_classes -%}
  theme-dark
{%- endblock -%}

{% block pageBody %}

  {% include 'components/page-topper.twig' with { title: title } %}

  <nav aria-label="Cohorts" class="centered-page px-grid-site-margin mb-24 sticky top-4 md:top-wp-admin-bar md:pt-4 z-50">
    <div class="flex max-md:flex-col border border-content max-md:divide-y md:divide-x divide-content bg-main">
      {% for cohort in cohorts %}
        <a href="#{{ cohort.slug }}" class="bg-main flex-1 py-1 px-16 text-xs leading-3 transition-colors hocus:bg-action hocus:text-action-reverse">
          <p class="uppercase text-center text-xs leading-3 tracking-wide whitespace-nowrap">{{ cohort.title }}</p>
        </a>
      {% endfor %}
    </div>
  </nav>

  <div class="flex flex-col gap-y-12 lg:gap-y-24 mb-24">
    {% for cohort in cohorts %}
      <section id="{{ cohort.slug }}" class="centered-page grid grid-site gap-y-6 scroll-mt-16">
        <h2 class="col-span-full text-center type-sans-md uppercase">
          {{ cohort.title }}
        </h2>

        <div class="col-span-full">
          {% include 'components/person-grid.twig' with { people: cohort.profiles } %}
        </div>
      </section>
    {% endfor %}
  </div>

  {% include 'components/big-cta-row.twig' with { ctas: page.ctas } %}

{% endblock %}