admin/e-ticket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign /tarifs page: 3 offers (free/basic 20EUR/mo/custom), commissions table, examples

Browse Source 
- Free: 0 EUR, 1 event, billets standards
- Basic: 20 EUR/mois, events illimites, PDF, invitations
- Sur-mesure: sur devis, design personnalise, brocantes, vote
- Commission examples table: 1, 2, 5, 10, 15, 20 EUR
- Stripe fees + E-Ticket fees breakdown
- Includes section with 6 feature cards
- Neo-brutalist design matching the rest of the app

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-22 20:36:26 +01:00
parent e5a63b1a33
commit d4941c6c23
2 changed files with 166 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
TASK_CHECKUP.md
View File

@@ -30,7 +30,7 @@
- [ ] Admin : logs des actions importantes (audit trail)
### UX & Pages
- [ ] Page /tarifs : détailler les 3 offres (free/basic/custom) avec les prix
- [x] Page /tarifs : détailler les 3 offres (free/basic/custom) avec commissions et exemples
- [x] Ajouter la recherche d'événements sur la homepage
- [x] Ajouter le filtrage par date/ville sur /evenements
- [x] Responsive : pages publiques OK à 320px (flex-wrap, overflow-x-auto, breakpoints)

246
templates/home/tarifs.html.twig
View File

@@ -10,7 +10,7 @@
"@context": "https://schema.org",
"@type": "Product",
"name": "E-Ticket Gratuit",
"description": "Abonnement gratuit sur demande : 5 evenements simultanement, Billets illimites, QR Code securise, paiement Stripe",
"description": "Offre gratuite : 1 evenement, billets standards, QR Code securise, paiement Stripe",
"brand": {"@type": "Organization", "name": "E-Ticket"},
"offers": {
"@type": "Offer",
@@ -23,14 +23,13 @@
{
"@context": "https://schema.org",
"@type": "Product",
"name": "E-Ticket Basique",
"description": "Abonnement basique : evenements et billets illimites, commission reduite a 1.5%, page organisateur personnalisee",
"name": "E-Ticket Basic",
"description": "Offre Basic : evenements illimites, generation PDF, QR Code, paiement Stripe",
"brand": {"@type": "Organization", "name": "E-Ticket"},
"offers": {
"@type": "Offer",
"price": "10",
"price": "0",
"priceCurrency": "EUR",
"unitCode": "MON",
"availability": "https://schema.org/OnlineOnly",
"url": "https://ticket.e-cosplay.fr/tarifs"
}
@@ -39,11 +38,11 @@
"@context": "https://schema.org",
"@type": "Product",
"name": "E-Ticket Sur-mesure",
"description": "Abonnement sur-mesure : evenements et billets illimites, commission a partir de 0.5%, billets personnalisables, accompagnement dedie, tarif personnalise",
"description": "Offre sur-mesure : evenements illimites, design personnalise, image par billet, accompagnement dedie",
"brand": {"@type": "Organization", "name": "E-Ticket"},
"offers": {
"@type": "AggregateOffer",
"lowPrice": "0.5",
"lowPrice": "0",
"priceCurrency": "EUR",
"availability": "https://schema.org/OnlineOnly",
"url": "https://ticket.e-cosplay.fr/tarifs"
@@ -54,94 +53,179 @@
{% endblock %}
{% block body %}
<div class="page-container-lg">
<h1 class="heading-page text-3xl font-black uppercase tracking-tighter italic">Tarifs</h1>
<p class="font-bold text-gray-600 italic mb-8">Transparence totale sur nos commissions et abonnements.</p>
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
<h2 class="text-2xl font-black uppercase mb-6">Commission par transaction</h2>
<div class="flex flex-wrap gap-6 mb-12">
<div class="card-brutal flex-1 min-w-[250px]">
<p class="text-[10px] tracking-widest font-black uppercase text-gray-500">Commission plateforme</p>
<p class="text-4xl font-black my-2">3%</p>
<p class="text-sm font-bold text-gray-600">du montant de chaque billet vendu</p>
<p class="text-sm font-bold text-gray-600 mt-2">Negociable selon votre profil, contactez-nous.</p>
<p class="mt-4 text-xs text-gray-500 font-bold">+ frais Stripe (1.5% + 0.25&euro; par transaction, non negociables)</p>
<section class="relative bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
<div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
<span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">TARIFS</span>
</div>
<div class="card-brutal flex-1 min-w-[250px]">
<p class="text-[10px] tracking-widest font-black uppercase text-gray-500">Billets gratuits</p>
<p class="text-4xl font-black my-2">0&euro;</p>
<p class="text-sm font-bold text-gray-600">aucune commission sur les billets gratuits</p>
<div class="max-w-4xl mx-auto relative z-10 text-center">
<h1 class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-[0.85] mb-4">Tarifs transparents</h1>
<p class="text-lg font-bold text-gray-600">Pas d'abonnement mensuel. Commission uniquement sur les ventes realisees.</p>
</div>
</section>
</div>
<section class="py-12 px-4">
<div class="max-w-5xl mx-auto">
<h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Nos offres</h2>
<h2 class="text-2xl font-black uppercase mb-6">Abonnements organisateur</h2>
<div class="flex flex-wrap gap-6 mb-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)]">
<div class="inline-block px-3 py-1 border-2 border-gray-900 bg-gray-100 text-[10px] font-black uppercase tracking-widest mb-4">Gratuit</div>
<p class="text-4xl font-black mb-1">0 &euro;</p>
<p class="text-xs font-bold text-gray-400 mb-6">Aucun frais fixe</p>
<ul class="space-y-3 text-sm font-bold mb-6">
<li class="text-green-600">&#10003; 1 evenement</li>
<li class="text-green-600">&#10003; Billets standards</li>
<li class="text-green-600">&#10003; QR code et verification</li>
<li class="text-green-600">&#10003; Paiement Stripe</li>
<li class="text-green-600">&#10003; Email de confirmation</li>
<li class="text-gray-300">&#10005; Evenements illimites</li>
<li class="text-gray-300">&#10005; Generation PDF</li>
<li class="text-gray-300">&#10005; Image par billet</li>
<li class="text-gray-300">&#10005; Design personnalise</li>
</ul>
<a href="mailto:contact@e-cosplay.fr?subject=Offre Gratuit" class="block text-center px-4 py-3 border-3 border-gray-900 bg-white font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Nous contacter</a>
</div>
<div class="card-brutal flex-1 min-w-[250px]">
<div class="inline-block mb-4 px-3 py-1 border-2 border-gray-900 bg-[#fabf04]">
<p class="text-[10px] tracking-widest font-black uppercase">Gratuit</p>
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] relative">
<div class="absolute top-0 right-0 bg-indigo-600 text-white font-black uppercase text-[10px] tracking-widest px-3 py-1">Populaire</div>
<div class="inline-block px-3 py-1 border-2 border-gray-900 bg-[#fabf04] text-[10px] font-black uppercase tracking-widest mb-4">Basic</div>
<p class="text-4xl font-black mb-1">20 &euro;<span class="text-sm font-bold text-gray-500"> / mois</span></p>
<p class="text-xs font-bold text-gray-400 mb-6">+ commission sur les ventes</p>
<ul class="space-y-3 text-sm font-bold mb-6">
<li class="text-green-600">&#10003; Evenements illimites</li>
<li class="text-green-600">&#10003; Billets standards</li>
<li class="text-green-600">&#10003; QR code et verification</li>
<li class="text-green-600">&#10003; Paiement Stripe</li>
<li class="text-green-600">&#10003; Email de confirmation</li>
<li class="text-green-600">&#10003; Generation PDF automatique</li>
<li class="text-green-600">&#10003; Invitations gratuites</li>
<li class="text-gray-300">&#10005; Image par billet</li>
<li class="text-gray-300">&#10005; Design personnalise</li>
</ul>
<a href="mailto:contact@e-cosplay.fr?subject=Offre Basic" class="block text-center px-4 py-3 border-3 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest hover:bg-yellow-500 transition-all">Nous contacter</a>
</div>
<div class="border-4 border-gray-900 p-6 bg-gray-900 text-white shadow-[6px_6px_0px_rgba(0,0,0,1)]">
<div class="inline-block px-3 py-1 border-2 border-white bg-indigo-600 text-[10px] font-black uppercase tracking-widest mb-4">Sur-mesure</div>
<p class="text-4xl font-black mb-1">Sur devis</p>
<p class="text-xs font-bold text-gray-400 mb-6">Commission et fonctionnalites personnalisees</p>
<ul class="space-y-3 text-sm font-bold mb-6">
<li class="text-green-400">&#10003; Evenements illimites</li>
<li class="text-green-400">&#10003; Design de billets personnalise</li>
<li class="text-green-400">&#10003; Image par billet</li>
<li class="text-green-400">&#10003; QR code et verification</li>
<li class="text-green-400">&#10003; Generation PDF automatique</li>
<li class="text-green-400">&#10003; Categories illimitees</li>
<li class="text-green-400">&#10003; Invitations gratuites</li>
<li class="text-green-400">&#10003; Reservation brocantes</li>
<li class="text-green-400">&#10003; Vote en ligne</li>
<li class="text-green-400">&#10003; Accompagnement dedie</li>
</ul>
<a href="mailto:contact@e-cosplay.fr?subject=Offre Sur-mesure" class="block text-center px-4 py-3 border-2 border-white bg-white text-gray-900 font-black uppercase text-xs tracking-widest hover:bg-[#fabf04] transition-all">Nous contacter</a>
</div>
</div>
<p class="text-4xl font-black my-2">0&euro;<span class="text-sm font-bold text-gray-500">/mois</span></p>
<p class="text-sm font-bold text-gray-600 mb-2">Sur demande, apres approbation par la plateforme</p>
<ul class="list-none p-0 mt-4 text-sm font-bold">
<li class="py-1">&#10003; 5 evenements simultanement</li>
<li class="py-1">&#10003; Billets illimites</li>
<li class="py-1">&#10003; QR Code securise</li>
<li class="py-1">&#10003; Paiement Stripe</li>
<li class="py-1">&#10003; Email de confirmation</li>
</ul>
<a href="mailto:contact@e-cosplay.fr" class="inline-block mt-4 px-4 py-2 border-2 border-gray-900 bg-gray-900 text-white font-black uppercase text-xs hover:bg-indigo-600 transition-colors">Faire une demande</a>
</div>
</section>
<div class="card-brutal flex-1 min-w-[250px]">
<div class="inline-block mb-4 px-3 py-1 border-2 border-gray-900 bg-indigo-600 text-white">
<p class="text-[10px] tracking-widest font-black uppercase">Basique</p>
<section class="py-12 px-4 bg-white border-t-8 border-gray-900">
<div class="max-w-5xl mx-auto">
<h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Commissions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] text-center">
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Commission E-Ticket</p>
<p class="text-5xl font-black text-indigo-600">3%</p>
<p class="text-sm font-bold text-gray-500 mt-2">Par transaction, sur le montant HT</p>
<p class="text-xs font-bold text-gray-400 mt-1">Negociable selon votre profil</p>
</div>
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] text-center">
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Frais Stripe</p>
<p class="text-5xl font-black">1.5% + 0.25 &euro;</p>
<p class="text-sm font-bold text-gray-500 mt-2">Par transaction, cartes europeennes</p>
<p class="text-xs font-bold text-gray-400 mt-1">Non negociable, fixe par Stripe</p>
</div>
</div>
<p class="text-4xl font-black my-2">10&euro;<span class="text-sm font-bold text-gray-500">/mois</span></p>
<ul class="list-none p-0 mt-4 text-sm font-bold">
<li class="py-1">&#10003; Evenements illimites</li>
<li class="py-1">&#10003; Billets illimites</li>
<li class="py-1">&#10003; Commission reduite a 1.5%</li>
<li class="py-1">&#10003; Page organisateur personnalisee</li>
</ul>
</div>
<div class="card-brutal flex-1 min-w-[250px] !bg-gray-900 text-white">
<div class="inline-block mb-4 px-3 py-1 border-2 border-white bg-pink-500 text-white">
<p class="text-[10px] tracking-widest font-black uppercase">Sur-mesure</p>
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-x-auto">
<p class="text-sm font-black uppercase tracking-widest text-gray-400 mb-4">Exemples avec commission E-Ticket a 3%</p>
<table class="w-full text-sm font-bold" style="min-width: 500px;">
<thead>
<tr class="border-b-3 border-gray-900">
<th class="py-2 text-left text-gray-400 uppercase tracking-widest text-xs">Prix billet</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">E-Ticket (3%)</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Stripe</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Total frais</th>
<th class="py-2 text-right text-green-600 uppercase tracking-widest text-xs">Vous recevez</th>
</tr>
</thead>
<tbody>
{% for price in [1, 2, 5, 10, 15, 20] %}
{% set eticket_fee = price * 0.03 %}
{% set stripe_fee = price * 0.015 + 0.25 %}
{% set total_fee = eticket_fee + stripe_fee %}
{% set net = price - total_fee %}
<tr class="border-b border-gray-100">
<td class="py-2 text-left">{{ price|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ eticket_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ stripe_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ total_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-green-600 font-black">{{ net|number_format(2, ',', ' ') }} &euro;</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="border-4 border-gray-900 p-6 bg-[#fabf04] shadow-[6px_6px_0px_rgba(0,0,0,1)] mt-6 text-center">
<p class="font-black uppercase text-sm tracking-widest mb-2">Billets gratuits = 0 &euro; de commission</p>
<p class="text-sm font-bold text-gray-700">Aucune commission E-Ticket ni Stripe sur les billets a 0 &euro; et les invitations.</p>
</div>
<p class="text-4xl font-black my-2">Sur devis</p>
<p class="text-sm font-bold opacity-80">Tarif personnalise selon vos besoins</p>
<ul class="list-none p-0 mt-4 text-sm font-bold">
<li class="py-1">&#10003; Evenements illimites</li>
<li class="py-1">&#10003; Billets illimites</li>
<li class="py-1">&#10003; Commission a partir de 0.5%</li>
<li class="py-1">&#10003; Page organisateur personnalisee</li>
<li class="py-1">&#10003; Reservation de tables</li>
<li class="py-1">&#10003; Gestion de brocantes</li>
<li class="py-1">&#10003; Billets personnalisables</li>
<li class="py-1">&#10003; Accompagnement dedie</li>
</ul>
<a href="mailto:contact@e-cosplay.fr" class="inline-block mt-4 px-4 py-2 border-2 border-white bg-white text-gray-900 font-black uppercase text-xs hover:bg-yellow-400 transition-colors">Nous contacter</a>
</div>
</section>
</div>
<section class="py-12 px-4">
<div class="max-w-5xl mx-auto">
<h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Inclus dans toutes les offres</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#128274;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">Paiement securise</h3>
<p class="text-xs font-bold text-gray-500">Via Stripe, conforme PCI DSS</p>
</div>
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#127903;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">Billets QR code</h3>
<p class="text-xs font-bold text-gray-500">Billets electroniques avec cle de securite</p>
</div>
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#128231;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">Emails signes</h3>
<p class="text-xs font-bold text-gray-500">S/MIME pour l'authenticite</p>
</div>
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#128200;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">Statistiques</h3>
<p class="text-xs font-bold text-gray-500">Ventes en temps reel</p>
</div>
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#128737;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">RGPD</h3>
<p class="text-xs font-bold text-gray-500">Donnees hebergees en France</p>
</div>
<div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<div class="text-2xl mb-2">&#9889;</div>
<h3 class="font-black uppercase text-xs tracking-widest mb-1">Cloudflare</h3>
<p class="text-xs font-bold text-gray-500">HTTPS, CDN, protection DDoS</p>
</div>
</div>
</div>
</section>
<div class="card-brutal-info">
<h3 class="text-lg font-black uppercase mb-2">Inclus dans toutes les formules</h3>
<ul class="list-disc pl-6 text-sm font-bold text-gray-700">
<li>Paiement securise via Stripe</li>
<li>Billets electroniques avec QR Code</li>
<li>Emails signes S/MIME</li>
<li>Scan des billets a l'entree</li>
<li>Conformite RGPD</li>
<li>HTTPS et protection Cloudflare</li>
</ul>
</div>
<p class="text-sm opacity-70 italic mt-8">Les tarifs sont exprimes en euros HT. Contact : <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a></p>
<section class="py-8 px-4 bg-gray-900 text-white text-center">
<p class="font-bold text-sm">Une question ? <a href="mailto:contact@e-cosplay.fr" class="text-[#fabf04] hover:underline">contact@e-cosplay.fr</a></p>
<p class="text-xs font-bold text-gray-500 mt-2">Tarifs exprimes en euros HT. E-Ticket by E-Cosplay.</p>
</section>
</div>
{% endblock %}