{% extends "base.njk" %}

{% block scripts %}
  <script src="/assets/js/anime.min.js"></script>
  <script src="/assets/js/hero.js" type="module"></script>
{% endblock %}

{% block header %}
  <header class="site-header">
    <p class="site-title sr-only">HTML e Pessoas</p>

    <a href="#main-content" class="skip-link">Pular para o conteúdo</a>

    <div class="hero">{% include "../assets/img/design/hero.svg" %}</div>
    <div class="hero-mobile">
      {% include "../assets/img/design/hero-mobile.svg" %}
    </div>

    <div class="container mt-lg">{% include "partials/menu.njk" %}</div>
  </header>
{% endblock %}

{% block content %}
  {{ content | safe }}

  <p class="home-buttons mt-lg" style="margin-bottom: var(--size-10);">
    <a href="/introducao" class="button">Ler a introdução</a>
    <a href="/do-zero-a-internet-seu-primeiro-site" class="button"
      >Quero começar já!</a
    >
  </p>
{% endblock %}