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>
    <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"
        },
        {
            "@context": "https://schema.org/",
            "@type": "ImageObject",
            "contentUrl": "{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}",
            "license": "https://example.com/license",
            "acquireLicensePage": "https://example.com/how-to-use-my-images",
            "creditText": "https://www.instagram.com/marta_gator/",
            "creator": {
                "@type": "Person",
                "name": "Marta Gator"
            },
            "copyrightNotice": "https://www.instagram.com/marta_gator/"
        }
    </script>
{% endblock %}

{% block body %}
    <style>
        /* Conteneur parent en position relative pour l'empilement (absolute) des enfants */
        .display {
            position: relative;
            overflow: hidden;
            height: 75vh;
        }

        /* Les deux images sont superposées et prennent 100% du parent */
        .display1, .display2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;

            /* Styles pour les images (N&B par défaut, couleur au survol) */
            filter: grayscale(100%);
            transition: filter 0.7s ease-in-out;
            cursor: pointer;

            z-index: 1;
        }

        /* L'image 1 (gauche) est coupée avec une légère inclinaison */
        .display1 {
            clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
            background-position-x: -10vw;
            background-position-y: -175px;
        }

        /* L'image 2 (droite) est coupée avec la diagonale inverse */
        .display2 {
            clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
            background-position-x: 20vw;
            background-position-y: -40px;
        }

        /* Activation de la couleur au survol sur l'un ou l'autre élément */
        .display1:hover, .display2:hover {
            filter: grayscale(0%);
        }

        /* Style spécifique pour le conteneur du texte */
        .image-text-overlay {
            position: absolute;
            color: white;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.25;
            max-width: 80%;
            z-index: 10;
        }

        /* Positionnement pour le texte de gauche (display1) */
        .image-text-overlay.left {
            bottom: 1rem;
            left: 1rem;
        }

        /* Positionnement pour le texte de droite (display2) */
        .image-text-overlay.right {
            bottom: 1rem;
            right: 1rem;
            text-align: right;
        }

        /* Style pour les icônes de réseaux sociaux */
        .social-icons {
            display: flex; /* Permet d'aligner les icônes */
            margin-top: 0.5rem;
        }

        /* Aligner les icônes à gauche/droite selon le conteneur */
        .image-text-overlay.left .social-icons,
        .founders-card .social-icons.left {
            justify-content: flex-start;
        }

        .image-text-overlay.right .social-icons,
        .founders-card .social-icons.right {
            justify-content: flex-end;
        }

        /* Style des liens dans les cartes fondateurs */
        .founders-card .social-icons a {
            color: #1e40af; /* Bleu foncé pour les cartes */
        }
        .founders-card .social-icons.right a {
            margin-left: 0.5rem;
            margin-right: 0;
        }

        /* Styles génériques pour les liens d'icônes */
        .social-icons a {
            margin-right: 0.5rem;
            color: inherit;
            transition: color 0.2s ease-in-out;
            text-decoration: none;
        }

        .social-icons a:last-child {
            margin-right: 0;
        }
        .social-icons a:hover {
            color: #4299e1; /* Bleu clair au survol */
        }
    </style>

    <main class="w-full px-4 py-12">
        <h1 class="text-4xl font-extrabold text-blue-800 mb-6 text-center">{{'about_title'|trans}}</h1>

        <section class="max-w-4xl mx-auto mb-12 p-6 bg-gray-50 rounded-xl shadow-lg">
            <h2 class="text-2xl font-semibold text-teal-600 mb-4 border-b pb-2">{{'about_section_passion_title'|trans}}</h2>
            <p class="text-lg text-gray-700 leading-relaxed">
                {{ 'about_passion_p1'|trans({
                    '%association%': '<span class="font-bold">' ~ 'about_passion_association_details'|trans ~ '</span>',
                    '%mission%': '<span class="font-bold">' ~ 'about_passion_mission_details'|trans ~ '</span>'
                })|raw }}
                <br><br>
                {{ 'about_passion_p2'|trans({
                    '%fait_main%': '<span class="font-bold">' ~ 'about_passion_costume_handmade'|trans ~ '</span>',
                    '%egalite%': '<span class="font-bold">' ~ 'about_passion_equality'|trans ~ '</span>'
                })|raw }}
            </p>
        </section>

        <section class="max-w-5xl mx-auto mb-12">
            <h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_founders_title'|trans}}</h2>

            <div class="grid md:grid-cols-2 gap-8 lg:hidden">

                <div class="founders-card p-4 bg-white border border-blue-100 rounded-xl shadow-md text-center">
                    <h3 class="text-xl font-bold text-blue-800">ShokoCosplay</h3>
                    <p class="text-teal-600 font-semibold mb-2">{{'about_founder_shoko_role'|trans}}</p>
                    <p class="text-sm text-gray-700 mb-2">{{'about_email_label'|trans}}: <a href="mailto:shoko-cosplay@e-cosplay.fr" class="text-blue-600 hover:underline">shoko-cosplay@e-cosplay.fr</a></p>
                    <div class="social-icons" style="justify-content: center">
                        <a href="https://www.instagram.com/cosplay_shoko/" target="_blank" aria-label="{{'about_shoko_instagram_aria'|trans}}"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="https://www.tiktok.com/@cosshoko?lang=fr" target="_blank" aria-label="{{'about_shoko_tiktok_aria'|trans}}"><i class="fab fa-tiktok fa-lg"></i></a>
                        <a href="https://www.facebook.com/CosplayShoko" target="_blank" aria-label="{{'about_shoko_facebook_aria'|trans}}"><i class="fab fa-facebook fa-lg"></i></a>
                    </div>
                </div>

                <div class="founders-card p-4 bg-white border border-blue-100 rounded-xl shadow-md text-center">
                    <h3 class="text-xl font-bold text-blue-800">Marta Gator</h3>
                    <p class="text-teal-600 font-semibold mb-2">{{'about_founder_marta_role'|trans}}</p>
                    <p class="text-sm text-gray-700 mb-2">{{'about_email_label'|trans}}: <a href="mailto:marta_gator@e-cosplay.fr" class="text-blue-600 hover:underline">marta_gator@e-cosplay.fr</a></p>
                    <div class="social-icons" style="justify-content: center">
                        <a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" aria-label="{{'about_marta_facebook_aria'|trans}}"><i class="fab fa-facebook fa-lg"></i></a>
                        <a href="https://www.tiktok.com/@marta_gator" target="_blank" aria-label="{{'about_marta_tiktok_aria'|trans}}"><i class="fab fa-tiktok fa-lg"></i></a>
                        <a href="https://www.instagram.com/marta_gator/" target="_blank" aria-label="{{'about_marta_instagram_aria'|trans}}"><i class="fab fa-instagram fa-lg"></i></a>
                    </div>
                </div>

            </div>
        </section>
        <div class="display w-full h-screen mb-12 hidden lg:block">
            <div class="display1"
                 style="background-image: url('{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}');"
                 title="{{'about_shoko_cosplay_title'|trans}}">
                <div class="image-text-overlay left">
                    <p class="font-bold text-lg">ShokoCosplay</p>
                    <p>{{'about_founder_shoko_role_short'|trans}}</p>
                    <p>{{'about_photographer_label'|trans}}: <a href="https://www.instagram.com/dystopix_photography/" target="_blank" class="text-blue-300 hover:underline">dystopix_photography</a></p>
                    <p class="text-xs">{{'about_email_label'|trans}}: <a href="mailto:shoko-cosplay@e-cosplay.fr" class="text-blue-300 hover:underline">shoko-cosplay@e-cosplay.fr</a></p>
                    <div class="social-icons">
                        <a href="https://www.instagram.com/cosplay_shoko/" target="_blank" aria-label="{{'about_shoko_instagram_aria'|trans}}"><i class="fab fa-instagram"></i></a>
                        <a href="https://www.tiktok.com/@cosshoko?lang=fr" target="_blank" aria-label="{{'about_shoko_tiktok_aria'|trans}}"><i class="fab fa-tiktok"></i></a>
                        <a href="https://www.facebook.com/CosplayShoko" target="_blank" aria-label="{{'about_shoko_facebook_aria'|trans}}"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="display2"
                 style="background-image: url('{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}');"
                 title="{{'about_marta_cosplay_title'|trans}}">
                <div class="image-text-overlay right">
                    <p class="font-bold text-lg">Marta Gator</p>
                    <p>{{'about_founder_marta_role_short'|trans}}</p>
                    <p class="text-xs">{{'about_email_label'|trans}}: <a href="mailto:marta_gator@e-cosplay.fr" class="text-blue-300 hover:underline">marta_gator@e-cosplay.fr</a></p>
                    <div class="social-icons">
                        <a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" aria-label="{{'about_marta_facebook_aria'|trans}}"><i class="fab fa-facebook"></i></a>
                        <a href="https://www.tiktok.com/@marta_gator" target="_blank" aria-label="{{'about_marta_tiktok_aria'|trans}}"><i class="fab fa-tiktok"></i></a>
                        <a href="https://www.instagram.com/marta_gator/" target="_blank" aria-label="{{'about_marta_instagram_aria'|trans}}"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <section class="mb-12 max-w-7xl mx-auto">
            <h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_goals_title'|trans}}</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
                    <div class="text-3xl text-teal-600 mb-3">🎨</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal1_title'|trans}}</h3>
                    <p class="text-gray-600">{{'about_goal1_text'|trans}}</p>
                </div>

                <div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
                    <div class="text-3xl text-teal-600 mb-3">🤝</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal2_title'|trans}}</h3>
                    <p class="text-gray-600">{{'about_goal2_text'|trans}}</p>
                </div>

                <div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
                    <div class="text-3xl text-teal-600 mb-3">🎭</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal3_title'|trans}}</h3>
                    <p class="text-gray-600">{{'about_goal3_text'|trans}}</p>
                </div>

                <div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02] border-4 border-red-300">
                    <div class="text-3xl text-red-600 mb-3">❤️‍🔥</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal4_title'|trans}}</h3>
                    <p class="text-gray-600">
                        {{ 'about_goal4_text'|trans({
                            '%ouverte%': '<span class="font-bold">' ~ 'about_goal4_open_details'|trans ~ '</span>',
                            '%friendly%': '<span class="font-bold">' ~ 'about_goal4_friendly_details'|trans ~ '</span>'
                        })|raw }}
                    </p>
                </div>
            </div>
        </section>

        <section class="mb-12 p-8 bg-blue-100 rounded-xl shadow-inner max-w-7xl mx-auto">
            <h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_activities_title'|trans}}</h2>

            <div class="space-y-8">
                <div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
                    <div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🏆</div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity1_title'|trans}}</h3>
                        <p class="text-gray-600">
                            {{ 'about_activity1_text'|trans({
                                '%concours%': '<span class="font-bold">' ~ 'about_activity1_comp_detail'|trans ~ '</span>',
                                '%ouverts%': '<span class="font-bold">' ~ 'about_activity1_open_detail'|trans ~ '</span>',
                                '%craftsmanship%': '<span class="font-bold">' ~ 'about_activity1_craft_detail'|trans ~ '</span>',
                                '%acting%': '<span class="font-bold">' ~ 'about_activity1_acting_detail'|trans ~ '</span>'
                            })|raw }}
                        </p>
                    </div>
                </div>

                <div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
                    <div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🛠️</div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity2_title'|trans}}</h3>
                        <p class="text-gray-600">
                            {{ 'about_activity2_text'|trans({
                                '%ateliers%': '<span class="font-bold">' ~ 'about_activity2_workshop_detail'|trans ~ '</span>'
                            })|raw }}
                        </p>
                    </div>
                </div>

                <div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
                    <div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🩹</div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity3_title'|trans}}</h3>
                        <p class="text-gray-600">
                            {{ 'about_activity3_text'|trans({
                                '%coshopital%': '<span class="font-bold">' ~ 'about_activity3_coshospital_detail'|trans ~ '</span>',
                                '%reparation%': '<span class="font-bold">' ~ 'about_activity3_repair_detail'|trans ~ '</span>'
                            })|raw }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="max-w-4xl mx-auto text-center p-6 bg-teal-100 rounded-xl shadow-xl">
            <p class="text-xl font-medium text-gray-800 mb-4">
                {{'about_call_to_action_text'|trans}}
            </p>
            <a href="{{ path('app_events') }}" class="inline-block px-8 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 transition duration-300">
                {{'about_call_to_action_button'|trans}}
            </a>
        </section>
    </main>
{% endblock %}