|
|
|
|
@@ -0,0 +1,159 @@
|
|
|
|
|
{% extends 'revervation/base.twig' %}
|
|
|
|
|
|
|
|
|
|
{% block title %}Comment réserver ? - Location Ludikevent{% endblock %}
|
|
|
|
|
{% block description %}
|
|
|
|
|
Découvrez comment réserver votre structure gonflable chez Ludikevent en 10 étapes simples.
|
|
|
|
|
De la sélection à la livraison, profitez d'un processus clair : signature en ligne,
|
|
|
|
|
paiement sécurisé des arrhes et suivi personnalisé pour un événement réussi.
|
|
|
|
|
{% endblock %}
|
|
|
|
|
{% block breadcrumb_json %}
|
|
|
|
|
,{
|
|
|
|
|
"@type": "ListItem",
|
|
|
|
|
"position": 1,
|
|
|
|
|
"name": "Comment réserver",
|
|
|
|
|
"item": "{{ absolute_url(path('reservation_workflow')) }}"
|
|
|
|
|
}
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
|
|
{% block body %}
|
|
|
|
|
<div class="min-h-screen bg-white font-sans antialiased pb-20">
|
|
|
|
|
|
|
|
|
|
{# --- HEADER --- #}
|
|
|
|
|
<div class="max-w-4xl mx-auto pt-20 pb-16 px-4 text-center">
|
|
|
|
|
<span class="inline-block bg-blue-100 text-blue-600 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-6">
|
|
|
|
|
LE GUIDE COMPLET ⚡
|
|
|
|
|
</span>
|
|
|
|
|
<h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-6">
|
|
|
|
|
VOTRE ÉVÉNEMENT <br><span class="text-blue-600">A TOUT PRIX !</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<p class="text-xl text-slate-500 font-medium italic leading-relaxed">De la sélection au jour J, on vous accompagne pas à pas.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# --- TIMELINE --- #}
|
|
|
|
|
<div class="max-w-5xl mx-auto px-4 relative">
|
|
|
|
|
|
|
|
|
|
<div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-slate-100 -translate-x-1/2 z-0"></div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-24 relative z-10">
|
|
|
|
|
|
|
|
|
|
{# 1. SELECTION #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 text-center md:text-right order-2 md:order-1">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">1. Choisissez vos pépites</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">Parcourez le catalogue et flashez sur nos structures gonflables ou jeux. Châteaux, toboggans... faites votre choix !</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-24 h-24 bg-blue-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-blue-200 order-1 md:order-2 shrink-0 transform group-hover:rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 hidden md:block order-3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 2. DATES #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 hidden md:block"></div>
|
|
|
|
|
<div class="w-24 h-24 bg-amber-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-amber-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 00-2 2z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 text-center md:text-left">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-amber-500 transition-colors">2. Bloquez vos dates</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">Entrez votre période. Plus vous louez longtemps, plus le tarif journalier baisse. Économique et Ludik !</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 3. DETAILS & LIVRAISON #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 text-center md:text-right order-2 md:order-1">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">3. Infos & Livraison</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">
|
|
|
|
|
Remplissez vos coordonnées et le lieu.
|
|
|
|
|
<span class="block mt-2 text-blue-600 font-bold italic">La livraison et l'installation sont sur demande et facturées selon la distance.</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-24 h-24 bg-blue-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-blue-200 order-1 md:order-2 shrink-0 transform group-hover:rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 hidden md:block order-3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 4. SIGNATURE #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 hidden md:block"></div>
|
|
|
|
|
<div class="w-24 h-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-indigo-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 text-center md:text-left">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-indigo-600 transition-colors">4. Signez en ligne</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">Validez instantanément votre bon de réservation en le signant numériquement. Zéro papier, 100% rapide.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 5. ARRHES #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 text-center md:text-right order-2 md:order-1">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-rose-500 transition-colors">5. Versez les arrhes</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">Réglez <strong>25% d'arrhes</strong> en ligne pour bloquer le matériel. Votre réservation est alors confirmée !</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-24 h-24 bg-rose-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-rose-200 order-1 md:order-2 shrink-0 transform group-hover:scale-110 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 hidden md:block order-3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 6 & 7. RAPPEL & CAUTION #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 hidden md:block"></div>
|
|
|
|
|
<div class="w-24 h-24 bg-violet-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-violet-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 text-center md:text-left">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-violet-600 transition-colors">6 & 7. Rappel & Caution</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">À J-7, vous recevez un mail de rappel avec le <strong>lien pour payer la caution</strong>. À J-3, nous confirmons les derniers détails logistiques.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 8 & 9. RECEPTION & SOLDE #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 text-center md:text-right order-2 md:order-1">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-emerald-500 transition-colors">8 & 9. Livraison & Solde</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">
|
|
|
|
|
Le jour J, nous installons le matériel.
|
|
|
|
|
<span class="block mt-2 text-emerald-600 font-bold">Réglez le solde de votre réservation sur place auprès de notre employé ou via le lien reçu par mail !</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-24 h-24 bg-emerald-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-emerald-200 order-1 md:order-2 shrink-0 transform group-hover:scale-110 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 hidden md:block order-3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# 10. POST-LOCATION #}
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12 group">
|
|
|
|
|
<div class="flex-1 hidden md:block"></div>
|
|
|
|
|
<div class="w-24 h-24 bg-blue-900 rounded-[2rem] flex items-center justify-center shadow-xl shadow-slate-300 shrink-0 transform group-hover:rotate-12 transition-transform">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-7.714 2.143L11 21l-2.286-6.857L1 12l7.714-2.143L11 3z" /></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1 text-center md:text-left">
|
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4">10. On débriefe !</h2>
|
|
|
|
|
<p class="text-slate-500 font-medium leading-relaxed">À J+2, recevez un merci ! Partagez vos photos et laissez votre avis sur Google ou Facebook via le lien direct. Votre sourire est notre priorité.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{# --- CTA FINAL --- #}
|
|
|
|
|
<div class="max-w-4xl mx-auto mt-32 px-4">
|
|
|
|
|
<div class="bg-slate-900 rounded-[3rem] p-12 text-center relative overflow-hidden shadow-2xl">
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<h3 class="text-3xl md:text-5xl font-black text-white uppercase italic mb-8">Prêt à mettre <span class="text-blue-500">l'ambiance ?</span></h3>
|
|
|
|
|
<a href="{{ path('reservation_catalogue') }}" class="inline-flex items-center gap-4 bg-white text-slate-900 px-10 py-5 rounded-2xl font-black uppercase text-xs tracking-widest hover:bg-blue-600 hover:text-white transition-all transform hover:scale-105">
|
|
|
|
|
VOIR LE CATALOGUE
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-blue-600/20 rounded-full blur-3xl"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
{% endblock %}
|