85 lines
8 KiB
PHP
85 lines
8 KiB
PHP
@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
|