129 lines
7.7 KiB
Twig
129 lines
7.7 KiB
Twig
{% 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",
|
|
"position": 1,
|
|
"name": "Catalogue",
|
|
"item": "{{ path('reservation_catalogue') }}"
|
|
}
|
|
{% endblock %}
|
|
{% block body %}
|
|
<utm-event event="view_catalogue"></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-8 px-4 text-center">
|
|
<nav class="flex justify-center space-x-4 text-[10px] mb-8 uppercase tracking-[0.3em] font-black italic">
|
|
<a href="{{ url('reservation') }}" class="text-slate-400 hover:text-blue-600 transition">ACCUEIL</a>
|
|
<span class="text-slate-300">/</span>
|
|
<span class="text-amber-500 underline decoration-2 underline-offset-4">Catalogue</span>
|
|
</nav>
|
|
|
|
<h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6">
|
|
Tout notre <span class="text-blue-600">Univers</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{# --- FILTRES (STICKY) --- #}
|
|
<div class="sticky top-0 z-40 bg-gray-50/90 backdrop-blur-md border-b border-slate-200 mb-12">
|
|
<div class="max-w-7xl mx-auto px-4 py-4">
|
|
<div class="flex flex-wrap justify-center gap-2 md:gap-3">
|
|
<button data-filter="all" class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase shadow-sm bg-slate-900 text-white border border-slate-900">
|
|
Tout voir
|
|
</button>
|
|
|
|
{% set categories_list = [
|
|
{'id': '2-7 ans', 'label': '2-7 ANS', 'hover': 'hover:border-amber-500 hover:text-amber-500'},
|
|
{'id': '3-15 ans', 'label': '3-15 ANS', 'hover': 'hover:border-blue-600 hover:text-blue-600'},
|
|
{'id': '3-99 ans', 'label': '3-99 ANS', 'hover': 'hover:border-indigo-600 hover:text-indigo-600'},
|
|
{'id': 'barnums', 'label': 'BARNUMS', 'hover': 'hover:border-slate-800 hover:text-slate-800'},
|
|
{'id': 'alimentaire', 'label': 'ALIMENTAIRE', 'hover': 'hover:border-rose-500 hover:text-rose-500'},
|
|
{'id': 'options', 'label': 'OPTIONS', 'hover': 'hover:border-emerald-500 hover:text-emerald-500'}
|
|
] %}
|
|
|
|
{% for cat in categories_list %}
|
|
<button data-filter="{{ cat.id }}"
|
|
class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase bg-white text-slate-400 border border-slate-200 {{ cat.hover }}">
|
|
{{ cat.label }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- GRILLE DE PRODUITS (4 COLONNES) --- #}
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
{# Mobile: 2 col | Tablette: 3 col | Desktop: 4 col #}
|
|
<div id="product-grid" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-12">
|
|
|
|
{% for product in products %}
|
|
<div class="product-item group transition-all duration-500" data-category="{{ product.category|lower }}">
|
|
<a href="{{ path('reservation_product_show', {id: product.slug}) }}" class="block">
|
|
|
|
{# IMAGE #}
|
|
<div class="relative overflow-hidden rounded-[1rem] bg-slate-100 aspect-square mb-6 shadow-sm group-hover:shadow-2xl transition-all duration-700">
|
|
{% if product.imageName %}
|
|
<img src="{{ vich_uploader_asset(product,'imageFile') | imagine_filter('webp') }}"
|
|
alt="{{ product.name }}"
|
|
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-1000">
|
|
{% else %}
|
|
<img src="{{ asset('provider/images/favicon.png') | imagine_filter('webp') }}"
|
|
alt="{{ product.name }}"
|
|
class="w-full h-full object-cover opacity-50 transform group-hover:scale-110 transition-transform duration-1000">
|
|
{% endif %}
|
|
|
|
{# PRIX : Plus gros et plus gras #}
|
|
<div class="absolute top-5 right-5 bg-white/95 backdrop-blur-md px-4 py-2 rounded-2xl shadow-md border border-slate-100">
|
|
<p class="text-slate-900 font-black text-lg italic leading-none">
|
|
A partir de {{ product.priceDay }}€ / Jour
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{# INFOS : Texte augmenté #}
|
|
<div class="px-2">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
{# Catégorie : Plus lisible #}
|
|
<span class="text-[10px] font-black text-blue-600 uppercase tracking-[0.2em] italic">
|
|
{{ product.category }}
|
|
</span>
|
|
<span class="w-4 h-[1px] bg-slate-200"></span>
|
|
<span class="text-[9px] font-bold text-slate-300 uppercase tracking-widest">
|
|
REF. {{ product.ref }}
|
|
</span>
|
|
</div>
|
|
|
|
{# TITRE : Passage en text-2xl pour un impact maximum #}
|
|
<h3 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-[0.95] group-hover:text-blue-600 transition-colors line-clamp-2">
|
|
{{ product.name }}
|
|
</h3>
|
|
|
|
{# LIEN : Plus visible #}
|
|
<div class="mt-5 flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.15em] text-slate-400 group-hover:text-blue-600 transition-colors">
|
|
<span>Découvrir le produit</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{# Message vide #}
|
|
<div id="empty-msg" class="hidden col-span-full py-24 text-center bg-white rounded-[3.5rem] border-2 border-dashed border-slate-100">
|
|
<p class="text-slate-400 font-black italic uppercase tracking-widest text-xs">Arrive bientôt...</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|