264 lines
16 KiB
Twig
264 lines
16 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Tarifs - E-Ticket{% endblock %}
|
|
{% block description %}Tarifs et commissions de la plateforme E-Ticket pour les organisateurs d'evenements{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
<script type="application/ld+json">
|
|
[
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Product",
|
|
"name": "E-Ticket Gratuit",
|
|
"description": "Offre gratuite : 1 evenement, billets standards, QR Code securise, paiement Stripe",
|
|
"brand": {"@type": "Organization", "name": "E-Ticket"},
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "EUR",
|
|
"availability": "https://schema.org/OnlineOnly",
|
|
"url": "https://ticket.e-cosplay.fr/tarifs"
|
|
}
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Product",
|
|
"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": "0",
|
|
"priceCurrency": "EUR",
|
|
"availability": "https://schema.org/OnlineOnly",
|
|
"url": "https://ticket.e-cosplay.fr/tarifs"
|
|
}
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Product",
|
|
"name": "E-Ticket Sur-mesure",
|
|
"description": "Offre sur-mesure : evenements illimites, design personnalise, image par billet, accompagnement dedie",
|
|
"brand": {"@type": "Organization", "name": "E-Ticket"},
|
|
"offers": {
|
|
"@type": "AggregateOffer",
|
|
"lowPrice": "0",
|
|
"priceCurrency": "EUR",
|
|
"availability": "https://schema.org/OnlineOnly",
|
|
"url": "https://ticket.e-cosplay.fr/tarifs"
|
|
}
|
|
}
|
|
]
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
|
|
|
|
<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="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">Commission uniquement sur les ventes realisees.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
<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 €</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">✓ 1 evenement</li>
|
|
<li class="text-green-600">✓ Billets standards</li>
|
|
<li class="text-green-600">✓ QR code et verification</li>
|
|
<li class="text-green-600">✓ Paiement Stripe</li>
|
|
<li class="text-green-600">✓ Email de confirmation</li>
|
|
<li class="text-gray-300">✕ Evenements illimites</li>
|
|
<li class="text-gray-300">✕ Generation PDF</li>
|
|
<li class="text-gray-300">✕ Image par billet</li>
|
|
<li class="text-gray-300">✕ 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="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 €<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">✓ Evenements illimites</li>
|
|
<li class="text-green-600">✓ Billets standards</li>
|
|
<li class="text-green-600">✓ QR code et verification</li>
|
|
<li class="text-green-600">✓ Paiement Stripe</li>
|
|
<li class="text-green-600">✓ Email de confirmation</li>
|
|
<li class="text-green-600">✓ Generation PDF automatique</li>
|
|
<li class="text-green-600">✓ Invitations gratuites</li>
|
|
<li class="text-green-600">✓ Reservation brocantes</li>
|
|
<li class="text-green-600">✓ Vote en ligne</li>
|
|
<li class="text-gray-300">✕ Image par billet</li>
|
|
<li class="text-gray-300">✕ 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">✓ Evenements illimites</li>
|
|
<li class="text-green-400">✓ Design de billets personnalise</li>
|
|
<li class="text-green-400">✓ Image par billet</li>
|
|
<li class="text-green-400">✓ QR code et verification</li>
|
|
<li class="text-green-400">✓ Generation PDF automatique</li>
|
|
<li class="text-green-400">✓ Categories illimitees</li>
|
|
<li class="text-green-400">✓ Invitations gratuites</li>
|
|
<li class="text-green-400">✓ Reservation brocantes</li>
|
|
<li class="text-green-400">✓ Vote en ligne</li>
|
|
<li class="text-green-400">✓ 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>
|
|
</div>
|
|
</section>
|
|
|
|
<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 €</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>
|
|
|
|
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-x-auto" id="commission-simulator">
|
|
<div class="flex flex-wrap items-center gap-4 mb-6">
|
|
<p class="text-sm font-black uppercase tracking-widest text-gray-400">Simulateur de commission</p>
|
|
<div class="flex items-center gap-3 flex-1 min-w-[200px]">
|
|
<label for="rate-slider" class="text-xs font-black uppercase tracking-widest text-gray-500">Taux E-Ticket</label>
|
|
<input type="range" id="rate-slider" min="0" max="3" step="0.1" value="3" class="flex-1 accent-indigo-600 cursor-pointer">
|
|
<span id="rate-display" class="text-xl font-black text-indigo-600 w-16 text-right">3%</span>
|
|
</div>
|
|
</div>
|
|
<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 (<span id="th-rate">3</span>%)</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 id="commission-tbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var prices = [1, 2, 5, 10, 15, 20]
|
|
var slider = document.getElementById('rate-slider')
|
|
var display = document.getElementById('rate-display')
|
|
var thRate = document.getElementById('th-rate')
|
|
var tbody = document.getElementById('commission-tbody')
|
|
|
|
function fmt(v) { return v.toFixed(2).replace('.', ',') + ' \u20AC' }
|
|
|
|
function update() {
|
|
var rate = parseFloat(slider.value)
|
|
display.textContent = rate.toFixed(1) + '%'
|
|
thRate.textContent = rate.toFixed(1)
|
|
var html = ''
|
|
for (var i = 0; i < prices.length; i++) {
|
|
var p = prices[i]
|
|
var ef = p * rate / 100
|
|
var sf = p * 0.015 + 0.25
|
|
var tf = ef + sf
|
|
var net = p - tf
|
|
html += '<tr class="border-b border-gray-100">'
|
|
html += '<td class="py-2 text-left">' + fmt(p) + '</td>'
|
|
html += '<td class="py-2 text-right text-red-600">' + fmt(ef) + '</td>'
|
|
html += '<td class="py-2 text-right text-red-600">' + fmt(sf) + '</td>'
|
|
html += '<td class="py-2 text-right text-red-600">' + fmt(tf) + '</td>'
|
|
html += '<td class="py-2 text-right text-green-600 font-black">' + fmt(Math.max(0, net)) + '</td>'
|
|
html += '</tr>'
|
|
}
|
|
tbody.innerHTML = html
|
|
}
|
|
|
|
slider.addEventListener('input', update)
|
|
update()
|
|
})()
|
|
</script>
|
|
|
|
<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 € de commission</p>
|
|
<p class="text-sm font-bold text-gray-700">Aucune commission E-Ticket ni Stripe sur les billets a 0 € et les invitations.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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">🔒</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">🎟</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">📧</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">📈</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">🛡</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">⚡</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>
|
|
|
|
<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 %}
|