admin/ludikevent_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

```

Browse Source 
✨ feat(templates): Ajoute et utilise les traductions pour les pages search, workflow et rgpd
```
This commit is contained in:
Serreau Jovann
2026-01-28 16:36:00 +01:00
parent 24c35a50bc
commit 5361fa25d8
4 changed files with 236 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
templates/revervation/rgpd.twig
View File

@@ -1,15 +1,17 @@
{% extends 'revervation/base.twig' %}
{% block title %}Protection des Données & RGPD | Ludik Event - Confiance Client{% endblock %}
{% block description %}Consultez la politique de confidentialité de Ludik Event. Découvrez comment nous protégeons vos données lors de vos réservations de structures gonflables.{% endblock %}
{% block title %}{{ 'rgpd.seo.title'|trans }}{% endblock %}
{% block description %}{{ 'rgpd.seo.description'|trans }}{% endblock %}
{% block breadcrumb_json %}
,{
"@type": "ListItem",
"position": 1,
"name": "Règlement Général sur la Protection des Données (RGPD)",
"name": "{{ 'rgpd.breadcrumb'|trans }}",
"item": "{{ url('reservation_rgpd') }}"
}
{% endblock %}
{% block body %}
<div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">
@@ -18,13 +20,13 @@
<div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
<div>
<h1 class="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
Règlement Général sur la Protection des Données (RGPD)
{{ 'rgpd.header.title'|trans }}
</h1>
<p class="mt-4 text-slate-500 font-medium italic">Engagement pour la sécurité et la confidentialité de vos données.</p>
<p class="mt-4 text-slate-500 font-medium italic">{{ 'rgpd.header.subtitle'|trans }}</p>
</div>
<div class="text-right">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Mise à jour officielle</p>
<p class="text-sm font-bold text-slate-900 italic">23 Avril 2025</p>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">{{ 'rgpd.header.update_label'|trans }}</p>
<p class="text-sm font-bold text-slate-900 italic">{{ 'rgpd.header.update_date'|trans }}</p>
</div>
</div>
</div>
@@ -33,144 +35,122 @@
<div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
{# 1. Introduction & Bases Légales (Large) #}
{# 1. Introduction #}
<div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-center">
<span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4">01. Fondements Juridiques</span>
<span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4">{{ 'rgpd.bento.intro.badge'|trans }}</span>
<p class="text-base md:text-lg text-slate-700 leading-relaxed italic">
Conformément au <strong class="text-slate-900 italic">RGPD (Art. 6)</strong>, vos données sont traitées sur la base de votre consentement, de l'exécution d'un contrat ou de nos intérêts légitimes. Nous garantissons une collecte transparente pour nos services en ligne et interactions directes.
{{ 'rgpd.bento.intro.content'|trans|raw }}
</p>
</div>
{# 2. Chiffrement Haute Sécurité (Focus Technique) #}
{# 2. Encryption #}
<div class="md:col-span-4 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl flex flex-col items-center justify-center text-center group relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 to-indigo-500"></div>
<div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="text-3xl">🔑</span>
</div>
<h3 class="text-white font-black uppercase text-xs tracking-widest mb-2">Chiffrement AES-256</h3>
<p class="text-[10px] text-slate-400 italic leading-relaxed">
Rotation automatique des clés toutes les 24h. Données inaccessibles pour l'hébergeur et le propriétaire.
</p>
<h3 class="text-white font-black uppercase text-xs tracking-widest mb-2">{{ 'rgpd.bento.security.title'|trans }}</h3>
<p class="text-[10px] text-slate-400 italic leading-relaxed">{{ 'rgpd.bento.security.desc'|trans }}</p>
</div>
{# 3. Les 3 Catégories de Données (Full Width) #}
{# 3. Catégories #}
<div class="md:col-span-12 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-amber-600 text-xl mb-2">✍️</p>
<h4 class="text-xs font-black uppercase mb-2">Données communiquées</h4>
<p class="text-[11px] text-slate-500 italic">Nom, adresse, email, téléphone, date de naissance, données de paiement.</p>
<h4 class="text-xs font-black uppercase mb-2">{{ 'rgpd.bento.cat1.title'|trans }}</h4>
<p class="text-[11px] text-slate-500 italic">{{ 'rgpd.bento.cat1.desc'|trans }}</p>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-indigo-600 text-xl mb-2">🤖</p>
<h4 class="text-xs font-black uppercase mb-2">Moyens automatisés</h4>
<p class="text-[11px] text-slate-500 italic">IP, UDID, Cookies, Géolocalisation (soumise à autorisation), historique de navigation.</p>
<h4 class="text-xs font-black uppercase mb-2">{{ 'rgpd.bento.cat2.title'|trans }}</h4>
<p class="text-[11px] text-slate-500 italic">{{ 'rgpd.bento.cat2.desc'|trans }}</p>
</div>
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
<p class="text-emerald-600 text-xl mb-2">🌐</p>
<h4 class="text-xs font-black uppercase mb-2">Autres sources</h4>
<p class="text-[11px] text-slate-500 italic">Réseaux sociaux, bases publiques et partenaires marketing.</p>
<h4 class="text-xs font-black uppercase mb-2">{{ 'rgpd.bento.cat3.title'|trans }}</h4>
<p class="text-[11px] text-slate-500 italic">{{ 'rgpd.bento.cat3.desc'|trans }}</p>
</div>
</div>
{# 4. Finalités du traitement (Medium - Indigo) #}
{# 4. Pourquoi #}
<div class="md:col-span-7 bg-indigo-50 p-8 rounded-[2.5rem] border border-indigo-100">
<h3 class="text-xs font-black text-indigo-900 uppercase tracking-widest mb-6 italic">Pourquoi collectons-nous ?</h3>
<h3 class="text-xs font-black text-indigo-900 uppercase tracking-widest mb-6 italic">{{ 'rgpd.bento.purpose.title'|trans }}</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8">
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Gestion des commandes</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Support client</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Sécurité des réseaux</p>
</div>
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Marketing personnalisé</p>
</div>
{% for i in 1..4 %}
<div class="flex items-center gap-3">
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">{{ ('rgpd.bento.purpose.item' ~ i)|trans }}</p>
</div>
{% endfor %}
</div>
</div>
{# 5. Vos Droits (Square - Amber) #}
{# 5. Droits #}
<div class="md:col-span-5 bg-amber-50 p-8 rounded-[2.5rem] border border-amber-100 flex flex-col justify-between">
<div>
<h3 class="text-xs font-black text-amber-900 uppercase tracking-widest mb-4 italic">Vos Droits RGPD</h3>
<p class="text-[11px] text-amber-800 italic leading-relaxed">
Accès, rectification, effacement, opposition, portabilité et retrait de consentement.
</p>
<h3 class="text-xs font-black text-amber-900 uppercase tracking-widest mb-4 italic">{{ 'rgpd.bento.rights.title'|trans }}</h3>
<p class="text-[11px] text-amber-800 italic leading-relaxed">{{ 'rgpd.bento.rights.desc'|trans }}</p>
</div>
<div class="mt-4">
<p class="text-[9px] font-black text-amber-900/50 uppercase mb-2">Contact Délégué :</p>
<p class="text-sm font-black text-amber-900 italic">contact@ludikevent.fr</p>
<p class="text-[9px] font-black text-amber-900/50 uppercase mb-2">{{ 'rgpd.bento.rights.contact_label'|trans }}</p>
<p class="text-sm font-black text-amber-900 italic">{{ 'contact.email'|trans }}</p>
</div>
</div>
{# 6. Partage & Livraison (Medium) #}
{# 6. Partage #}
<div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Partage & Livraison</h3>
<p class="text-[11px] text-slate-500 italic leading-relaxed mb-4">
Nous ne vendons aucune donnée. Vos informations sont partagées uniquement avec nos prestataires techniques et de livraison (prénom, nom, téléphone, adresse) pour honorer vos commandes.
</p>
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">{{ 'rgpd.bento.sharing.title'|trans }}</h3>
<p class="text-[11px] text-slate-500 italic leading-relaxed mb-4">{{ 'rgpd.bento.sharing.desc'|trans }}</p>
<div class="flex gap-2">
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Logistique</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Paiement</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Cloud EU</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">{{ 'rgpd.tags.logistics'|trans }}</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">{{ 'rgpd.tags.payment'|trans }}</span>
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">{{ 'rgpd.tags.cloud'|trans }}</span>
</div>
</div>
{# 7. Additif Technique SITECONSEIL (Large) #}
{# 7. Expertise Technique #}
<div class="md:col-span-6 bg-slate-50 p-8 rounded-[2.5rem] border border-slate-200 flex flex-col justify-between">
<div>
<h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 italic">Expertise Technique (SiteConseil)</h3>
<h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 italic">{{ 'rgpd.bento.tech.badge'|trans }}</h3>
<div class="space-y-3">
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">Infrastructure</span>
<span class="text-slate-500 italic">Google Cloud Platform (GCP)</span>
<span class="font-bold text-slate-700 italic">{{ 'rgpd.bento.tech.infra_label'|trans }}</span>
<span class="text-slate-500 italic">{{ 'rgpd.bento.tech.infra_val'|trans }}</span>
</div>
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">Certificats</span>
<span class="text-slate-500 italic">TLS/SSL (Cloudflare & Let's Encrypt)</span>
<span class="font-bold text-slate-700 italic">{{ 'rgpd.bento.tech.ssl_label'|trans }}</span>
<span class="text-slate-500 italic">{{ 'rgpd.bento.tech.ssl_val'|trans }}</span>
</div>
<div class="flex justify-between items-center text-[11px]">
<span class="font-bold text-slate-700 italic">DPO</span>
<span class="text-slate-500 italic">Philippe LEGRAND (03 23 05 62 43)</span>
<span class="font-bold text-slate-700 italic">{{ 'rgpd.bento.tech.dpo_label'|trans }}</span>
<span class="text-slate-500 italic">{{ 'rgpd.bento.tech.dpo_val'|trans }}</span>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-slate-200">
<p class="text-[9px] font-black text-indigo-500 uppercase italic">Contact Technique : rgpd@siteconseil.fr</p>
<p class="text-[9px] font-black text-indigo-500 uppercase italic">{{ 'rgpd.bento.tech.contact'|trans }}</p>
</div>
</div>
{# 8. Cookies & Localisation (Small) #}
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Cookies</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">
Utilisés pour vous reconnaître, mesurer la performance et sécuriser le site. Désactivables via votre navigateur.
</p>
{# 8, 9, 10 - Footer Bento #}
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">{{ 'rgpd.bento.cookies.title'|trans }}</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">{{ 'rgpd.bento.cookies.desc'|trans }}</p>
</div>
{# 9. Conservation & Enfants (Small) #}
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Conservation</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">
Données conservées <strong class="text-slate-900 italic">3 ans</strong> après votre dernière activité. Pas de collecte < 15 ans sans accord parental.
</p>
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">{{ 'rgpd.bento.retention.title'|trans }}</h3>
<p class="text-[10px] text-slate-500 italic leading-relaxed">{{ 'rgpd.bento.retention.desc'|trans|raw }}</p>
</div>
{# 10. Contact Ludik Event (Small - Highlight) #}
<div class="md:col-span-4 bg-indigo-600 p-8 rounded-[2.5rem] text-white flex flex-col justify-between">
<h3 class="text-xs font-black uppercase tracking-widest italic">Siège Social</h3>
<h3 class="text-xs font-black uppercase tracking-widest italic">{{ 'rgpd.bento.office.title'|trans }}</h3>
<address class="not-italic">
<p class="text-[11px] font-bold">LUDIK EVENT</p>
<p class="text-[11px] italic text-indigo-100">6, rue du Château</p>
<p class="text-[11px] italic text-indigo-100">02800 DANIZY</p>
<p class="text-[11px] font-bold">{{ 'company.name'|trans }}</p>
<p class="text-[11px] italic text-indigo-100">{{ 'company.address'|trans }}</p>
<p class="text-[11px] italic text-indigo-100">{{ 'company.zip_city'|trans }}</p>
</address>
<p class="text-[11px] font-black uppercase mt-2 tracking-widest">lilian@ludikevent.fr</p>
<p class="text-[11px] font-black uppercase mt-2 tracking-widest">{{ 'contact.email_alt'|trans }}</p>
</div>
</div>
@@ -178,10 +158,10 @@
{# --- FOOTER LEGAL --- #}
<div class="max-w-6xl mx-auto px-4 mt-16 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.5em]">Ludik Event © 2026 - Conforme CNIL</p>
<p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.5em]">{{ 'rgpd.footer.copy'|trans }}</p>
<div class="flex gap-6">
<a href="{{ path('reservation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest transition-colors flex items-center gap-2">
🏠 Accueil
🏠 {{ 'nav.home'|trans }}
</a>
</div>
</div>

34
templates/revervation/search.twig
View File

@@ -1,12 +1,12 @@
{% extends 'revervation/base.twig' %}
{% block title %}Résultats de recherche - Ludik Event{% endblock %}
{% block title %}{{ 'search.seo.title'|trans }}{% endblock %}
{% block extra_header %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}
{% block description %}Trouvez rapidement le château gonflable ou l'animation idéale pour votre événement dans l'Aisne.{% endblock %}
{% block description %}{{ 'search.seo.description'|trans }}{% endblock %}
{% block canonical %}
<link rel="canonical" href="{{ url('reservation_search') }}">
@@ -19,14 +19,14 @@
{# Header de recherche #}
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl mb-4">
Résultats de recherche
{{ 'search.header.title'|trans }}
</h1>
<p class="text-lg text-gray-600 mb-8">Trouvez la structure idéale pour votre événement dans l'Aisne.</p>
<p class="text-lg text-gray-600 mb-8">{{ 'search.header.subtitle'|trans }}</p>
<form action="{{ url('reservation_search') }}" method="get" class="max-w-2xl mx-auto relative">
<input type="text" name="q" value="{{ app.request.query.get('q') }}"
class="w-full pl-5 pr-12 py-4 rounded-2xl border-none shadow-lg focus:ring-2 focus:ring-blue-500 transition-all text-gray-700"
placeholder="Rechercher un château, un toboggan...">
placeholder="{{ 'search.form.placeholder'|trans }}">
<button type="submit" class="absolute right-3 top-3 bg-blue-600 text-white p-2 rounded-xl hover:bg-blue-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -39,11 +39,10 @@
{% if products is defined and products|length > 0 %}
<div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4 auto-rows-[200px]">
{% for product in products %}
{# Chaque card utilise des spans différents pour créer l'effet Bento #}
<div class="group relative bg-white rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100
md:col-span-2 md:row-span-2">
{# Image de fond avec overlay #}
{# Image de fond #}
<div class="absolute inset-0 z-0">
<img src="{{ product.image }}" alt="{{ product.name }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
@@ -55,12 +54,12 @@
<div>
<h3 class="text-xl font-bold text-white mb-1">{{ product.name }}</h3>
<div class="flex gap-2">
<span class="bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-lg">
{{ product.price1day }}€ / jour
</span>
<span class="bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-lg">
{{ product.price1day }}€ / {{ 'search.product.day'|trans }}
</span>
<span class="bg-white/20 backdrop-blur-md text-white text-xs px-2 py-1 rounded-lg">
Caution: {{ product.caution }}€
</span>
{{ 'search.product.caution'|trans }}: {{ product.caution }}€
</span>
</div>
</div>
<a href="{{ product.link }}" class="bg-white p-3 rounded-2xl hover:bg-blue-50 transition-colors shadow-lg">
@@ -70,11 +69,10 @@
</a>
</div>
{# Détails supplémentaires visibles uniquement sur les grandes dalles Bento #}
{% if loop.index0 % 5 == 0 %}
<div class="mt-4 text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Lendemain supplémentaire : +{{ product.priceSup }}€ <br>
Tarif total à partir de {{ product.price }}€
{{ 'search.product.extra_day'|trans }}: +{{ product.priceSup }}€ <br>
{{ 'search.product.total_from'|trans }} {{ product.price }}€
</div>
{% endif %}
</div>
@@ -85,10 +83,10 @@
{# Empty State #}
<div class="bg-white rounded-3xl p-12 text-center shadow-sm border border-gray-100">
<div class="text-6xl mb-4">🔎</div>
<h3 class="text-2xl font-bold text-gray-900">Aucun résultat pour cette recherche</h3>
<p class="text-gray-500 mt-2">Essayez d'élargir vos critères ou parcourez nos catégories.</p>
<h3 class="text-2xl font-bold text-gray-900">{{ 'search.empty.title'|trans }}</h3>
<p class="text-gray-500 mt-2">{{ 'search.empty.subtitle'|trans }}</p>
<a href="{{ url('reservation_catalogue') }}" class="mt-6 inline-block bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all">
Voir tout le catalogue
{{ 'search.empty.button'|trans }}
</a>
</div>
{% endif %}

57
templates/revervation/workflow.twig
View File

@@ -1,13 +1,13 @@
{% extends 'revervation/base.twig' %}
{% block title %}Comment réserver ? | Guide de Location Ludik Event Aisne{% endblock %}
{% block description %}Louer un château gonflable dans le 02 n'a jamais été aussi simple. Découvrez nos 4 étapes clés : choix, devis express sous 2h, signature en ligne et livraison.{% endblock %}
{% block title %}{{ 'workflow.seo.title'|trans }}{% endblock %}
{% block description %}{{ 'workflow.seo.description'|trans }}{% endblock %}
{% block breadcrumb_json %}
,{
"@type": "ListItem",
"position": 1,
"name": "Comment réserver",
"name": "{{ 'workflow.breadcrumb'|trans }}",
"item": "{{ url('reservation_workflow') }}"
}
{% endblock %}
@@ -17,18 +17,17 @@
{# --- 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>
<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">
{{ 'workflow.header.badge'|trans }}
</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>
{{ 'workflow.header.title_part1'|trans }} <br><span class="text-blue-600">{{ 'workflow.header.title_part2'|trans }}</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>
<p class="text-xl text-slate-500 font-medium italic leading-relaxed">{{ 'workflow.header.subtitle'|trans }}</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">
@@ -36,8 +35,8 @@
{# 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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">{{ 'workflow.step1.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step1.desc'|trans }}</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>
@@ -52,18 +51,18 @@
<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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-amber-500 transition-colors">{{ 'workflow.step2.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step2.desc'|trans }}</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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">{{ 'workflow.step3.title'|trans }}</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>
{{ 'workflow.step3.desc'|trans }}
<span class="block mt-2 text-blue-600 font-bold italic">{{ 'workflow.step3.highlight'|trans }}</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">
@@ -79,16 +78,16 @@
<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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-indigo-600 transition-colors">{{ 'workflow.step4.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step4.desc'|trans }}</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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-rose-500 transition-colors">{{ 'workflow.step5.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step5.desc'|trans|raw }}</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>
@@ -103,18 +102,18 @@
<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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-violet-600 transition-colors">{{ 'workflow.step6_7.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step6_7.desc'|trans|raw }}</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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-emerald-500 transition-colors">{{ 'workflow.step8_9.title'|trans }}</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>
{{ 'workflow.step8_9.desc'|trans }}
<span class="block mt-2 text-emerald-600 font-bold">{{ 'workflow.step8_9.highlight'|trans }}</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">
@@ -130,8 +129,8 @@
<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>
<h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4">{{ 'workflow.step10.title'|trans }}</h2>
<p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step10.desc'|trans }}</p>
</div>
</div>
@@ -142,9 +141,9 @@
<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>
<h3 class="text-3xl md:text-5xl font-black text-white uppercase italic mb-8">{{ 'workflow.cta.title'|trans|raw }}</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
{{ 'workflow.cta.button'|trans }}
<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>

128
translations/messages.fr.yaml
View File

@@ -49,3 +49,131 @@ footer:
cgv: "CGV"
rgpd: "RGPD"
cookies: "Cookies"
workflow:
seo:
title: "Comment réserver ? | Guide de Location Ludik Event Aisne"
description: "Louer un château gonflable dans le 02 n'a jamais été aussi simple. Découvrez nos 4 étapes clés : choix, devis express sous 2h, signature en ligne et livraison."
breadcrumb: "Comment réserver"
header:
badge: "LE GUIDE COMPLET ⚡"
title_part1: "VOTRE ÉVÉNEMENT"
title_part2: "A TOUT PRIX !"
subtitle: "De la sélection au jour J, on vous accompagne pas à pas."
step1:
title: "1. Choisissez vos pépites"
desc: "Parcourez le catalogue et flashez sur nos structures gonflables ou jeux. Châteaux, toboggans... faites votre choix !"
step2:
title: "2. Bloquez vos dates"
desc: "Entrez votre période. Plus vous louez longtemps, plus le tarif journalier baisse. Économique et Ludik !"
step3:
title: "3. Infos & Livraison"
desc: "Remplissez vos coordonnées et le lieu."
highlight: "La livraison et l'installation sont sur demande et facturées selon la distance."
step4:
title: "4. Signez en ligne"
desc: "Validez instantanément votre bon de réservation en le signant numériquement. Zéro papier, 100% rapide."
step5:
title: "5. Versez les arrhes"
desc: "Réglez <strong>25% d'arrhes</strong> en ligne pour bloquer le matériel. Votre réservation est alors confirmée !"
step6_7:
title: "6 & 7. Rappel & Caution"
desc: "À 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."
step8_9:
title: "8 & 9. Livraison & Solde"
desc: "Le jour J, nous installons le matériel."
highlight: "Réglez le solde de votre réservation sur place auprès de notre employé ou via le lien reçu par mail !"
step10:
title: "10. On débriefe !"
desc: "À 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é."
cta:
title: "Prêt à mettre <span class='text-blue-500'>l'ambiance ?</span>"
button: "VOIR LE CATALOGUE"
search:
seo:
title: "Résultats de recherche - Ludik Event"
description: "Trouvez rapidement le château gonflable ou l'animation idéale pour votre événement dans l'Aisne."
header:
title: "Résultats de recherche"
subtitle: "Trouvez la structure idéale pour votre événement dans l'Aisne."
form:
placeholder: "Rechercher un château, un toboggan..."
product:
day: "jour"
caution: "Caution"
extra_day: "Lendemain supplémentaire"
total_from: "Tarif total à partir de"
empty:
title: "Aucun résultat pour cette recherche"
subtitle: "Essayez d'élargir vos critères ou parcourez nos catégories."
button: "Voir tout le catalogue"
rgpd:
seo:
title: "Protection des Données & RGPD | Ludik Event - Confiance Client"
description: "Consultez la politique de confidentialité de Ludik Event. Découvrez comment nous protégeons vos données lors de vos réservations de structures gonflables."
breadcrumb: "RGPD"
header:
title: "Règlement Général sur la Protection des Données (RGPD)"
subtitle: "Engagement pour la sécurité et la confidentialité de vos données."
update_label: "Mise à jour officielle"
update_date: "23 Avril 2025"
bento:
intro:
badge: "01. Fondements Juridiques"
content: "Conformément au <strong class='text-slate-900 italic'>RGPD (Art. 6)</strong>, vos données sont traitées sur la base de votre consentement, de l'exécution d'un contrat ou de nos intérêts légitimes. Nous garantissons une collecte transparente pour nos services en ligne et interactions directes."
security:
title: "Chiffrement Haute Sécurité"
desc: "Rotation automatique des clés toutes les 24h. Données inaccessibles pour l'hébergeur et le propriétaire."
cat1:
title: "Données communiquées"
desc: "Nom, adresse, email, téléphone, date de naissance, données de paiement."
cat2:
title: "Moyens automatisés"
desc: "IP, UDID, Cookies, Géolocalisation (soumise à autorisation), historique de navigation."
cat3:
title: "Autres sources"
desc: "Réseaux sociaux, bases publiques et partenaires marketing."
purpose:
title: "Pourquoi collectons-nous ?"
item1: "Gestion des commandes"
item2: "Support client"
item3: "Sécurité des réseaux"
item4: "Marketing personnalisé"
rights:
title: "Vos Droits RGPD"
desc: "Accès, rectification, effacement, opposition, portabilité et retrait de consentement."
contact_label: "Contact Délégué :"
sharing:
title: "Partage & Livraison"
desc: "Nous ne vendons aucune donnée. Vos informations sont partagées uniquement avec nos prestataires techniques et de livraison pour honorer vos commandes."
tech:
badge: "Expertise Technique (SiteConseil)"
infra_label: "Infrastructure"
infra_val: "Google Cloud Platform (GCP)"
ssl_label: "Certificats"
ssl_val: "TLS/SSL (Cloudflare & Let's Encrypt)"
dpo_label: "DPO"
dpo_val: "Philippe LEGRAND (03 23 05 62 43)"
contact: "Contact Technique : rgpd@siteconseil.fr"
cookies:
title: "Cookies"
desc: "Utilisés pour vous reconnaître, mesurer la performance et sécuriser le site. Désactivables via votre navigateur."
retention:
title: "Conservation"
desc: "Données conservées <strong class='text-slate-900 italic'>3 ans</strong> après votre dernière activité. Pas de collecte < 15 ans sans accord parental."
office:
title: "Siège Social"
tags:
logistics: "Logistique"
payment: "Paiement"
cloud: "Cloud EU"
footer:
copy: "Ludik Event © 2026 - Conforme CNIL"
company:
name: "LUDIK EVENT"
address: "6, rue du Château"
zip_city: "02800 DANIZY"
contact:
email: "contact@ludikevent.fr"
email_alt: "lilian@ludikevent.fr"