e-cosplay/templates/members.twig

{% extends 'base.twig' %}

{% block title %}{{'members_page.title'|trans}}{% endblock %}
{% block meta_description %}{{'members_description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_members') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ 'breadcrumb.home'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{'members_page.breadcrumb'|trans}}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 overflow-x-hidden">

        {# --- HEADER --- #}
        <header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'members_page.title'|trans }}
                </h1>
                <div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
            </div>
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
                <span class="text-[20rem] font-black italic uppercase leading-none">ROSTER</span>
            </div>
        </header>

        <div class="container mx-auto px-4 py-16">

            {# --- SECTION 1 : Membres du Bureau (ESPORT BOARD) --- #}
            <section class="mb-24">
                <div class="inline-block bg-gray-900 text-yellow-500 px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-indigo-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-2xl">
                    // {{ 'members_page.board_title'|trans }}
                </span>
                </div>

                {% if board_members is defined and board_members|length > 0 %}
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                        {% for member in board_members %}
                            {# CARTE MEMBRE BUREAU #}
                            <div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[12px_12px_0px_#4f46e5] hover:shadow-[16px_16px_0px_#eab308] hover:-translate-y-2 transition-all duration-300 italic">

                                {# Photo Style Avatar Esport #}
                                <div class="relative w-32 h-32 mx-auto mb-6">
                                    <div class="absolute inset-0 bg-indigo-600 rotate-45 group-hover:rotate-90 transition-transform duration-500"></div>
                                    <img src="{{ member.photo_url | imagine_filter('members') }}" alt="{{ member.pseudo }}" class="relative w-full h-full object-cover border-4 border-gray-900 z-10">
                                </div>

                                <div class="text-center mb-6">
                                    <h3 class="text-3xl font-black uppercase tracking-tighter text-gray-900 leading-none mb-2">{{ member.pseudo }}</h3>
                                    <span class="bg-gray-900 text-white px-3 py-1 text-xs font-black uppercase tracking-widest italic border-b-2 border-indigo-500">
                                    {{ member.role|default('-')|trans }}
                                </span>
                                </div>

                                {# Stats / Info #}
                                <div class="space-y-4 border-t-2 border-gray-100 pt-6">
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs font-black uppercase text-gray-500 italic">{{ 'member_card.cosplay_label'|trans }}</span>
                                        {% if member.cosplayer %}
                                            <span class="bg-green-500 text-white px-3 py-1 text-[10px] font-black uppercase italic border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">{{ 'member_card.yes'|trans }}</span>
                                        {% else %}
                                            <span class="bg-gray-200 text-gray-600 px-3 py-1 text-[10px] font-black uppercase italic border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">{{ 'member_card.no'|trans }}</span>
                                        {% endif %}
                                    </div>

                                    <div class="space-y-2">
                                        <span class="text-[10px] font-black uppercase text-gray-400 block tracking-widest">{{ 'member_card.specifics'|trans }}</span>
                                        <div class="flex flex-wrap gap-2">
                                            {% if member.crosscosplayer %}
                                                <span class="bg-indigo-100 text-indigo-800 px-2 py-0.5 text-[10px] font-black uppercase italic border border-indigo-200">{{ 'member_card.crosscosplay'|trans }}</span>
                                            {% endif %}
                                            {% if member.trans %}
                                                <span class="bg-pink-100 text-pink-800 px-2 py-0.5 text-[10px] font-black uppercase italic border border-pink-200">{{ 'member_card.trans'|trans }}</span>
                                            {% endif %}

                                            {% set orientation_key = member.orientation ? 'orientation.' ~ member.orientation : null %}
                                            <span class="bg-gray-100 text-gray-700 px-2 py-0.5 text-[10px] font-black uppercase italic border border-gray-300">
                                            {{ orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans }}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="bg-white border-4 border-dashed border-gray-300 p-12 text-center italic font-bold text-gray-400">
                        {{ 'members_page.board_empty'|trans }}
                    </div>
                {% endif %}
            </section>

            {# --- SECTION 2 : Tous les autres Membres --- #}
            <section>
                <div class="inline-block bg-indigo-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-xl">
                    // {{ 'members_page.all_title'|trans }}
                </span>
                </div>

                {% if members is defined and members|length > 0 %}
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        {% for member in members %}
                            {# CARTE MEMBRE STANDARD #}
                            <div class="bg-white border-2 border-gray-900 p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[6px_6px_0px_#4f46e5] transition-all italic">
                                <div class="flex items-center gap-4 mb-4">
                                    <img src="{{ member.photo_url | imagine_filter('members') }}" class="w-16 h-16 object-cover border-2 border-gray-900 grayscale hover:grayscale-0 transition-all">
                                    <div>
                                        <h3 class="text-xl font-black uppercase tracking-tighter leading-none">{{ member.pseudo }}</h3>
                                        <p class="text-[10px] font-bold text-indigo-600 uppercase mt-1">{{ member.role|default('-')|trans }}</p>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-1 mt-4 border-t pt-4">
                                    {% if member.cosplayer %}
                                        <span class="bg-green-100 text-green-800 px-2 py-0.5 text-[8px] font-black uppercase border border-green-200">COSPLAYER</span>
                                    {% endif %}
                                    {% if member.crosscosplayer %}
                                        <span class="bg-indigo-50 text-indigo-600 px-2 py-0.5 text-[8px] font-black uppercase border border-indigo-100">CROSS</span>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="bg-white border-2 border-dashed border-gray-300 p-8 text-center italic font-bold text-gray-400">
                        {{ 'members_page.all_empty'|trans }}
                    </div>
                {% endif %}
            </section>

        </div>

        {# --- CTA BAS DE PAGE --- #}
        <div class="mt-32 border-t-4 border-gray-900 bg-yellow-500 py-12 text-center">
            <p class="text-2xl font-black uppercase italic tracking-tighter mb-4">Envie de rejoindre le roster ?</p>
            <a href="{{ path('app_recruit') }}" class="inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
                {{ 'home_cta.button'|trans }}
            </a>
            <a href="{{ path('app_contact') }}" class="inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
                {{ 'home_cta.contact'|trans }}
            </a>
        </div>

    </div>
{% endblock %}