@extends('layouts.vitrine')

@section('titre', 'Labs')

@section('contenu')
    <section class="relative overflow-hidden border-b-4 border-black bg-white">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-12 w-12 bg-[#FF6FB5] [--r:12deg]"></span><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FFD23F] [animation-delay:1.5s]"></span></div>
        <div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
            <p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Catalogue</p>
            <h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Des labs qui se corrigent tout seuls.</h1>
            <p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.</p>
        </div>
    </section>
    <section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="titre-catalogue">
        <div class="flex flex-wrap items-center gap-3">
            <h2 id="titre-catalogue" class="mr-4 text-2xl font-black">Filtrer</h2>
            <button type="button" class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white">Tous</button>
            <button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Linux</button>
            <button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#7CF2C0]">Réseau</button>
            <button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#C4B5FD]">Services</button>
        </div>
        <ul class="mt-14 grid gap-10 pb-12 sm:grid-cols-2 lg:grid-cols-3">
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
                <span class="font-mono text-5xl font-semibold">01</span>
                <div>
                    <p class="font-mono text-sm font-semibold">Lycée NSI</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Premiers pas dans le shell</h3>
                    <p class="mt-3 font-medium">Se déplacer, créer des dossiers, lire des fichiers.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Linux</span>
                <span class="font-mono text-5xl font-semibold">02</span>
                <div>
                    <p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Utilisateurs et droits</h3>
                    <p class="mt-3 font-medium">Créer des comptes, régler chmod et chown, tester les accès.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
                <span class="font-mono text-5xl font-semibold">03</span>
                <div>
                    <p class="font-mono text-sm font-semibold">BTS CIEL</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Adressage IPv4</h3>
                    <p class="mt-3 font-medium">Configurer deux VM pour qu’elles se voient, puis diagnostiquer.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FF6FB5] p-7 shadow-[8px_8px_0px_#000000] rotate-1">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Réseau</span>
                <span class="font-mono text-5xl font-semibold">04</span>
                <div>
                    <p class="font-mono text-sm font-semibold">BUT · Licence pro</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Routage statique avec Kathará</h3>
                    <p class="mt-3 font-medium">Trois routeurs en conteneurs, une topologie à faire communiquer.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
                <span class="font-mono text-5xl font-semibold">05</span>
                <div>
                    <p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Serveur web Apache</h3>
                    <p class="mt-3 font-medium">Installer, publier une page, lire les journaux.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
            <li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -rotate-1">
                <span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Services</span>
                <span class="font-mono text-5xl font-semibold">06</span>
                <div>
                    <p class="font-mono text-sm font-semibold">Master · École d’ingé</p>
                    <h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Annuaire Samba AD</h3>
                    <p class="mt-3 font-medium">Monter un contrôleur de domaine et joindre un client.</p>
                    <a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
                </div>
            </li>
        </ul>
    </section>
@endsection