{% extends "base.html" %} {# # # # # # # # # # # # # # # # # # # # # # # # # #}
{%- import "statcard.html" as statcard -%} {# # # # # # # # # # # # # # # # # #}
{% block title %}gractwo.pl | Witamy!{% endblock %} {% block pagecontent %}

<div
    class="bg-gractwo-index-light flex flex-col items-center text-center w-full h-full flex-1"
>
    <div class="mt-16 md:mt-56 mx-auto [&>svg]:size-24">
        {% include "gractwo.svg" %}
    </div>
    <h1
        class="text-7xl font-semibold bg-gradient-to-r from-gractwo-red-semidark to-gractwo-blu-semidark from-30% to-70% text-transparent bg-clip-text"
    >
        Gractwo
    </h1>
    <p
        class="text-xl font-light mt-8 text-neutral-600 text-balance max-w-[50ch]"
    >
        Zakładamy okołogrowe, anime-informatyzacyjno konwentowo-hangoutowe
        stowarzyszenie. Dołącz do nas!
    </p>
    <div class="flex flex-row gap-4 mt-8">
        <a
            href="/discord"
            class="flex gap-4 px-4 py-3 rounded text-neutral-100 hover:text-white font-semibold bg-gradient-to-r from-gractwo-red-semidark to-gractwo-red [text-rendering:geometricPrecision] hover:scale-[1.02] hover:-translate-y-[2px] hover:shadow-lg transition-all"
        >
            <span class="scale-[.75]">{% include "icons/users.svg" %}</span>
            <span>Dołącz na serwer Discord</span>
            <span class="scale-[.75]"
                >{% include "icons/external-link.svg" %}</span
            >
        </a>
    </div>
    <div class="flex flex-col sm:flex-row gap-2 mt-4 text-neutral-500">
        <a
            href="/github"
            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
            ><span class="scale-[.75]">{% include "icons/github.svg" %}</span>
            GitHub</a
        >
        <a
            href="/bsky"
            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
            ><span class="scale-[.75]">{% include "icons/twitter.svg" %}</span>
            Bluesky</a
        >
        <a
            href="/youtube"
            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
            ><span class="scale-[.75]">{% include "icons/youtube.svg" %}</span>
            YouTube</a
        >
    </div>
    <div class="my-16 flex flex-col sm:flex-row gap-4">
        {%call statcard::statcard(dsc_members, "członków na discordzie")%}
        {%call statcard::statcard(days_community, "dni istnienia
        społeczności")%}
        <!--{% call statcard::statcard("0", "dni od powstania stowarzyszenia") %}-->
    </div>
</div>

{% include "footer.html" %} {% endblock %}