@extends('layouts.vitrine')

@section('titre', 'Labs')

@section('contenu')
    <section class="relative overflow-hidden border-b border-[#e3e5e8] bg-white">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] [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 border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-bold">Catalogue</p>
            <div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="mt-8 max-w-5xl text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl xl:text-7xl">Des labs qui se corrigent tout seuls.</h1></div>
            <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-extrabold">Filtrer</h2>
            <button type="button" class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white">Tous</button>
            <button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Linux</button>
            <button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#e6f4ea]">Réseau</button>
            <button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#eef0fd]">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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-7">
                <span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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