ludikevent_crm/templates/revervation/home.twig

{% extends 'revervation/base.twig' %}

{% block title %}Location de Châteaux Gonflables - Ludik Event{% 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 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="#" 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 %}