feat(ReserverController): Ajoute la route et la vue pour le workflow de réservation.
 feat(SiteMapListener): Ajoute les URL du catalogue et workflow de réservation au sitemap.
 feat(templates): Crée le template pour la page "Comment réserver".
 feat(templates): Améliore les descriptions SEO des pages catalogue et contact.
```
This commit is contained in:
Serreau Jovann
2026-01-21 13:54:50 +01:00
parent 4651e0d7d2
commit 9597e7ba17
6 changed files with 186 additions and 0 deletions

View File

@@ -63,6 +63,14 @@ class ReserverController extends AbstractController
'products' => $productRepository->findAll(),
]);
}
#[Route('/reservation/comment-reserver', name: 'reservation_workflow')]
public function revervationWorkfkow(): Response
{
return $this->render('revervation/workflow.twig',[
]);
}
#[Route('/reservation/produit/{id}', name: 'reservation_product_show')]
public function revervationShowProduct(string $id, ProductRepository $productRepository): Response
{

View File

@@ -75,6 +75,14 @@ class SiteMapListener implements EventSubscriberInterface
$urlContainer->addUrl(new UrlConcrete($url, $t, $freq, 0.5), 'reservation');
}
$reservationUrl = $urlGenerator->generate('reservation_catalogue', [], UrlGeneratorInterface::ABSOLUTE_URL);
$catUrl = new UrlConcrete($reservationUrl, $t, UrlConcrete::CHANGEFREQ_DAILY, 0.7);
$urlContainer->addUrl($catUrl, 'reservation');
$reservationUrl = $urlGenerator->generate('reservation_workflow', [], UrlGeneratorInterface::ABSOLUTE_URL);
$workFlow = new UrlConcrete($reservationUrl, $t, UrlConcrete::CHANGEFREQ_MONTHLY, 0.5);
$urlContainer->addUrl($workFlow, 'reservation');
// --- 2. PRODUITS & IMAGES ---
foreach ($this->productRepository->findAll() as $product) {
$productUrl = $urlGenerator->generate(

View File

@@ -119,6 +119,7 @@
<div class="hidden md:flex items-center space-x-8">
<a href="{{ path('reservation') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Accueil</a>
<a href="{{ path('reservation_catalogue') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Catalogue</a>
<a href="{{ path('reservation_workflow') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Comment réserver ?</a>
<a href="{{ path('reservation_contact') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Contact</a>
<a href="{{ path('reservation_search') }}" class="p-2 text-gray-500 hover:text-blue-600 transition-colors" aria-label="Rechercher">

View File

@@ -1,6 +1,11 @@
{% extends 'revervation/base.twig' %}
{% block title %}Catalogue Ludikevent - Location de structures gonflables{% endblock %}
{% block description %}
Explorez l'univers Ludikevent : location de structures gonflables (3-15 ans, 2-7 ans),
parcours sportifs, barnums et matériel alimentaire. Trouvez l'animation parfaite
pour vos événements avec nos tarifs transparents et notre service de livraison sur mesure.
{% endblock %}
{% block breadcrumb_json %}
,{
"@type": "ListItem",

View File

@@ -9,6 +9,11 @@
"item": "{{ path('reservation_contact') }}"
}
{% endblock %}
{% block description %}
Besoin d'un devis ou d'une info pour votre événement ? Contactez Ludik Event,
expert en location de structures gonflables dans l'Aisne (02) et les Hauts-de-France.
Réponse en moins de 2 heures pour vos projets de châteaux gonflables et animations.
{% endblock %}
{% block body %}
<utm-event event="view_contact"></utm-event>

View File

@@ -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 %}