e-cosplay/templates/dons.twig

{% extends 'base.twig' %}

{# --- METADATA & SCHEMA (Inchangé) --- #}
{% block title %}{{'dons.title'|trans}}{% endblock %}
{% block meta_description %}{{'dons.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_dons') }}" />{% 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": "{{ 'breadcrumb.dons'|trans }}",
                    "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
                }
            ]
        }
    </script>
{% endblock %}

{# --- BODY AVEC TAILWIND CSS --- #}
{% block body %}
    <main class="py-12 md:py-20 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

            {# Section Header #}
            <header class="text-center mb-12">
                <h1 class="text-4xl sm:text-5xl font-extrabold text-indigo-700 tracking-tight">
                    {{ 'dons.page_title'|trans }}
                </h1>
                <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
                    {{ 'dons.introduction'|trans|raw }}
                </p>
            </header>

            {# Impact Section Card #}
            <article class="bg-white shadow-xl rounded-lg p-6 md:p-8 mb-10 border-t-4 border-indigo-500">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">{{ 'dons.impact_title'|trans }}</h2>
                <p class="text-gray-600 mb-6">{{ 'dons.impact_text'|trans }}</p>

                <h3 class="text-xl font-semibold text-indigo-600 mb-4">{{ 'dons.support_for_title'|trans }}</h3>

                {# List of supported actions (Grid/Flex for better visual) #}
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <p class="ml-3 text-gray-700">
                            <span class="font-medium text-gray-800">{{ 'dons.item.events_title'|trans }} :</span> {{ 'dons.item.events'|trans }}
                        </p>
                    </li>
                    <li class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <p class="ml-3 text-gray-700">
                            <span class="font-medium text-gray-800">{{ 'dons.item.equipment_title'|trans }} :</span> {{ 'dons.item.equipment'|trans }}
                        </p>
                    </li>
                    <li class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9h12" />
                            </svg>
                        </div>
                        <p class="ml-3 text-gray-700">
                            <span class="font-medium text-gray-800">{{ 'dons.item.website_hosting_title'|trans }} :</span> {{ 'dons.item.website_hosting'|trans }}
                        </p>
                    </li>
                    <li class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v15m0 0l-3-3m3 3l3-3" />
                            </svg>
                        </div>
                        <p class="ml-3 text-gray-700">
                            <span class="font-medium text-gray-800">{{ 'dons.item.other_needs_title'|trans }} :</span> {{ 'dons.item.other_needs'|trans }}
                        </p>
                    </li>
                </ul>
            </article>

            {# Call to Action / Donation Form #}
            <div class="p-6 md:p-8 bg-indigo-50 rounded-lg shadow-xl">
                <header class="text-center mb-6">
                    <h2 class="text-3xl font-bold text-gray-800 mb-2">{{ 'dons.make_a_donation_title'|trans }}</h2>
                    <p class="text-gray-700">{{ 'dons.call_to_action_text'|trans }}</p>
                </header>

                {# Début du formulaire #}
                <form data-turbo="false" action="{{ path('app_dons') }}" method="post" class="space-y-6">

                    {# Nom / Pseudo #}
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">
                            {{ 'form.name_label'|trans }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="name" name="name" required
                               placeholder="{{ 'form.name_placeholder'|trans }}"
                               class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    {# Email #}
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">
                            {{ 'form.email_label'|trans }} <span class="text-red-500">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                               placeholder="{{ 'form.email_placeholder'|trans }}"
                               class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    {# Montant (Ammount) #}
                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700">
                            {{ 'form.amount_label'|trans }} <span class="text-red-500">*</span>
                        </label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">€</span>
                            </div>
                            <input type="number" id="amount" name="amount" required min="1" step="0.01"
                                   placeholder="10.00"
                                   class="block w-full pl-8 pr-12 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">EUR</span>
                            </div>
                        </div>
                    </div>

                    {# Message (Facultatif) #}
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700">
                            {{ 'form.message_label'|trans }} ({{ 'form.optional'|trans }})
                        </label>
                        <textarea id="message" name="message" rows="3"
                                  placeholder="{{ 'form.message_placeholder'|trans }}"
                                  class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
                    </div>

                    {# Bouton de soumission #}
                    <div class="text-center pt-4">
                        <button type="submit"
                                class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:scale-105 w-full sm:w-auto">
                            <svg class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                            {{ 'form.submit_button_dons'|trans }}
                        </button>
                    </div>
                </form>
                {# Fin du formulaire #}

                <p class="mt-6 text-center text-sm text-gray-500">
                    {{ 'dons.thanks_note'|trans }}
                </p>
            </div>

        </div>
    </main>
{% endblock %}