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

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

{% block pageBody %}

<h1 class="sr-only">Mozilla Builders</h1>

<div class="flex flex-col flex-1 gap-y-20 xl:gap-y-28">
  {% if topper.featured_article_count == 'six' %}
    {% include 'components/front-page/large-tease-jumble.twig' with { posts: featured_posts } %}
  {% elseif topper.featured_article_count == 'four' %}
    {% include 'components/front-page/small-tease-jumble.twig' with { posts: featured_posts, home_top: true } %}
  {% elseif topper.featured_article_count == 'one' %}
    {% include 'components/front-page/single-tease-topper.twig' with { posts: featured_posts } %}
  {% endif %}

  {% include 'components/front-page/builders.twig' %}

  {% include 'components/front-page/small-tease-jumble.twig' with { posts: secondary_posts } %}

  {% include 'components/front-page/projects-tease.twig' with { projects: featured_projects } %}

  <section>
    <div class="centered-page px-grid-site-margin">
      <h2 class="type-sans-2xl uppercase">Latest</h2>
    </div>

    {% include 'components/tease-list.twig' with { posts: latest_posts } %}

    <div class="centered-page px-grid-site-margin">
      <div class="full mt-4">
        {% set label = topper.cta_label ?: 'Explore content' %}
        {% include 'components/button-link.twig' with { href: archive_links.posts, label: label } %}
      </div>
    </div>
  </section>
</div>

{% endblock %}