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

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

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

{% block pageBody %}

{% include 'components/accelerator/topper.twig' %}

<div x-tabs="{ default: 'overview', initial: '{{ initial_tab }}' }">
  <div class="my-4 sticky top-4 md:top-wp-admin-bar md:pt-4 centered-page px-grid-site-margin flex max-xl:flex-col items-center z-50">
    <div
      x-tabs:list.automatic.loop
      class="bg-main flex flex-col md:grid md:grid-cols-3 max-xl:w-full border border-content max-md:divide-y md:divide-x divide-content">
      <button
        x-tabs:tab="overview"
        {% if initial_tab == 'overview' %}data-state="active"{% endif %}
        class="flex-1 py-1 px-16 text-xs leading-3 transition-colors hocus:bg-action hocus:text-action-reverse data-active:bg-content data-active:text-content-reverse">
        <span class="uppercase text-xs leading-3 tracking-wide text-center whitespace-nowrap">{{ page.overview_title ?: 'Overview' }}</span>
      </button>

      <button
        x-tabs:tab="cohorts"
        {% if initial_tab == 'cohorts' %}data-state="active"{% endif %}
        class="bg-main flex-1 py-1 px-16 text-xs leading-3 transition-colors hocus:bg-action hocus:text-action-reverse data-active:bg-content data-active:text-content-reverse">
        <span class="uppercase text-center text-xs leading-3 tracking-wide whitespace-nowrap">{{ page.cohorts.cohort_title ?: 'Cohorts' }}</span>
      </button>

      <button
        x-tabs:tab="faqs"
        {% if initial_tab == 'faqs' %}data-state="active"{% endif %}
        class="bg-main flex-1 py-1 px-16 text-xs leading-3 transition-colors hocus:bg-action hocus:text-action-reverse data-active:bg-content data-active:text-content-reverse">
        <span class="uppercase text-center text-xs leading-3 tracking-wide whitespace-nowrap">{{ page.faq_title ?: 'FAQs' }}</span>
      </button>
    </div>

    {% if page.ctas|length %}
    <div class="xl:flex-1 xl:h-px bg-content"></div>

    <div class="flex flex-col md:grid md:grid-cols-2 max-xl:w-full border border-content max-md:divide-y md:divide-x divide-content max-xl:-mt-px">
      {% for cta in page.ctas %}
        {% if cta.link_type == "post_archive" %}
          {% set label = 'Content' %}
        {% elseif cta.link_type == "project_archive" %}
          {% set label = 'Projects' %}
        {% elseif cta.link_type == "people_archive" %}
          {% set label = 'People' %}
        {% elseif cta.link_type == "discord" %}
          {% set label = 'Discord' %}
        {% else %}
          {% set label = cta.custom_link.title %}
        {% endif %}

        <a href="#ctas" class="bg-main flex-1 py-1 px-16 transition-colors hocus:bg-action hocus:text-action-reverse data-active:bg-content data-active:text-content-reverse">
          <p class="uppercase text-center text-xs leading-3 tracking-wide whitespace-nowrap">
            {{ label }}
          </p>
        </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <div x-tabs:panel="overview" {% if initial_tab != 'overview' %}style="display:none"{% endif %}>
    <div class="mt-16 centered-page grid grid-site">
      <h2 class="sr-only">Overview</h2>

      {% for layout in page.overview_content %}
        {% if layout.acf_fc_layout == 'timeline' %}
          <h3 class="col-span-full md:col-span-8 mt-16 md:mt-24 type-sans-lg uppercase">
            Key Dates
          </h3>
          <div class="col-span-full my-4">
            {% include 'components/timeline.twig' with { items: layout.key_dates } %}
          </div>
        {% elseif layout.acf_fc_layout == 'heading_and_text' %}
          {% if loop.index0 > 0 %}
            <hr class="col-span-full mt-16 md:mt-24 mb-8" />
            <div class="col-span-full md:grid md:grid-cols-24 gap-x-grid-site-gutter">
          {% elseif loop.first %}
            <div class="col-span-full md:mt-8 md:grid md:grid-cols-24 gap-x-grid-site-gutter">
          {% else %}
            <div class="col-span-full mt-16 md:grid md:grid-cols-24 gap-x-grid-site-gutter">
          {% endif %}
            {% if layout.heading %}
              <h3 class="col-span-full md:col-span-8 type-sans-lg uppercase">{{ layout.heading }}</h3>
            {% endif %}
            <div class="col-span-full max-md:mt-8 md:col-start-13 md:col-span-10 lg:col-start-15 lg:col-span-8 prose">
              {{ layout.text_content }}
            </div>
          </div>
        {% elseif layout.acf_fc_layout == 'big_heading' %}
          <div class="col-span-full md:col-start-6 md:col-span-19 mt-16 md:mt-24">
            <p class="type-headline-xl indent-8 md:indent-[calc(0.1*var(--100vw))]">
              {{ layout.heading_text }}
            </p>
          </div>
        {% elseif layout.acf_fc_layout == 'big_quote' %}
          <div class="col-span-full mt-16">
            {% include 'components/big-quote.twig' with { quote: layout } %}
          </div>
        {% elseif layout.acf_fc_layout == 'video' %}
          <div class="col-span-full mt-16 md:col-start-end md:col-span-14 lg:col-span-1/2 mb-8">
            <div class="w-full aspect-video bg-content/10 [&_iframe]:w-full [&_iframe]:h-full">
              {{ layout.theme_video }}
            </div>
          </div>
        {% endif %}
      {% endfor %}

    </div>
  </div>

  <div x-tabs:panel="cohorts" {% if initial_tab != 'cohorts' %}style="display:none"{% endif %}>
    <div class="mt-16 centered-page grid grid-site">
      <h2 class="sr-only">Cohorts</h2>

      {% if page.cohorts.cohort_heading %}
        <h3 class="col-span-full md:col-span-8 type-sans-lg uppercase">
          {{ page.cohorts.cohort_heading }}
        </h3>
      {% endif %}

      <div class="col-span-full max-md:mt-8 md:col-start-13 md:col-span-10 lg:col-start-15 lg:col-span-8 prose">
        {{ page.cohorts.cohort_description }}
      </div>

      {% for cohort in cohorts %}
        <div class="col-span-full mt-16 md:mt-24 mb-8">
          <div class="border border-content p-1">
            <h4 class="uppercase text-xs leading-3 tracking-wide text-center">
              {{ cohort.title }}
            </h4>
          </div>
        </div>

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

  <div x-tabs:panel="faqs" {% if initial_tab != 'faqs' %}style="display:none"{% endif %}>
    <div class="mt-16 centered-page grid grid-site">
      <h2 class="sr-only">FAQs</h2>

      {% for section in page.faqs %}
        <h3 class="col-span-full md:col-span-8 type-sans-lg uppercase">
          {{ section.heading }}
        </h3>

        <div class="col-span-full max-md:mt-8 md:col-start-13 md:col-span-10 lg:col-start-15 lg:col-span-8 prose">
          {% for group in section.groups %}
            <h4 class="type-sans-sm !normal-case">
              {{ group.question }}
            </h4>

            {{ group.answer }}
          {% endfor %}
        </div>

        {% if not loop.last %}
          <hr class="col-span-full mt-16 md:mt-24 mb-8" />
        {% endif %}
      {% endfor %}
    </div>
  </div>



  {% if page.ctas|length %}
    <div id="ctas" class="scroll-mt-24 md:scroll-mt-16 mt-16 md:mt-24">
      {% include 'components/big-cta-row.twig' with { ctas: page.ctas } %}
    </div>
  {% endif %}

</div>

{% endblock %}