e-cosplay/templates/about.twig

{% extends 'base.twig' %}

{% block title %}{{'about_title'|trans}}{% endblock %}
{% block meta_description %}{{'about_description'|trans}}{% endblock %}

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

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{'home_title'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
          },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{'about_title'|trans}}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
          }
        ]
      }
    </script>
    {# Les schémas d'images restent identiques pour le SEO #}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "ImageObject",
            "contentUrl": "{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}",
            "license": "https://www.instagram.com/dystopix_photography/",
            "acquireLicensePage": "https://www.instagram.com/dystopix_photography/",
            "creditText": "dystopix_photography",
            "creator": { "@type": "Person", "name": "dystopix_photography" },
            "copyrightNotice": "dystopix_photography"
        }
    </script>
{% endblock %}

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

        {# --- HEADER HERO --- #}
        <header class="relative pt-20 pb-24 px-4 overflow-hidden border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-9xl font-black italic uppercase tracking-tighter leading-[0.8] mb-6">
                    {{'about_title'|trans}}
                    <span class="block text-indigo-600 outline-text mt-4">{{ 'brand_name'|trans }}</span>
                </h1>
                <div class="h-4 w-64 bg-yellow-500 skew-x-[-20deg] mt-8 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
            </div>
            {# Filigrane de fond #}
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none -mr-20 hidden lg:block">
                <span class="text-[25rem] font-black italic uppercase leading-none">PASSION</span>
            </div>
        </header>

        {# --- SECTION PASSION --- #}
        <section class="max-w-6xl mx-auto px-4 -mt-12 relative z-20 mb-32">
            <div class="bg-white border-4 border-gray-900 p-8 md:p-16 shadow-[16px_16px_0px_#4f46e5]">
                <h2 class="text-4xl font-black uppercase italic mb-8 flex items-center gap-4">
                    <span class="bg-indigo-600 text-white px-4 py-1 skew-x-[-15deg]">#01</span>
                    {{'about_section_passion_title'|trans}}
                </h2>
                <div class="text-xl md:text-2xl font-bold leading-relaxed italic text-gray-800 space-y-8">
                    <p>
                        {{ 'about_passion_p1'|trans({
                            '%association%': '<span class="text-indigo-600 underline decoration-yellow-500 decoration-8 underline-offset-4">' ~ 'about_passion_association_details'|trans ~ '</span>',
                            '%mission%': '<span class="text-indigo-600 italic">' ~ 'about_passion_mission_details'|trans ~ '</span>'
                        })|raw }}
                    </p>
                    <div class="border-l-[12px] border-yellow-500 pl-8 bg-gray-50 py-8 shadow-inner">
                        <p>
                            {{ 'about_passion_p2'|trans({
                                '%fait_main%': '<span class="uppercase font-black text-indigo-900">' ~ 'about_passion_costume_handmade'|trans ~ '</span>',
                                '%egalite%': '<span class="bg-indigo-900 text-white px-3 py-1 skew-x-[-5deg]">' ~ 'about_passion_equality'|trans ~ '</span>'
                            })|raw }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {# --- LES FONDATEURS (CHARACTER SELECT STYLE) --- #}
        <section class="mb-40">
            <div class="max-w-7xl mx-auto px-4 mb-16 text-center">
                <h2 class="text-6xl md:text-8xl font-black uppercase italic tracking-tighter text-gray-900">
                    {{'about_founders_title'|trans}}
                </h2>
            </div>

            {# Desktop View #}
            <div class="hidden lg:flex h-[85vh] w-full border-y-8 border-gray-900 group">
                {# Shoko #}
                <div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden border-r-4 border-gray-900 group/card">
                    <img src="{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}" alt="ShokoCosplay" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>

                    <div class="absolute bottom-12 left-12 text-white italic z-10">
                        <div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_01</div>
                        <h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">ShokoCosplay</h3>
                        <p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_shoko_role_short'|trans}}</p>
                        <div class="flex gap-4">
                            <a href="https://www.instagram.com/cosplay_shoko/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
                            <a href="https://www.tiktok.com/@cosshoko" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-tiktok fa-lg"></i></a>
                        </div>
                    </div>
                </div>

                {# Marta #}
                <div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden group/card">
                    <img src="{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}" alt="Marta Gator" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>

                    <div class="absolute bottom-12 right-12 text-white italic z-10 text-right">
                        <div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_02</div>
                        <h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">Marta Gator</h3>
                        <p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_marta_role_short'|trans}}</p>
                        <div class="flex gap-4 justify-end">
                            <a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-facebook fa-lg"></i></a>
                            <a href="https://www.instagram.com/marta_gator/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            {# Mobile View Cards #}
            <div class="lg:hidden px-4 space-y-12">
                {% for founder in [
                    {name: 'ShokoCosplay', role: 'about_founder_shoko_role', img: 'shoko.jpg', color: 'indigo-600'},
                    {name: 'Marta Gator', role: 'about_founder_marta_role', img: 'marta.jpg', color: 'yellow-500'}
                ] %}
                    <div class="border-4 border-gray-900 bg-white overflow-hidden shadow-[8px_8px_0px_rgba(0,0,0,1)] italic">
                        <div class="h-64 bg-gray-200 overflow-hidden border-b-4 border-gray-900">
                            <img src="{{ asset('assets/images/' ~ founder.img) | imagine_filter('webp') }}" class="w-full h-full object-cover">
                        </div>
                        <div class="p-6">
                            <h3 class="text-3xl font-black uppercase italic">{{ founder.name }}</h3>
                            <p class="text-{{ founder.color }} font-black uppercase mb-4">{{ founder.role|trans }}</p>
                            <div class="flex gap-4">
                                <div class="bg-gray-900 text-white px-4 py-2 text-sm font-black uppercase italic">Social Links</div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>

        {# --- OBJECTIFS (NEUBRUTALIST GRID) --- #}
        <section class="max-w-7xl mx-auto px-4 mb-40">
            <h2 class="text-5xl font-black uppercase italic mb-16 tracking-tighter inline-block border-b-8 border-yellow-500">
                {{'about_goals_title'|trans}}
            </h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                {% set goals = [
                    {'icon': '🎨', 'title': 'about_goal1_title', 'text': 'about_goal1_text', 'color': 'bg-indigo-600'},
                    {'icon': '🤝', 'title': 'about_goal2_title', 'text': 'about_goal2_text', 'color': 'bg-yellow-500'},
                    {'icon': '🎭', 'title': 'about_goal3_title', 'text': 'about_goal3_text', 'color': 'bg-indigo-600'},
                    {'icon': '❤️‍🔥', 'title': 'about_goal4_title', 'text': 'about_goal4_text', 'color': 'bg-red-600'}
                ] %}
                {% for goal in goals %}
                    <div class="group bg-white border-4 border-gray-900 p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 italic">
                        <div class="{{ goal.color }} text-white w-16 h-16 flex items-center justify-center text-3xl border-4 border-gray-900 mb-6 shadow-md group-hover:rotate-12 transition-transform">
                            {{ goal.icon }}
                        </div>
                        <h3 class="text-2xl font-black uppercase mb-4 tracking-tighter">{{ goal.title|trans }}</h3>
                        <p class="text-gray-600 font-bold leading-relaxed">
                            {% if loop.last %}
                                {{ 'about_goal4_text'|trans({
                                    '%ouverte%': '<span class="text-red-600">' ~ 'about_goal4_open_details'|trans ~ '</span>',
                                    '%friendly%': '<span class="text-red-600">' ~ 'about_goal4_friendly_details'|trans ~ '</span>'
                                })|raw }}
                            {% else %}
                                {{ goal.text|trans }}
                            {% endif %}
                        </p>
                    </div>
                {% endfor %}
            </div>
        </section>

        {# --- TIMELINE (STREET / BRUTALIST STYLE) --- #}
        <section class="bg-gray-900 text-white py-32 border-y-8 border-indigo-600 overflow-hidden relative">
            <div class="max-w-5xl mx-auto px-4 relative z-10">
                <h2 class="text-6xl md:text-8xl font-black uppercase italic mb-24 tracking-tighter text-yellow-500 outline-text-yellow text-center">
                    {{'timeline_title'|trans}}
                </h2>

                <div class="relative">
                    {# Ligne centrale Esport #}
                    <div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-2 bg-indigo-600 -translate-x-1/2 hidden md:block opacity-50"></div>

                    <div class="space-y-24">
                        {% set events = [
                            {'date': 'event_creation_date', 'title': 'event_creation_text_title', 'text': 'event_creation_text', 'pos': 'left'},
                            {'date': 'event_partnership_date', 'title': 'event_partnership_text_title', 'text': 'event_partnership_text', 'pos': 'right'},
                            {'date': 'event_first_show_date', 'title': 'event_first_show_title', 'text': 'event_first_show_text', 'pos': 'left'},
                            {'date': 'event_miss_tergnier_date', 'title': 'event_miss_tergnier_title', 'text': 'event_miss_tergnier_text', 'pos': 'right'},
                            {'date': 'event_website_launch_date', 'title': 'event_website_launch_title', 'text': 'event_website_launch_text', 'pos': 'left'}
                        ] %}

                        {% for event in events %}
                            <div class="relative flex flex-col md:flex-row items-center group">
                                <div class="flex-1 w-full md:{{ event.pos == 'left' ? 'text-right pr-16' : 'order-last text-left pl-16' }}">
                                    <div class="bg-indigo-600 text-white inline-block px-6 py-2 font-black italic text-2xl skew-x-[-15deg] mb-6 shadow-[4px_4px_0px_#eab308]">
                                        {{ event.date|trans }}
                                    </div>
                                    <div class="bg-white text-gray-900 border-4 border-yellow-500 p-8 shadow-[8px_8px_0px_rgba(255,255,255,0.1)] italic group-hover:scale-105 transition-transform">
                                        <h3 class="text-2xl font-black uppercase mb-2 text-indigo-600">{{ event.title|trans }}</h3>
                                        <p class="font-bold text-sm leading-relaxed">{{ event.text|trans }}</p>
                                    </div>
                                </div>
                                <div class="w-10 h-10 bg-yellow-500 border-4 border-gray-900 rotate-45 z-10 hidden md:block"></div>
                                <div class="flex-1 hidden md:block"></div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {# Texture technique de fond #}
            <div class="absolute inset-0 opacity-[0.05] pointer-events-none" style="background-image: url('data:image/svg+xml,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 0h20L0 20z\" fill=\"%23ffffff\" fill-opacity=\"1\" fill-rule=\"evenodd\"/%3E%3C/svg%3E');"></div>
        </section>

        {# --- ACTIVITÉS (RANKING STYLE) --- #}
        <section class="py-40 max-w-6xl mx-auto px-4">
            <h2 class="text-5xl font-black uppercase italic mb-20 tracking-tighter inline-block border-l-8 border-indigo-600 pl-6">
                {{'about_activities_title'|trans}}
            </h2>

            <div class="grid gap-12">
                {% for activity in [
                    {'icon': '🏆', 'title': 'about_activity1_title', 'text': 'about_activity1_text', 'tags': ['%concours%', '%ouverts%', '%craftsmanship%', '%acting%']},
                    {'icon': '🛠️', 'title': 'about_activity2_title', 'text': 'about_activity2_text', 'tags': ['%ateliers%']},
                    {'icon': '🩹', 'title': 'about_activity3_title', 'text': 'about_activity3_text', 'tags': ['%coshopital%', '%reparation%']}
                ] %}
                    <div class="flex flex-col md:flex-row gap-10 items-center p-8 border-4 border-gray-900 bg-white hover:bg-gray-50 transition-colors shadow-[8px_8px_0px_rgba(0,0,0,1)]">
                        <span class="text-7xl group-hover:scale-110 transition-transform">{{ activity.icon }}</span>
                        <div>
                            <h3 class="text-4xl font-black uppercase italic mb-4 tracking-tighter text-indigo-700">{{ activity.title|trans }}</h3>
                            <p class="text-lg font-bold italic leading-relaxed text-gray-700">
                                {% set text = activity.text|trans %}
                                {% for tag in activity.tags %}
                                    {% set tag_val = tag|replace({'%': ''}) ~ '_detail' %}
                                    {% set text = text|replace({ (tag): '<span class="bg-yellow-200 px-1 border-b-2 border-yellow-500">' ~ (tag|replace({'%': ''})|trans) ~ '</span>' }) %}
                                {% endfor %}
                                {{ text|raw }}
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>

        {# --- FINAL CALL TO ACTION --- #}
        <footer class="bg-indigo-600 py-32 border-t-8 border-gray-900 relative overflow-hidden">
            <div class="max-w-4xl mx-auto text-center px-4 relative z-10">
                <h2 class="text-4xl md:text-6xl font-black uppercase italic mb-12 text-white tracking-tighter leading-none">
                    {{'about_call_to_action_text'|trans}}
                </h2>
                <a href="{{ path('app_events') }}" class="group relative inline-block">
                    <div class="absolute inset-0 bg-gray-900 translate-x-3 translate-y-3 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
                    <div class="relative bg-yellow-500 text-gray-900 px-16 py-8 font-black uppercase italic tracking-widest text-3xl border-4 border-gray-900">
                        {{'about_call_to_action_button'|trans}}
                    </div>
                </a>
            </div>
            {# Watermark #}
            <div class="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
                <span class="text-[20rem] font-black italic uppercase text-indigo-900 tracking-tighter">JOIN</span>
            </div>
        </footer>

    </div>

    <style>
        .outline-text {
            -webkit-text-stroke: 2px #4f46e5;
            color: transparent;
        }
        .outline-text-yellow {
            -webkit-text-stroke: 2px #eab308;
            color: transparent;
        }
        @media (min-width: 1024px) {
            .group:hover .relative:not(:hover) {
                flex: 0.7;
                filter: grayscale(100%) brightness(0.4);
            }
            .group .relative:hover {
                flex: 1.3;
            }
        }
    </style>
{% endblock %}