e-cosplay/templates/contact.twig

{% extends 'base.twig' %}

{# --- METADATA & SCHEMA --- #}
{% block title %}{{'contact_page.title'|trans}}{% endblock %}
{% block meta_description %}{{'contact_page.description'|trans}}{% endblock %}

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

{# --- BODY --- #}
{% block body %}
    <div class="container mx-auto p-4 md:p-8 pt-12">

        {# --- FLASH MESSAGE BLOCK (SUCCESS) --- #}
        {% for message in app.flashes('success') %}
            <div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-green-100 border border-green-300 text-green-800 flex items-start shadow-md" role="alert">
                <svg class="w-6 h-6 mr-3 mt-0.5 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <strong class="font-semibold">{{ 'flash.success.strong'|trans }}</strong>
                    <p class="text-sm">{{ message }}</p>
                </div>
            </div>
        {% endfor %}

        {# --- FLASH MESSAGE BLOCK (ERROR) --- #}
        {% for message in app.flashes('error') %}
            <div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-red-100 border border-red-300 text-red-800 flex items-start shadow-md" role="alert">
                <svg class="w-6 h-6 mr-3 mt-0.5 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414 0L10 9.586l-1.293-1.293a1 1 0 10-1.414 1.414L8.586 11l-1.293 1.293a1 1 0 001.414 1.414L10 12.414l1.293 1.293a1 1 0 001.414-1.414L11.414 11l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <strong class="font-semibold">{{ 'flash.error.strong'|trans }}</strong>
                    <p class="text-sm">{{ message }}</p>
                </div>
            </div>
        {% endfor %}

        <h1 class="text-4xl font-extrabold text-center mb-10 text-gray-800">
            {{ 'contact_page.title'|trans }}
        </h1>

        <div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-10">

            {# Colonne 1 : Informations de Contact #}
            <div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-lg border border-gray-100 h-fit">
                <h2 class="text-2xl font-bold mb-4 text-indigo-700">{{ 'contact_info.title'|trans }}</h2>
                <p class="mb-6 text-gray-600 border-b pb-4">
                    {{ 'contact_info.subtitle'|trans }}
                </p>

                {# Coordonnées #}
                <div class="space-y-6">

                    <div>
                        <h3 class="font-semibold text-gray-800 flex items-center mb-1">
                            <svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
                            {{ 'contact_info.email'|trans }}
                        </h3>
                        {# L'adresse email reste en dur car c'est une donnée de contact #}
                        <p class="text-indigo-600 hover:text-indigo-800 transition duration-150">
                            <a href="mailto:contact@e-cosplay.fr">contact@e-cosplay.fr</a>
                        </p>
                    </div>

                    <div>
                        <h3 class="font-semibold text-gray-800 flex items-center mb-1">
                            <svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243m12.44-1.296a8 8 0 11-14.04-4.832"></path></svg>
                            {{ 'contact_info.address'|trans }}
                        </h3>
                        {# L'adresse postale reste en dur car c'est une donnée de contact #}
                        <p class="text-gray-600">
                            42 rue de Saint-Quentin<br>
                            02800 Beautor, FRANCE
                        </p>
                    </div>

                    {# Bloc pour l'adhésion #}
                    <div class="pt-4 border-t mt-6 border-gray-200">
                        <h3 class="text-xl font-bold mb-3 text-green-700 flex items-center">
                            <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 18H5a2 2 0 01-2-2v-2c0-.55.22-1.07.61-1.45l2-2.02a1 1 0 011.41 0l2.5 2.5a1 1 0 001.41 0l2-2.02a1 1 0 011.41 0l2 2.02c.39.38.61.9.61 1.45v2a2 2 0 01-2 2z"></path></svg>
                            {{ 'contact_info.join_title'|trans }}
                        </h3>
                        <p class="text-gray-600">
                            {{ 'contact_info.join_text'|trans }}
                        </p>
                        <p class="mt-2 font-bold text-indigo-600">
                            <a href="mailto:contact@e-cosplay.fr">contact@e-cosplay.fr</a>
                        </p>
                    </div>
                </div>

            </div>

            {# Colonne 2 : Formulaire de Contact #}
            <div class="lg:col-span-2 bg-white p-8 rounded-xl shadow-lg border border-gray-100">
                <h2 class="text-2xl font-bold mb-6 text-gray-800">{{ 'form.title'|trans }}</h2>

                {{ form_start(form, {'attr': {'class': 'space-y-5'}}) }}

                {# Ligne 1 : Nom et Prénom #}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {{ form_row(form.name, {'label': 'contact_form.name.label'|trans}) }}
                    {{ form_row(form.surname, {'label': 'contact_form.surname.label'|trans}) }}
                </div>

                {# Ligne 2 : Email et Sujet #}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {{ form_row(form.email, {'label': 'form_email_label'|trans}) }}
                    {{ form_row(form.subject, {'label': 'contact_form.subject.label'|trans}) }}
                </div>

                {# Ligne 3 : Téléphone (optionnel) #}
                {{ form_row(form.tel, {'label': 'contact_form.tel.label'|trans}) }}

                {# Ligne 4 : Message #}
                {{ form_row(form.message, {'label': 'contact_form.message.label'|trans}) }}

                <div class="pt-4">
                    <button type="submit" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition duration-150 ease-in-out shadow-lg transform hover:scale-[1.01]">
                        <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
                        {{ 'form.submit_button'|trans }}
                    </button>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}