{% from "lib/section.html" import section %}

{% macro comrade(name, title, alt, avatar) %}
  <div class="comrade">
    <img class="comrade--picture" src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
    <h4 aria-hidden="True">{{ name }}</h4>
  </div>
{% endmacro %}

{% call section(
  gettext("Frog Collective"),
  "collective",
  "/img/section-collective.png",
  title_picture_hover = "/img/section-collective-hover.png",
  title_picture_active = "/img/section-collective-active.png",
  title_picture_offset = "170px"
  ) %}
<div class="presentation--content">
  <p>
    {% trans %}
      We are Frog Collective, a very small indie game development company with years of experience under our belts. 
      We've decided to team up to make games together, driven by our passion.
    {% endtrans %}
  </p>
  <p>
    {% trans %}
      We're not the typical gaming behemoth with a massive team and towering office buildings. 
      Nope, we're just two passionate souls huddled around a couple of computers. 
      We want to create bite-sized adventures that anyone can pick up and play, yet remain challenging for those who wish to explore every corner.
    {% endtrans %}
  </p>
  <p>
    {% trans %}
      So, if you're tired of the same old cookie-cutter games and fancy a little dose of indie charm, strap in and join us on this wild ride!
    {% endtrans %}
  </p>
  <p>
    {% trans %}
      Let's have some fun!
    {% endtrans %}
  </p>
  <h2 class="comrades--title">{{ gettext("The team") }}</h2>
  <div class="comrades">
    {{ comrade(
        "Aurel",
        gettext('Aurel works on art'),
        gettext("drawing of Aurel's face"),
        "/img/aurel.png"
    ) }}
    {{ comrade(
      "Adrien",
      gettext('Adrien works on programming'),
      gettext("drawing of Adrien's face"),
      "/img/adrien.png"
    ) }}
  </div>
</div>
{% endcall %}