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

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

{% block title %}E-Ticket - Billetterie en ligne pour associations{% endblock %}
{% block description %}E-Ticket, plateforme de billetterie en ligne pour associations : vente de tickets, reservation de tables, brocantes et vote en ligne.{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">

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

        <div class="max-w-7xl mx-auto relative z-10 text-center">

            <h1 class="text-4xl sm:text-5xl md:text-7xl lg:text-9xl font-black uppercase tracking-tighter leading-[0.85] mb-6 md:mb-8">
                <span class="block">La billetterie pensee pour les associations</span>
            </h1>

            <p class="max-w-2xl mx-auto text-base sm:text-xl md:text-3xl font-bold text-gray-600 mb-8 md:mb-12 border-l-8 border-yellow-400 pl-4 md:pl-6 text-left md:text-center md:border-l-0 md:pl-0">
                Vendez vos billets, gerez vos evenements et simplifiez votre organisation. Simple, securise, transparent.
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 md:gap-6 mb-8 md:mb-12">
                <a href="{{ path('app_register') }}" class="group relative px-6 py-4 md:px-10 md:py-6 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-sm md:text-base border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
                    Creer mon evenement
                </a>
                <a href="{{ path('app_events') }}" class="group relative px-6 py-4 md:px-10 md:py-6 bg-white text-gray-900 font-black uppercase italic tracking-widest text-sm md:text-base border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
                    Trouver un evenement
                </a>
            </div>

            <form method="get" action="{{ path('app_events') }}" class="max-w-xl mx-auto flex gap-3">
                <input type="text" name="q" class="flex-1 px-4 py-3 border-4 border-gray-900 font-bold text-sm not-italic shadow-[4px_4px_0px_rgba(0,0,0,1)] focus:outline-none focus:border-indigo-600" placeholder="Rechercher un evenement, une ville...">
                <button type="submit" class="px-6 py-3 border-4 border-gray-900 bg-gray-900 text-white font-black uppercase text-xs tracking-widest shadow-[4px_4px_0px_rgba(0,0,0,0.3)] hover:bg-indigo-600 transition-all cursor-pointer">Rechercher</button>
            </form>
        </div>
    </section>

    <div class="bg-gray-900 py-4 md:py-6 border-b-4 border-yellow-400 overflow-hidden">
        <div class="flex whitespace-nowrap animate-marquee italic">
            <span class="text-white font-black uppercase mx-4 md:mx-8 text-base md:text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
            <span class="text-white font-black uppercase mx-4 md:mx-8 text-base md:text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
            <span class="text-white font-black uppercase mx-4 md:mx-8 text-base md:text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
            <span class="text-white font-black uppercase mx-4 md:mx-8 text-base md:text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
            <span class="text-white font-black uppercase mx-4 md:mx-8 text-base md:text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
        </div>
    </div>

    <section class="py-12 md:py-16 px-4 bg-white border-b-4 border-gray-900">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-8 text-center">
                <div class="group border-4 border-gray-900 p-6 md:p-8 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[10px_10px_0px_#fabf04] hover:translate-y-[-4px] transition-all">
                    <p class="text-4xl md:text-6xl lg:text-8xl font-black tracking-tighter">{{ stats.events }}</p>
                    <p class="text-xs md:text-sm font-black uppercase tracking-widest text-gray-500 mt-2">Evenements geres</p>
                </div>
                <div class="group border-4 border-gray-900 p-6 md:p-8 bg-yellow-400 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[10px_10px_0px_#4f46e5] hover:translate-y-[-4px] transition-all">
                    <p class="text-4xl md:text-6xl lg:text-8xl font-black tracking-tighter">{{ stats.organizers }}</p>
                    <p class="text-xs md:text-sm font-black uppercase tracking-widest mt-2">Organisateurs</p>
                </div>
                <div class="group border-4 border-gray-900 p-6 md:p-8 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[10px_10px_0px_#ec4899] hover:translate-y-[-4px] transition-all">
                    <p class="text-4xl md:text-6xl lg:text-8xl font-black tracking-tighter">{{ stats.tickets }}</p>
                    <p class="text-xs md:text-sm font-black uppercase tracking-widest text-gray-500 mt-2">Billets vendus</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 md:py-24 px-4 bg-white border-b-4 border-gray-900">
        <div class="max-w-7xl mx-auto items-center">
            <div>
                <p class="text-yellow-700 font-black uppercase tracking-[0.3em] mb-4 text-xs md:text-base">// Comment ca marche</p>
                <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black uppercase tracking-tighter mb-6 md:mb-8 leading-none">
                    Pour les acheteurs
                </h2>
                <div class="space-y-4 md:space-y-6 text-base md:text-xl font-bold text-gray-700 leading-relaxed">
                    <p class="border-l-8 border-yellow-400 pl-4 md:pl-6 italic">Parcourez les evenements, selectionnez vos billets, payez en ligne en toute securite via Stripe et recevez votre billet electronique avec QR Code par email signe.</p>
                    <p>C'est simple, rapide et securise. Votre billet est disponible instantanement apres le paiement.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-gray-50 py-16 md:py-24 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black uppercase tracking-tighter mb-12 md:mb-20 text-center">
                Pour les organisateurs
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12">
                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#fabf04] transition-all">
                    <div class="w-12 h-12 md:w-16 md:h-16 bg-yellow-400 text-gray-900 flex items-center justify-center mb-6 md:mb-8 border-2 border-gray-900 text-2xl md:text-3xl font-black group-hover:rotate-12 transition-transform">
                        1
                    </div>
                    <h3 class="text-xl md:text-3xl font-black uppercase tracking-tighter mb-4">Creez votre evenement</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Configurez vos billets, tarifs et nombre de places en quelques minutes. Evenements, brocantes, reservations de tables.</p>
                </div>

                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#4f46e5] transition-all md:translate-y-8">
                    <div class="w-12 h-12 md:w-16 md:h-16 bg-indigo-600 text-white flex items-center justify-center mb-6 md:mb-8 border-2 border-gray-900 text-2xl md:text-3xl font-black group-hover:rotate-12 transition-transform">
                        2
                    </div>
                    <h3 class="text-xl md:text-3xl font-black uppercase tracking-tighter mb-4">Vendez en ligne</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Partagez le lien de votre evenement. Les paiements sont automatiques via Stripe Connect. Vous recevez vos virements directement.</p>
                </div>

                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#ec4899] transition-all">
                    <div class="w-12 h-12 md:w-16 md:h-16 bg-pink-500 text-white flex items-center justify-center mb-6 md:mb-8 border-2 border-gray-900 text-2xl md:text-3xl font-black group-hover:rotate-12 transition-transform">
                        3
                    </div>
                    <h3 class="text-xl md:text-3xl font-black uppercase tracking-tighter mb-4">Scannez a l'entree</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Validez les billets QR Code depuis n'importe quel smartphone. Gerez les sous-comptes pour votre equipe.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-white py-16 md: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-start md:items-end mb-10 md:mb-16 gap-4 md:gap-6">
                <div>
                    <p class="text-yellow-700 font-black uppercase tracking-[0.3em] mb-4 text-xs md:text-base">// Pourquoi E-Ticket</p>
                    <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black uppercase tracking-tighter leading-none">
                        Fait pour les associations
                    </h2>
                </div>
                <p class="text-base md:text-xl font-bold text-gray-500 max-w-sm italic">Une plateforme pensee par une association, pour les associations.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
                    <div class="text-3xl md:text-4xl mb-4">&#128274;</div>
                    <h3 class="text-xl md:text-2xl font-black uppercase tracking-tighter mb-2">Securise</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Paiement Stripe, HTTPS, emails signes S/MIME, protection Cloudflare.</p>
                </div>
                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
                    <div class="text-3xl md:text-4xl mb-4">&#128176;</div>
                    <h3 class="text-xl md:text-2xl font-black uppercase tracking-tighter mb-2">Transparent</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Commission claire a 3%, negociable. Aucun frais cache.</p>
                </div>
                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
                    <div class="text-3xl md:text-4xl mb-4">&#9889;</div>
                    <h3 class="text-xl md:text-2xl font-black uppercase tracking-tighter mb-2">Simple</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Creez un evenement en 5 minutes. Aucune competence technique requise.</p>
                </div>
                <div class="group bg-white border-4 border-gray-900 p-6 md:p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
                    <div class="text-3xl md:text-4xl mb-4">&#127915;</div>
                    <h3 class="text-xl md:text-2xl font-black uppercase tracking-tighter mb-2">Complet</h3>
                    <p class="text-gray-600 font-bold leading-tight italic text-sm md:text-base">Billets, brocantes, tables, votes, sous-comptes, virements automatiques.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16 md:py-24 px-4 bg-yellow-400 overflow-hidden">
        <div class="absolute inset-0 bg-gray-900 skew-y-2 transform origin-bottom-right translate-y-12"></div>

        <div class="max-w-7xl mx-auto relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8 md:gap-12">
            <div class="text-center lg:text-left text-white">
                <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black uppercase tracking-tighter mb-4">
                    Pret a lancer votre evenement ?
                </h2>
                <p class="text-lg md:text-2xl font-bold text-yellow-300 uppercase tracking-tighter italic">
                    Rejoignez E-Ticket et commencez a vendre vos billets des aujourd'hui.
                </p>
            </div>

            <a href="{{ path('app_register') }}" class="group relative px-8 py-5 md:px-16 md:py-8 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-base md:text-2xl border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] md:shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all flex-shrink-0">
                Creer un compte
            </a>
        </div>
    </section>

</div>

{% endblock %}