175 lines
11 KiB
Twig
175 lines
11 KiB
Twig
{% extends 'revervation/base.twig' %}
|
|
|
|
{% block title %}Location de Châteaux Gonflables - Ludik Event{% endblock %}
|
|
{% block jsonld %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "VideoObject",
|
|
"name": "Location de Châteaux Gonflables - Ludik Event",
|
|
"description": "Découvrez notre catalogue de structures gonflables en vidéo. Ludik Event simplifie vos événements avec des structures certifiées.",
|
|
"thumbnailUrl": "{{ absolute_url(asset('provider/video/video.jpg')) }}",
|
|
"uploadDate": "2024-01-01T08:00:00+08:00",
|
|
"contentUrl": "{{ absolute_url(asset('provider/video/video.mp4')) }}",
|
|
"embedUrl": "{{ absolute_url(asset('provider/video/video.mp4')) }}",
|
|
"potentialAction": {
|
|
"@type": "SeekToAction",
|
|
"target": "{{ absolute_url(asset('provider/video/video.mp4')) }}?t={seek_to_second_number}",
|
|
"startOffset-input": "required name=seek_to_second_number"
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="space-y-20 pb-20 bg-gray-50/50">
|
|
|
|
{# --- SECTION HERO --- #}
|
|
<section class="relative overflow-hidden pt-16 pb-8 lg:pt-24">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
|
|
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
|
<h1 class="text-5xl md:text-7xl font-black tracking-tight text-gray-900 leading-[1.1] uppercase italic">
|
|
Louez le <span class="text-blue-600">Bonheur</span> <br>
|
|
<span class="text-amber-500 underline decoration-blue-600/20">en un clic.</span>
|
|
</h1>
|
|
<p class="mt-6 text-lg text-gray-600 leading-relaxed italic">
|
|
Ludik Event simplifie vos événements. Des structures certifiées, une livraison rapide et des souvenirs inoubliables pour les petits et les grands.
|
|
</p>
|
|
<div class="mt-10 flex flex-col sm:flex-row gap-4 sm:justify-center lg:justify-start">
|
|
<a href="{{ path('reservation_catalogue') }}" class="px-8 py-4 bg-blue-600 text-white rounded-2xl font-bold text-lg shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all hover:-translate-y-1 text-center uppercase tracking-tighter">
|
|
Voir le catalogue
|
|
</a>
|
|
<a href="tel:0614172447" class="px-8 py-4 bg-white text-gray-700 border border-gray-200 rounded-2xl font-bold text-lg hover:bg-gray-50 transition-all text-center uppercase tracking-tighter">
|
|
📞 06 14 17 24 47
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{# Vidéo Hero #}
|
|
<div class="mt-12 lg:mt-0 lg:col-span-6 relative">
|
|
<div class="relative mx-auto w-full rounded-[3rem] overflow-hidden shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500 border-8 border-white">
|
|
<video
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
poster="{{ asset('provider/video/video.jpg') }}"
|
|
src="{{ asset('provider/video/video.mp4') }}"
|
|
class="w-full h-full object-cover aspect-[4/3]">
|
|
</video>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-3xl shadow-xl hidden md:block border border-gray-100">
|
|
<div class="flex items-center gap-4">
|
|
<div class="p-3 bg-amber-100 rounded-2xl text-amber-600 uppercase font-black text-xs tracking-widest">
|
|
⭐ Top Qualité
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# --- SECTION SERVICES (Nouveauté) --- #}
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="flex items-center gap-6 p-8 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm">
|
|
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center text-2xl shrink-0">💬</div>
|
|
<div>
|
|
<h4 class="font-black text-gray-900 uppercase italic text-sm">Service Client Expert</h4>
|
|
<p class="text-xs text-gray-500 mt-1 italic">Une équipe à votre écoute pour un événement sur mesure.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6 p-8 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm">
|
|
<div class="w-14 h-14 bg-amber-50 rounded-2xl flex items-center justify-center text-2xl shrink-0">🚚</div>
|
|
<div>
|
|
<h4 class="font-black text-gray-900 uppercase italic text-sm">Livraison Possible</h4>
|
|
<p class="text-xs text-gray-500 mt-1 italic">Nous livrons vos structures directement sur le lieu de fête.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6 p-8 bg-white rounded-[2.5rem] border border-gray-100 shadow-sm">
|
|
<div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-2xl shrink-0">🎡</div>
|
|
<div>
|
|
<h4 class="font-black text-gray-900 uppercase italic text-sm">Large Choix</h4>
|
|
<p class="text-xs text-gray-500 mt-1 italic">Un catalogue varié pour satisfaire toutes les envies.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# --- SECTION CATALOGUE --- #}
|
|
<section id="catalogue" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
|
|
<div>
|
|
<h2 class="text-4xl font-black text-gray-900 uppercase italic tracking-tighter">Nos <span class="text-blue-600">Best-Sellers</span></h2>
|
|
<p class="text-gray-500 mt-2 italic">Sélectionnés pour le succès de vos fêtes.</p>
|
|
</div>
|
|
<a href="{{ path('reservation_contact') }}" class="group text-blue-600 font-bold flex items-center gap-2 uppercase text-xs tracking-[0.2em] bg-blue-50 px-6 py-3 rounded-full hover:bg-blue-600 hover:text-white transition-all">
|
|
Tout l'univers
|
|
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{% for product in products %}
|
|
<div class="group bg-white rounded-[3rem] p-4 border border-gray-100 shadow-sm hover:shadow-2xl transition-all duration-500 flex flex-col">
|
|
|
|
{# Conteneur Image #}
|
|
<div class="relative overflow-hidden rounded-[2.5rem] aspect-[4/5] bg-slate-50 flex items-center justify-center">
|
|
|
|
{% if product.imageName and 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-700">
|
|
{% else %}
|
|
{# FALLBACK : Image par défaut si vide #}
|
|
<div class="flex flex-col items-center justify-center p-12 text-center">
|
|
<img src="{{ asset('provider/images/favicon.png') }}"
|
|
alt="Ludik Event"
|
|
class="w-50 h-50 object-contain opacity-20 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500 grayscale group-hover:grayscale-0">
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Badge Prix flottant #}
|
|
<div class="absolute top-5 left-5 bg-white/90 backdrop-blur-md px-4 py-2 rounded-2xl shadow-sm border border-white/50">
|
|
<p class="text-[9px] font-black text-gray-400 uppercase tracking-widest mb-0.5">Location / Jour</p>
|
|
<p class="text-blue-600 font-black text-sm uppercase leading-none">
|
|
Dès {{ product.priceDay|format_currency('EUR') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{# Infos Produit #}
|
|
<div class="mt-6 px-2 pb-2 flex-grow flex flex-col justify-between">
|
|
<div>
|
|
<span class="text-[10px] font-black text-blue-500 uppercase tracking-widest italic mb-1 block">
|
|
Réf: {{ product.ref }}
|
|
</span>
|
|
<h3 class="text-2xl font-black text-gray-900 group-hover:text-blue-600 transition-colors leading-tight italic uppercase">
|
|
{{ product.name }}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<a href="{{ path('reservation_product_show',{id:product.slug}) }}" class="block w-full py-4 bg-gray-900 text-white text-center rounded-[1.5rem] font-black uppercase text-sm tracking-widest hover:bg-blue-600 transition-all shadow-xl hover:shadow-blue-200 active:scale-95">
|
|
Réserver ce bonheur
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{# Message si aucun produit n'est trouvé #}
|
|
<div class="col-span-full py-20 text-center bg-white rounded-[3rem] border-2 border-dashed border-gray-200">
|
|
<p class="text-gray-400 font-bold italic uppercase tracking-widest">Le catalogue est en cours de mise à jour...</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
{% endblock %}
|