e-ticket/templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Accueil - E-Cosplay Ticket{% endblock %}
{% block meta_description %}Billetterie officielle E-Cosplay. Achetez vos tickets en ligne, recevez votre QR code et présentez-le à l'entrée.{% endblock %}

{% block body %}
    {# ── HERO ── #}
    <section class="relative min-h-[90vh] flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-32">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[30rem] font-black uppercase leading-none block -rotate-12 translate-y-20">TICKET</span>
        </div>

        <div class="max-w-7xl mx-auto relative z-10 text-center">
            <h1 class="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] mb-8">
                <span class="block">Plateforme de billetterie</span>
                <span class="block text-indigo-600">destinée aux associations !</span>
            </h1>

            <p class="max-w-2xl mx-auto text-xl md:text-3xl font-bold text-gray-600 mb-12 border-l-8 border-indigo-600 pl-6 text-left md:text-center md:border-l-0 md:pl-0">
                Achetez vos tickets en ligne, recevez votre QR code et présentez-le à l'entrée.
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-6">
                <a href="#events" class="group relative px-10 py-6 bg-indigo-600 text-white font-black uppercase tracking-widest border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
                    Voir les événements
                </a>
            </div>
        </div>
    </section>

    {# ── MARQUEE ── #}
    <div class="bg-gray-900 py-6 border-b-4 border-indigo-600 overflow-hidden">
        <div class="flex whitespace-nowrap animate-marquee">
            {% for i in 1..8 %}
                <span class="text-white font-black uppercase mx-8 text-2xl opacity-80">
                    Ticket numérique // Scan QR // Paiement sécurisé // Associations
                </span>
            {% endfor %}
        </div>
    </div>

    {# ── FEATURES ── #}
    <section class="bg-gray-50 py-24 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-20 text-center">
                Comment ça Marche
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#4f46e5] transition-all">
                    <div class="w-16 h-16 bg-indigo-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                        🎟️
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Choisissez</h3>
                    <p class="text-gray-600 font-bold leading-tight">Sélectionnez votre événement et le nombre de tickets souhaités.</p>
                </div>

                <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#ef4444] transition-all md:translate-y-8">
                    <div class="w-16 h-16 bg-red-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                        💳
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Payez</h3>
                    <p class="text-gray-600 font-bold leading-tight">Paiement sécurisé par carte bancaire via Stripe.</p>
                </div>

                <div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#eab308] transition-all">
                    <div class="w-16 h-16 bg-yellow-500 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
                        📱
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Scannez</h3>
                    <p class="text-gray-600 font-bold leading-tight">Recevez votre QR code par email signé et présentez-le à l'entrée.</p>
                </div>
            </div>
        </div>
    </section>

    {# ── EVENTS ── #}
    <section id="events" class="bg-white py-24 px-4 border-t-4 border-gray-900">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                <div>
                    <p class="text-indigo-600 font-black uppercase tracking-[0.3em] mb-4">// Prochainement</p>
                    <h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none">
                        Événements à Venir
                    </h2>
                </div>
            </div>
            <div class="border-4 border-dashed border-gray-300 p-16 text-center">
                <p class="text-2xl font-black text-gray-300 uppercase">Aucun événement pour le moment</p>
            </div>
        </div>
    </section>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 40s linear infinite;
        }
    </style>
{% endblock %}