50 lines
2.3 KiB
Twig
50 lines
2.3 KiB
Twig
|
{% extends 'base.twig' %}
|
||
|
|
|
||
|
|
{% block title %}{{ 'newsletter.success.title'|trans|default('Inscription validée !') }}{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div class="bg-white min-h-[70vh] flex items-center justify-center py-20 px-4">
|
||
|
|
<div class="container mx-auto max-w-2xl text-center">
|
||
|
|
|
||
|
|
{# --- CARTE DE SUCCÈS STYLE NEUBRUTALISTE --- #}
|
||
|
|
<div class="bg-white border-8 border-gray-900 p-10 md:p-16 shadow-[20px_20px_0px_0px_#fabf04] transform rotate-2">
|
||
|
|
|
||
|
|
{# Icône Succès #}
|
||
|
|
<div class="text-7xl mb-6 inline-block animate-bounce">
|
||
|
|
🎉
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 class="text-4xl md:text-6xl font-black uppercase italic mb-6 tracking-tighter leading-none text-gray-900">
|
||
|
|
{{ 'newsletter.success.header'|trans }}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="w-full h-2 bg-indigo-600 mb-8 border-2 border-gray-900"></div>
|
||
|
|
|
||
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800 mb-10 leading-relaxed uppercase">
|
||
|
|
{{ 'newsletter.success.message'|trans }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{# Bloc Info Fun #}
|
||
|
|
<div class="bg-pink-500 text-white p-4 border-4 border-gray-900 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] mb-10">
|
||
|
|
<p class="text-sm font-black uppercase tracking-widest">
|
||
|
|
{{ 'newsletter.success.hint'|trans }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Bouton Retour #}
|
||
|
|
<a href="{{ path('app_home') }}"
|
||
|
|
class="inline-block px-10 py-4 bg-gray-900 text-white border-4 border-gray-900 font-black uppercase hover:bg-indigo-600 transition-all shadow-[6px_6px_0px_0px_#fabf04] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||
|
|
{{ 'newsletter.success.back_button'|trans }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Déco de fond style comics #}
|
||
|
|
<div class="mt-12 flex justify-center gap-2 opacity-20">
|
||
|
|
<div class="w-4 h-4 bg-indigo-600 rounded-full"></div>
|
||
|
|
<div class="w-4 h-4 bg-pink-500 rounded-full"></div>
|
||
|
|
<div class="w-4 h-4 bg-yellow-400 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|