53878e467a
✨ feat(workflow.twig): Ajoute animations AOS pour un effet visuel amélioré. ✨ feat(app.js): Initialise la librairie AOS pour les animations. ➕ chore(package.json): Ajoute AOS comme dépendance. ✨ feat(reserve.js): Initialise AOS pour les animations. ✨ feat(formules.twig): Ajoute animations AOS pour améliorer l'UX. ✨ feat(catalogue.twig): Ajoute animations AOS pour une meilleure UX. ✨ feat(dashboard/base.twig): Améliore la mise en page du dashboard. ✨ feat(base.twig): Ajoute macros pour les liens de navigation. ✨ feat(home.twig): Ajoute animations AOS et macros pour la page d'accueil. ```
134 lines
8.4 KiB
Twig
134 lines
8.4 KiB
Twig
{% extends 'revervation/base.twig' %}
|
|
|
|
{# --- SEO OPTIMISÉ --- #}
|
|
{% block title %}Nos Formules Location | Packs Gonflables & Événements - Ludik Event{% endblock %}
|
|
{% block description %}Découvrez nos packs événementiels clés en main. Location de châteaux gonflables, machines gourmandes et animations regroupés dans nos formules exclusives.{% endblock %}
|
|
|
|
{% block breadcrumb_json %}
|
|
,{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Nos Formules",
|
|
"item": "{{ url('reservation_formules') }}"
|
|
}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<utm-event event="view_formules_list"></utm-event>
|
|
|
|
<div class="min-h-screen bg-gray-50/50 font-sans antialiased pb-20">
|
|
|
|
{# --- HEADER --- #}
|
|
<div class="max-w-7xl mx-auto pt-16 pb-12 px-4 text-center">
|
|
<nav class="flex justify-center space-x-4 text-[10px] mb-8 uppercase tracking-[0.3em] font-black italic" data-aos="fade-down">
|
|
<a href="{{ url('reservation') }}" class="text-slate-600 hover:text-[#fc0e50] transition">ACCUEIL</a>
|
|
<span class="text-slate-500">/</span>
|
|
<span class="text-amber-700 underline decoration-2 underline-offset-4 tracking-[0.3em]">NOS FORMULES</span>
|
|
</nav>
|
|
|
|
<h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6" data-aos="fade-up" data-aos-delay="100">
|
|
PACKS <span class="text-[#fc0e50]">&</span> <span class="text-blue-600">FORMULES</span>
|
|
</h1>
|
|
<p class="max-w-2xl mx-auto text-slate-600 font-bold uppercase text-xs tracking-widest italic" data-aos="fade-up" data-aos-delay="200">
|
|
Simplifiez votre événement avec nos solutions <span class="text-slate-900 underline decoration-[#f39e36] decoration-4">clés en main</span>
|
|
</p>
|
|
</div>
|
|
|
|
{# --- GRILLE DES FORMULES --- #}
|
|
<div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
{% for formule in formules %}
|
|
<div class="group bg-white rounded-[3rem] p-4 border-2 border-slate-900 shadow-[10px_10px_0px_0px_rgba(15,23,42,1)] hover:shadow-[15px_15px_0px_0px_rgba(15,23,42,1)] transition-all duration-300 flex flex-col" data-aos="fade-up">
|
|
|
|
{# Conteneur Image #}
|
|
<div class="relative overflow-hidden rounded-[2.5rem] aspect-[4/5] bg-slate-100 flex items-center justify-center border-b-2 border-slate-900">
|
|
{% if formule.imageName %}
|
|
<img src="{{ vich_uploader_asset(formule, 'imageFile') | imagine_filter('product_card') }}"
|
|
alt="{{ formule.name }}"
|
|
loading="lazy"
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
|
|
{% else %}
|
|
<img src="{{ asset('provider/images/favicon.png') }}" class="w-32 h-32 opacity-20 grayscale">
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Infos & Prix #}
|
|
<div class="mt-8 px-2 pb-4 flex-grow flex flex-col">
|
|
<h3 class="text-3xl font-black text-slate-900 leading-none italic uppercase tracking-tighter group-hover:text-[#fc0e50] transition-colors">
|
|
{{ formule.name }}
|
|
</h3>
|
|
|
|
{# Tags / Avantages #}
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<span class="text-[9px] font-black bg-blue-50 text-blue-600 px-3 py-1 rounded-lg border border-blue-100">Profitez de la livraison offerte dans un rayon de 50 à 70 km autour de Saint-Quentin.</span>
|
|
</div>
|
|
|
|
{# Grille de Tarifs Dégressifs #}
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-3 mt-8 p-4 md:p-3 bg-slate-50 rounded-2xl md:rounded-3xl border-2 border-slate-900/5">
|
|
|
|
<!-- 1 JOUR -->
|
|
<div class="text-center pb-3 md:pb-0 border-b border-slate-200 md:border-b-0">
|
|
<p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">1 JOUR</p>
|
|
<p class="text-base md:text-sm font-black text-slate-900">
|
|
{% if tvaEnabled %}
|
|
{{ (formule.price1j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
|
|
{% else %}
|
|
{{ formule.price1j|format_currency('EUR') }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 2 JOURS -->
|
|
<div class="text-center py-3 md:py-0 border-b border-slate-200 md:border-b-0 md:border-x">
|
|
<p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">2 JOURS</p>
|
|
<p class="text-base md:text-sm font-black text-blue-600 md:text-blue-900">
|
|
{% if tvaEnabled %}
|
|
{{ (formule.price2j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
|
|
{% else %}
|
|
{{ formule.price2j|format_currency('EUR') }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 5 JOURS -->
|
|
<div class="text-center pt-3 md:pt-0">
|
|
<p class="text-[10px] md:text-[8px] font-black text-slate-400 uppercase tracking-wider">5 JOURS</p>
|
|
<p class="text-base md:text-sm font-black text-emerald-600">
|
|
{% if tvaEnabled %}
|
|
{{ (formule.price5j * 1.20)|format_currency('EUR') }} <span class="text-[10px] opacity-75">TTC</span>
|
|
{% else %}
|
|
{{ formule.price5j|format_currency('EUR') }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<a href="{{ path('reservation_formule_show', {slug: formule.slug|default(formule.id)}) }}"
|
|
class="block w-full py-4 bg-[#f39e36] hover:bg-slate-900 text-white text-center rounded-2xl font-black uppercase italic tracking-widest transition-all border-2 border-slate-900 shadow-[4px_4px_0px_0px_rgba(15,23,42,1)] active:translate-y-1 active:shadow-none">
|
|
Réserver ce pack
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-span-full py-32 text-center bg-white border-4 border-dashed border-slate-200 rounded-[4rem]" data-aos="fade-in">
|
|
<div class="text-6xl mb-6">🎈</div>
|
|
<h2 class="text-2xl font-black text-slate-900 uppercase italic">Mise à jour imminente</h2>
|
|
<p class="text-slate-500 font-medium mt-2">Nos formules arrivent d'ici quelques minutes...</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# --- CTA CATALOGUE --- #}
|
|
<div class="mt-20 text-center" data-aos="fade-up">
|
|
<p class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em] mb-6">Besoin de composer votre propre bonheur ?</p>
|
|
<a href="{{ url('reservation_catalogue') }}" class="inline-flex items-center space-x-3 bg-slate-900 text-white px-10 py-5 rounded-full font-black uppercase italic tracking-wider hover:bg-[#fc0e50] transition-all group">
|
|
<span>Accéder au catalogue complet</span>
|
|
<svg class="w-5 h-5 transform group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |