42 lines
4.8 KiB
PHP
42 lines
4.8 KiB
PHP
|
@extends('layouts.vitrine')
|
|||
|
|
|
|||
|
|
@section('titre', 'Cours gratuits')
|
|||
|
|
|
|||
|
|
@section('contenu')
|
|||
|
|
<section style="padding:112px 20px 96px;background:#fff"><div style="max-width:900px;margin:0 auto"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0;text-align:center">Gratuit, sans compte</p><h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-align:center;text-wrap:balance">99 cours gratuits, calés sur vos référentiels.</h1><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.</p><p style="margin:28px 0 0;text-align:center;font-size:15px;font-weight:700;color:#5f6368">99 cours · 45 TD · 59 TP sur VM · 98 QCM corrigés</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="#nsi" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Choisir mon cursus</a></div><nav aria-label="Cursus" style="margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px"><a href="#nsi" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Lycée NSI</a><a href="#sio" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BTS SIO SISR</a><a href="#ciel" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BTS CIEL</a><a href="#but" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">BUT R&T</a><a href="#tssr" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Titre pro TSSR</a><a href="#prog" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Programmation</a></nav></div></section>
|
|||
|
|
<section id="{{ $c['id'] }}" class="scroll-mt-24" style="border-top:1px solid #e3e5e8" aria-labelledby="t-{{ $c['id'] }}">
|
|||
|
|
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
|
|||
|
|
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
|
|||
|
|
<h2 id="t-{{ $c['id'] }}" class="inline-block {{ $loop->odd ? '' : '' }} border border-[#e3e5e8] rounded-2xl {{ $c['couleur'] }} px-4 py-1 text-5xl font-extrabold tracking-tight sm:text-6xl">{{ $c['nom'] }}</h2>
|
|||
|
|
<p class="text-lg font-semibold">{{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-12 grid gap-10 lg:grid-cols-2">
|
|||
|
|
@foreach ($c['blocs'] as $b)
|
|||
|
|
<div data-bloc class="border border-[#e3e5e8] rounded-2xl bg-white {{ $loop->even ? '' : '' }}">
|
|||
|
|
<h3 class="border-b border-[#e3e5e8] {{ $c['couleur'] }} px-5 py-3 text-lg font-extrabold">{{ $b['titre'] }}</h3>
|
|||
|
|
<ul class="divide-y divide-[#e3e5e8]">
|
|||
|
|
@foreach ($b['cours'] as $k)
|
|||
|
|
<li data-types="{{ implode(' ', $k['types']) }}"><a href="{{ isset($k['exercice']) ? route('ide', ['ex' => $k['exercice']]) : route('cours.fiche', ['chapitre' => $k['titre'] ?? '']) }}" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#f8f9fa]"><span class="min-w-0 flex-1 font-extrabold">{{ $k['titre'] }}</span><span class="flex gap-1">@foreach ($k['types'] as $t)<span class="border border-[#dadce0] rounded-lg {{ $fond[$t] }} px-1.5 font-mono text-xs font-semibold">{{ $t }}</span>@endforeach</span><span class="w-10 text-right font-mono text-sm font-semibold">{{ $k['heures'] }} h</span></a></li>
|
|||
|
|
@endforeach
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
@endforeach
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
@endforeach
|
|||
|
|
<script>
|
|||
|
|
document.querySelectorAll('[data-filtre]').forEach(function (b) {
|
|||
|
|
b.addEventListener('click', function () {
|
|||
|
|
var f = b.dataset.filtre;
|
|||
|
|
document.querySelectorAll('[data-filtre]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
|
|||
|
|
document.querySelectorAll('[data-types]').forEach(function (li) {
|
|||
|
|
li.hidden = f !== 'Tout' && li.dataset.types.split(' ').indexOf(f) === -1;
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[data-bloc]').forEach(function (b) { b.hidden = !b.querySelector('[data-types]:not([hidden])'); });
|
|||
|
|
document.querySelectorAll('section[id]').forEach(function (s) { if (s.querySelector('[data-bloc]')) s.hidden = !s.querySelector('[data-bloc]:not([hidden])'); });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
@endsection
|