{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
    <div class="uk-flex uk-flex-middle top-wrap-height">
        <div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
            <div class="uk-grid" data-uk-grid="masonry: true">
                <div class="uk-width-1-2@s"
                     data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
                    <h1 class="uk-margin-remove-bottom uk-text-bold">GnousEU</h1>
                    <p class="uk-margin-remove-bottom subtitle-text uk-text-bold">{% trans "Communauté francophone de passionnés du libre depuis 2017." %}</p>
                </div>
                <div data-uk-scrollspy="cls: uk-animation-fade" class="uk-width-expand">
                    <img
                         src="{% static 'images/illustrations/services.svg' %}"
                          alt="Image">
                </div>

                <div class="uk-width-1-2@s">
                    <a class="uk-button uk-margin-small-left" href="{% url 'gnous_eu:services' %}">{% trans "Nos services" %}</a>
                    <a class="uk-button uk-margin-small-right" href="{% url 'gnous_eu:about' %}">{% trans "À propos" %}</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}