van---
layout: base.njk
title: "grootscherm.be — Waar kijk je op groot scherm?"
--- 

<!-- Sfeervolle Hero / Openingssectie -->
<section class="relative bg-slate-900 text-white overflow-hidden py-16 md:py-24 mb-12 rounded-3xl shadow-2xl border border-slate-800">
    <!-- Subtiele rode/gouden gloed op de achtergrond -->
    <div class="absolute inset-0 bg-gradient-to-r from-red-600/10 via-amber-500/5 to-slate-950/80 z-0"></div>
    
    <div class="relative max-w-4xl mx-auto px-6 text-center z-10 space-y-6">
        <span class="inline-flex items-center gap-2 bg-red-600/90 text-white text-xs font-black uppercase tracking-widest px-4 py-1.5 rounded-full">
            <i class="fa-solid fa-futbol text-amber-400"></i> EK / WK Campagne 2026
        </span>
        <h1 class="text-4xl md:text-6xl font-black tracking-tight leading-none text-white">
            Waar kijken we de <span class="text-red-600">Rode</span> <span class="text-amber-500">Duivels</span>?
        </h1>
        <p class="text-slate-300 text-lg md:text-xl max-w-2xl mx-auto font-medium">
            Vind de gezelligste fanzones, de grootste outdoor LED-schermen en de wildste sportbars in jouw buurt om onze nationale ploeg naar de overwinning te schreeuwen!
        </p>
    </div>
</section>

<!-- Raster (Grid) met Foodtrucks/Schermen -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- We passen hier het 'shuffle' filter toe dat in onze config staat gedefinieerd -->
    
    
    <div class="bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-xl border border-slate-200/50 flex flex-col justify-between transition-all transform hover:-translate-y-1">
        
        <!-- Foto -->
        <div class="h-48 w-full relative">
            <img src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=800&q=80" alt="Rode Duivels Fanzone Malle" class="w-full h-full object-cover">
            <div class="absolute top-4 right-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
                België - Italië
            </div>
        </div>

        <!-- Info kaartje -->
        <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
            <div>
                <h3 class="text-xl font-extrabold text-slate-900 line-clamp-1">Rode Duivels Fanzone Malle</h3>
                <p class="text-sm font-semibold text-red-600 mt-1">
                    <i class="fa-solid fa-location-dot"></i> Malle, Antwerpen
                </p>
                <p class="text-slate-600 text-sm mt-3 line-clamp-3">Het grootste outdoor LED-scherm van de Kempen staat dit weekend op het grote grasveld achter de sporthal. Kom samen met honderden supporters de Rode Duivels naar de overwinning schreeuwen. Er zijn foodtrucks en drankstanden aanwezig.</p>
            </div>

            <div class="pt-4 border-t border-slate-100 flex justify-between items-center">
                <span class="text-xs font-bold text-slate-500">
                    <i class="fa-solid fa-ticket text-amber-500"></i> Gratis
                </span>
                <a href="/schermen/fanzone-malle/" class="text-sm font-extrabold text-red-600 hover:text-red-700 transition">
                    Bekijk details <i class="fa-solid fa-chevron-right ml-0.5"></i>
                </a>
            </div>
        </div>

    </div>
    
    <div class="bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-xl border border-slate-200/50 flex flex-col justify-between transition-all transform hover:-translate-y-1">
        
        <!-- Foto -->
        <div class="h-48 w-full relative">
            <img src="https://images.unsplash.com/photo-1543007630-9710e4a00a20?auto=format&fit=crop&w=800&q=80" alt="Kasteelplein Groot Scherm Zoersel" class="w-full h-full object-cover">
            <div class="absolute top-4 right-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
                België - Italië
            </div>
        </div>

        <!-- Info kaartje -->
        <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
            <div>
                <h3 class="text-xl font-extrabold text-slate-900 line-clamp-1">Kasteelplein Groot Scherm Zoersel</h3>
                <p class="text-sm font-semibold text-red-600 mt-1">
                    <i class="fa-solid fa-location-dot"></i> Zoersel, Antwerpen
                </p>
                <p class="text-slate-600 text-sm mt-3 line-clamp-3">Gezellig samen voetbal kijken op een gigantisch mobiel LED-scherm van 15 vierkante meter. Live uitzending van de match op het sfeervolle Kasteelplein. Lokale verenigingen zorgen voor frisse pintjes en hamburgers.</p>
            </div>

            <div class="pt-4 border-t border-slate-100 flex justify-between items-center">
                <span class="text-xs font-bold text-slate-500">
                    <i class="fa-solid fa-ticket text-amber-500"></i> Gratis
                </span>
                <a href="/schermen/kasteelplein-zoersel/" class="text-sm font-extrabold text-red-600 hover:text-red-700 transition">
                    Bekijk details <i class="fa-solid fa-chevron-right ml-0.5"></i>
                </a>
            </div>
        </div>

    </div>
    
    <div class="bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-xl border border-slate-200/50 flex flex-col justify-between transition-all transform hover:-translate-y-1">
        
        <!-- Foto -->
        <div class="h-48 w-full relative">
            <img src="https://sporza.be" alt="Sportbar Extra Time Scherm" class="w-full h-full object-cover">
            <div class="absolute top-4 right-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
                Alle groepsmatchen
            </div>
        </div>

        <!-- Info kaartje -->
        <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
            <div>
                <h3 class="text-xl font-extrabold text-slate-900 line-clamp-1">Sportbar Extra Time Scherm</h3>
                <p class="text-sm font-semibold text-red-600 mt-1">
                    <i class="fa-solid fa-location-dot"></i> Gent, Oost-Vlaanderen
                </p>
                <p class="text-slate-600 text-sm mt-3 line-clamp-3">Geen zin in regen? Kijk de matchen van de Rode Duivels op ons mega binnenscherm van 6 meter breed. Comfortabele zitplaatsen</p>
            </div>

            <div class="pt-4 border-t border-slate-100 flex justify-between items-center">
                <span class="text-xs font-bold text-slate-500">
                    <i class="fa-solid fa-ticket text-amber-500"></i> € 5 (incl. consumptie)
                </span>
                <a href="/schermen/sportbar-extra-time/" class="text-sm font-extrabold text-red-600 hover:text-red-700 transition">
                    Bekijk details <i class="fa-solid fa-chevron-right ml-0.5"></i>
                </a>
            </div>
        </div>

    </div>
    
</div>