198d684fb8
- Add public organizers list page (/organisateurs) with neo-brutalist card grid, social icons, and logo display
- Add organizer detail page (/organisateur/{id}-{slug}) with company info, SIRET, email, address, social links, and events placeholder
- Add slug-based URLs with 301 redirect on wrong slug, getSlug() method on User entity
- Add "Voir les evenements" button on organizer cards linking to detail page
- Add JSON-LD BreadcrumbList to all 17 pages that were missing breadcrumbs (login, forgot_password, register_success, email_verified, legal/*, attestation/*, account/*)
- Add Open Graph meta tags (og:title, og:description, og:image, og:type, og:locale, og:site_name) in base.html.twig with automatic inheritance from title/description blocks
- Add og:image with organizer logo on detail page
- Update sitemap: add /organisateurs to sitemap-main, generate organizer detail URLs in sitemap-orgas with logo images
- Update navbar to highlight "Organisateurs" on detail pages
- Redesign homepage with hero section, marquee, stats counters, how-it-works, and CTA sections
- Add Tailwind v4 @source "../templates" directive to app.scss and admin.scss
- Migrate Flysystem from S3 to local storage (uploads/events, uploads/logos)
- Update Liip Imagine config with FormatExtensionResolver for webp conversion
- Add User entity social fields (website, facebook, instagram, twitter, tiktok), logo upload (Vich), __serialize/__unserialize for session safety
- Add account page settings tab with profile, logo upload, and social media for organizers
- Add Stripe Connect status display and sub-account management in account page
- Delete WebpExtensionSubscriber (replaced by FormatExtensionResolver)
- Add migration for social fields and logo columns
- Add deploy.yml chmod tasks for uploads directories
- Add HomeController tests (detail success, wrong slug redirect, 404 cases)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
184 lines
12 KiB
Twig
184 lines
12 KiB
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-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">ETICKET</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">La billetterie pensee pour les 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-yellow-400 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-6">
|
|
<a href="{{ path('app_register') }}" class="group relative px-10 py-6 bg-yellow-400 text-gray-900 font-black uppercase italic 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">
|
|
Creer mon evenement
|
|
</a>
|
|
<a href="{{ path('app_search') }}" class="group relative px-10 py-6 bg-white text-gray-900 font-black uppercase italic 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">
|
|
Trouver un evenement
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="bg-gray-900 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-8 text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
|
|
<span class="text-white font-black uppercase mx-8 text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
|
|
<span class="text-white font-black uppercase mx-8 text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
|
|
<span class="text-white font-black uppercase mx-8 text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
|
|
<span class="text-white font-black uppercase mx-8 text-2xl opacity-80">Billets // Brocantes // Reservations // Associations // Evenements // QR Code // Paiement securise</span>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="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-8 text-center">
|
|
<div class="group border-4 border-gray-900 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-6xl md:text-8xl font-black tracking-tighter">{{ stats.events }}</p>
|
|
<p class="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-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-6xl md:text-8xl font-black tracking-tighter">{{ stats.organizers }}</p>
|
|
<p class="text-sm font-black uppercase tracking-widest mt-2">Organisateurs</p>
|
|
</div>
|
|
<div class="group border-4 border-gray-900 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-6xl md:text-8xl font-black tracking-tighter">{{ stats.tickets }}</p>
|
|
<p class="text-sm font-black uppercase tracking-widest text-gray-500 mt-2">Billets vendus</p>
|
|
<p class="text-xs font-bold text-gray-400 mt-1 italic">Billets, reservations, brocantes, votes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="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-500 font-black uppercase tracking-[0.3em] mb-4">// Comment ca marche</p>
|
|
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-8 leading-none">
|
|
Pour les acheteurs
|
|
</h2>
|
|
<div class="space-y-6 text-xl font-bold text-gray-700 leading-relaxed">
|
|
<p class="border-l-8 border-yellow-400 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-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">
|
|
Pour les organisateurs
|
|
</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_#fabf04] transition-all">
|
|
<div class="w-16 h-16 bg-yellow-400 text-gray-900 flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl font-black group-hover:rotate-12 transition-transform">
|
|
1
|
|
</div>
|
|
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Creez votre evenement</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">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-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#4f46e5] transition-all md:translate-y-8">
|
|
<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 font-black group-hover:rotate-12 transition-transform">
|
|
2
|
|
</div>
|
|
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Vendez en ligne</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">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-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#ec4899] transition-all">
|
|
<div class="w-16 h-16 bg-pink-500 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl font-black group-hover:rotate-12 transition-transform">
|
|
3
|
|
</div>
|
|
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Scannez a l'entree</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">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-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-yellow-500 font-black uppercase tracking-[0.3em] mb-4">// Pourquoi E-Ticket</p>
|
|
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none">
|
|
Fait pour les associations
|
|
</h2>
|
|
</div>
|
|
<p class="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-8">
|
|
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
|
|
<div class="text-4xl mb-4">🔒</div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter mb-2">Securise</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">Paiement Stripe, HTTPS, emails signes S/MIME, protection Cloudflare.</p>
|
|
</div>
|
|
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
|
|
<div class="text-4xl mb-4">💰</div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter mb-2">Transparent</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">Commission claire a 3%, negociable. Aucun frais cache.</p>
|
|
</div>
|
|
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
|
|
<div class="text-4xl mb-4">⚡</div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter mb-2">Simple</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">Creez un evenement en 5 minutes. Aucune competence technique requise.</p>
|
|
</div>
|
|
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
|
|
<div class="text-4xl mb-4">🎫</div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter mb-2">Complet</h3>
|
|
<p class="text-gray-600 font-bold leading-tight italic">Billets, brocantes, tables, votes, sous-comptes, virements automatiques.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="relative 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-12">
|
|
<div class="text-center lg:text-left text-white">
|
|
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-4">
|
|
Pret a lancer votre evenement ?
|
|
</h2>
|
|
<p class="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-16 py-8 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-2xl border-4 border-gray-900 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
|
|
Creer un compte
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
.animate-marquee {
|
|
display: flex;
|
|
width: 200%;
|
|
animation: marquee 40s linear infinite;
|
|
}
|
|
</style>
|
|
{% endblock %}
|