{% extends "base.html" %}
{% load static %}

{% block extra_head %}
  <meta name="description" content="Bénévalibre - Le logiciel libre qui facilite la gestion et la valorisation du bénévolat dans les associations.">
{% endblock %}

{% block css %}
  {{ block.super }}

  <style>
    :root {
      --welcome-image:
        url("{% static "img/hand_top-left.png" %}"),
        url("{% static "img/hand_top-right.png" %}"),
        url("{% static "img/hand_bottom-right.png" %}"),
        url("{% static "img/hand_bottom-left.png" %}");
      --welcome-position: left 5%, 95% top, right 95%, left 101%;
    }
  </style>
{% endblock %}

{% block body_content %}
  <div class="flex flex-col h-dvh items-center justify-center text-white bg-primary bg-no-repeat bg-(image:--welcome-image) bg-(position:--welcome-position) bg-[auto_30%] portrait:bg-auto landscape:lg:bg-auto">
    <header class="absolute top-4 right-4">
      <a href="{% url "account:login" %}" class="button">Se connecter</a>
    </header>

    <main class="max-w-screen-sm p-8 text-center">
      <img src="{% static "img/logo_welcome.svg" %}" alt="Bénévalibre" class="mx-auto mb-2 md:mb-4">
      <p class="mb-4 md:mb-6 md:text-xl">Le logiciel libre qui facilite la gestion et la valorisation du bénévolat dans les associations.</p>
      <a href="{% url "associations:index" %}" class="button-lg bg-gray-100 text-black button hover:bg-gray-200">Voir les associations</a>
    </main>
  </div>
{% endblock %}