45 lines
24 KiB
PHP
45 lines
24 KiB
PHP
|
@extends('layouts.vitrine')
|
|||
|
|
|
|||
|
|
@section('titre', 'Fonctionnalités')
|
|||
|
|
|
|||
|
|
@section('contenu')
|
|||
|
|
<div style="background:#fff"><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">Fonctionnalités</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">Tout ce qu’il faut pour une classe, en ligne.</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">Cours, TP sur machine Linux, éditeur de code, évaluations et suivi des élèves, dans un seul site. Choisissez un outil pour voir à quoi il sert, puis essayez sa démo.</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="{{ route('register') }}" 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">Créer une classe gratuite</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Sans carte bancaire</p></div></div></section><section id="pourquoi-outil" class="relative overflow-hidden border-b border-[#e3e5e8] bg-white" aria-labelledby="t-interet">
|
|||
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block"><svg viewBox="0 0 80 40" class="absolute left-[46%] top-24 h-10 w-20"><path d="M4 30 C20 6 44 6 60 20 M52 10 L62 21 L48 26" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="absolute bottom-16 left-8 h-10 w-10 border border-[#e3e5e8] rounded-2xl bg-[#E6FF3F]"></span><span class="absolute right-10 top-10 h-8 w-8 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fce8e6]"></span></div>
|
|||
|
|
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
|
|||
|
|
<div class="lg:col-span-7">
|
|||
|
|
<p class="inline-block border border-[#dadce0] rounded-lg bg-[#fce8e6] px-3 py-1 text-sm font-bold">Pourquoi un tel outil ?</p>
|
|||
|
|
<h2 id="t-interet" class="mt-6 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">Suivre chaque élève, même dans une classe de 35.</h2>
|
|||
|
|
<div class="mt-8 grid gap-5 text-xl font-medium leading-relaxed">
|
|||
|
|
<p>Avec des classes entières et une charge de travail déjà lourde, <strong class="font-extrabold">suivre chaque élève individuellement</strong> devient presque impossible. Un <strong class="font-extrabold">élève en difficulté décroche vite</strong>, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.</p>
|
|||
|
|
<p>Syllabus <strong class="font-extrabold">surveille tout, sans être intrusif</strong>. Le <strong class="font-extrabold">QCM de début d’heure</strong>, celui qui suit la <strong class="font-extrabold">lecture du cours</strong>, les <strong class="font-extrabold">TP</strong>, les <strong class="font-extrabold">devoirs et exercices maison</strong> : chaque trace remonte au prof. Il voit rapidement <strong class="font-extrabold">qui accompagner plus régulièrement</strong>, qui faire passer au premier rang, à qui demander de réexpliquer une notion.</p>
|
|||
|
|
<p>C’est une <strong class="font-extrabold">supervision bienveillante et naturelle</strong>, qui ne remplace pas le regard du prof mais l’aide à savoir <strong class="font-extrabold">où concentrer ses efforts</strong>. Tout remonte dans le <strong class="font-extrabold">cockpit prof</strong>, d’où il pilote et supervise examens, devoirs maison, quiz et labs.</p>
|
|||
|
|
<p>Dans les labs, chaque étape a ses <strong class="font-extrabold">indices, qui se débloquent après un certain nombre de tentatives</strong>. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à <strong class="font-extrabold">réfléchir un tout petit peu plus avant de vous appeler</strong>. Et souvent, ils vous <strong class="font-extrabold">évitent les questions triviales</strong>.</p>
|
|||
|
|
<p>Et dans l’autre sens, <strong class="font-extrabold">l’élève en excellence peut s’épanouir</strong>. Il aborde des notions plus avancées, avec une difficulté plus forte, <strong class="font-extrabold">sans prendre d’avance sur le programme</strong> : il explore des notions connexes qui développent sa <strong class="font-extrabold">culture générale</strong>.</p>
|
|||
|
|
<p class="relative mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-black px-5 py-4 text-3xl font-extrabold leading-tight text-white">Tout cela dans un unique but : <span class="text-[#E6FF3F]">faciliter votre travail.</span><svg viewBox="0 0 40 40" class="absolute -right-6 -top-6 h-10 w-10" aria-hidden="true"><path d="M20 2 l5 12 13 1 -10 8 3 13 -11 -7 -11 7 3 -13 -10 -8 13 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid content-start gap-8 lg:col-span-5 lg:pt-16">
|
|||
|
|
<article class="relative border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-6">
|
|||
|
|
<span class="absolute -top-4 right-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">Alerte douce</span>
|
|||
|
|
<h3 class="text-2xl font-extrabold">Un élève décroche</h3>
|
|||
|
|
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>3 QCM de début d’heure sous la moyenne</li><li class="flex gap-3"><span aria-hidden="true">■</span>Cours lu en 2 minutes au lieu de 15</li><li class="flex gap-3"><span aria-hidden="true">■</span>Devoir maison non rendu</li></ul>
|
|||
|
|
<p class="mt-4 border-t border-[#e3e5e8] pt-3 font-extrabold">→ Premier rang, notion à réexpliquer, suivi plus régulier.</p>
|
|||
|
|
</article>
|
|||
|
|
<article class="relative border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6">
|
|||
|
|
<span class="absolute -top-4 left-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">Excellence</span>
|
|||
|
|
<h3 class="text-2xl font-extrabold">Un élève s’ennuie</h3>
|
|||
|
|
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>Tous les TP réussis du premier coup</li><li class="flex gap-3"><span aria-hidden="true">■</span>20/20 au QCM de lecture</li><li class="flex gap-3"><span aria-hidden="true">■</span>Finit avant tout le monde</li></ul>
|
|||
|
|
<p class="mt-4 border-t border-[#e3e5e8] pt-3 font-extrabold">→ Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article class="relative border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-6">
|
|||
|
|
<span class="absolute -top-4 right-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">Labs</span>
|
|||
|
|
<div class="flex items-center gap-4"><svg viewBox="0 0 64 64" class="h-14 w-14 shrink-0" aria-hidden="true"><g stroke="#000" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"><path d="M32 6 C18 6 10 16 10 27 C10 36 16 40 20 46 H44 C48 40 54 36 54 27 C54 16 46 6 32 6 Z" fill="#E6FF3F"/><rect x="21" y="46" width="22" height="7" fill="#fff"/><rect x="24" y="53" width="16" height="6" fill="#fff"/><path d="M26 28 L32 36 L38 28" fill="none"/></g><g stroke="#000" stroke-width="3.5" stroke-linecap="round"><path d="M2 20 L7 22 M62 20 L57 22 M8 4 L12 9 M56 4 L52 9"/></g></svg><h3 class="text-2xl font-extrabold">Un indice se débloque</h3></div>
|
|||
|
|
<ol class="mt-4 grid gap-2 font-mono text-sm font-semibold"><li class="border border-[#dadce0] rounded-lg bg-white px-3 py-2">Tentative 1 · <span class="text-[#b3001b]">échec</span></li><li class="border border-[#dadce0] rounded-lg bg-white px-3 py-2">Tentative 3 · 💡 Indice 1 : regarde la commande <strong>ip addr</strong></li><li class="border border-[#dadce0] rounded-lg bg-white px-3 py-2">Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes</li></ol>
|
|||
|
|
<p class="mt-4 border-t border-[#e3e5e8] pt-3 font-extrabold">→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.</p>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section><section style="padding:72px 20px;background:#fff"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Piloter</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Suivre la classe, l’établissement et le territoire.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="{{ route('ressource') }}?outil=cockpit" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Tableau de bord prof</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Toute la classe sur un seul écran : qui avance, qui bloque, qui a levé la main.</span></a></li><li><a href="{{ route('ressource') }}?outil=visio" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Visio de classe</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Les élèves arrivent en sourdine, lèvent la main et ne parlent que quand vous leur donnez la parole.</span></a></li><li><a href="{{ route('ressource') }}?outil=espace-eleve" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Espace élève</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Un calendrier, les devoirs à rendre, les examens à venir et de quoi s’entraîner.</span></a></li><li><a href="{{ route('ressource') }}?outil=vie-scolaire" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Vie scolaire</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">L’assiduité et les signaux de décrochage de tout l’établissement, classe par classe.</span></a></li><li><a href="{{ route('ressource') }}?outil=academie" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Académie</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Une vue agrégée de plusieurs établissements, sans aucune donnée nominative.</span></a></li><li><a href="{{ route('ressource') }}?outil=cohortes" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Suivi des cohortes</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">La progression d’une promotion entière, semestre après semestre.</span></a></li><li><a href="{{ route('ressource') }}?outil=espace-etablissement" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Espace établissement</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Licences, devis, factures et conventions au même endroit.</span></a></li><li><a href="{{ route('ressource') }}?outil=integration" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Intégration et sécurité</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">SSO, API, hébergement et conformité : ce
|
|||
|
|
@endsection
|