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. ```
139 lines
9.0 KiB
Twig
139 lines
9.0 KiB
Twig
{% extends 'revervation/base.twig' %}
|
|
|
|
{% block title %}{{ 'catalog.seo.title'|trans }}{% endblock %}
|
|
{% block description %}{{ 'catalog.seo.description'|trans }}{% endblock %}
|
|
|
|
{% block breadcrumb_json %}
|
|
,{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "{{ 'catalog.breadcrumb'|trans }}",
|
|
"item": "{{ url('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" data-aos="fade-down">
|
|
<a href="{{ url('reservation') }}" class="text-slate-600 hover:text-[#fc0e50] transition">{{ 'nav.home'|trans }}</a>
|
|
<span class="text-slate-500">/</span>
|
|
<span class="text-amber-700 underline decoration-2 underline-offset-4">{{ 'catalog.breadcrumb'|trans }}</span>
|
|
</nav>
|
|
|
|
<h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6" data-aos="fade-up" data-aos-delay="100">
|
|
{{ 'catalog.header.main'|trans }} <span class="text-[#f39e36]">{{ 'catalog.header.highlight'|trans }}</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{# --- FILTRES --- #}
|
|
<div class="sticky top-0 z-40 bg-gray-50/90 backdrop-blur-md border-b border-slate-200 mb-12" data-aos="fade-in" data-aos-delay="200">
|
|
<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">
|
|
{{ 'catalog.filter.all'|trans }}
|
|
</button>
|
|
|
|
{% set categories_list = [
|
|
{'id': '2-7 ans', 'label': 'catalog.filter.cat_2_7'|trans, 'hover': 'hover:border-amber-500 hover:text-amber-600'},
|
|
{'id': '3-15 ans', 'label': 'catalog.filter.cat_3_15'|trans, 'hover': 'hover:border-blue-600 hover:text-blue-600'},
|
|
{'id': '3-99 ans', 'label': 'catalog.filter.cat_3_99'|trans, 'hover': 'hover:border-indigo-600 hover:text-indigo-600'},
|
|
{'id': 'barnums', 'label': 'catalog.filter.cat_barnums'|trans, 'hover': 'hover:border-slate-800 hover:text-slate-800'},
|
|
{'id': 'alimentaire', 'label': 'catalog.filter.cat_food'|trans, 'hover': 'hover:border-rose-500 hover:text-rose-600'},
|
|
{'id': 'options', 'label': 'catalog.filter.cat_options'|trans, 'hover': 'hover:border-emerald-500 hover:text-emerald-600'}
|
|
] %}
|
|
|
|
{% 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-600 border border-slate-200 {{ cat.hover }}">
|
|
{{ cat.label }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- GRILLE DE PRODUITS --- #}
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<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 }}" data-aos="fade-up">
|
|
<a href="{{ path('reservation_product_show', {id: product.slug}) }}" class="block">
|
|
|
|
<div class="relative overflow-hidden rounded-[1.25rem] md:rounded-[1rem] bg-slate-100 aspect-square mb-4 md: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 FLOTTANT (Ultra-minimal sur mobile) #}
|
|
<div class="absolute top-3 right-3 md:top-5 md:right-5 bg-white/95 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl md:rounded-2xl shadow-md border border-slate-100">
|
|
<p class="text-slate-900 font-black text-xs md:text-sm italic leading-none whitespace-nowrap">
|
|
{# "Dès" masqué sur mobile pour gagner de la place #}
|
|
<span class="hidden md:inline text-[10px] opacity-60 not-italic mr-1">{{ 'catalog.product.from'|trans }}</span>
|
|
|
|
{% if tvaEnabled %}
|
|
{{ (product.priceDay*1.20)|format_currency('EUR') }} <span class="text-[8px] md:text-[10px]">TTC</span>
|
|
{% else %}
|
|
{{ product.priceDay|format_currency('EUR') }}
|
|
{% endif %}
|
|
|
|
{# Suffixe masqué sur mobile #}
|
|
<span class="hidden md:inline text-slate-400">
|
|
{% if product.category == "barnums" %} / {{ 'catalog.product.weekend'|trans }}{% else %} / {{ 'catalog.product.day'|trans }}{% endif %}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-1 md:px-2">
|
|
{# META DATA (Avec mention de durée sur mobile) #}
|
|
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 mb-2">
|
|
<span class="text-[9px] md:text-[10px] font-black text-blue-700 uppercase tracking-[0.15em] md:tracking-[0.2em] italic">
|
|
{{ product.category }}
|
|
</span>
|
|
|
|
<span class="w-3 h-[1px] bg-slate-300"></span>
|
|
|
|
<span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest flex items-center gap-1">
|
|
{{ 'catalog.product.ref'|trans }} {{ product.ref }}
|
|
|
|
{# Mention de durée visible UNIQUEMENT sur mobile #}
|
|
<span class="md:hidden inline-flex items-center before:content-['•'] before:mr-1 before:text-slate-300 text-slate-400 font-medium lowercase">
|
|
{% if product.category == "barnums" %}
|
|
{{ 'catalog.product.weekend'|trans }}
|
|
{% else %}
|
|
{{ 'catalog.product.day'|trans }}
|
|
{% endif %}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<h3 class="text-lg md:text-2xl font-black text-slate-900 uppercase tracking-tighter leading-[0.95] group-hover:text-[#f39e36] transition-colors line-clamp-2">
|
|
{{ product.name }}
|
|
</h3>
|
|
|
|
<div class="mt-4 md:mt-5 flex items-center gap-2 text-[10px] md:text-[11px] font-black uppercase tracking-[0.15em] text-slate-600 group-hover:text-[#f39e36] transition-colors">
|
|
<span>{{ 'catalog.product.view_more'|trans }}</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 md:h-4 md: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 %}
|
|
|
|
<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" data-aos="fade-in">
|
|
<p class="text-slate-600 font-black italic uppercase tracking-widest text-xs">{{ 'catalog.empty'|trans }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |