65 lines
4.2 KiB
Vue
65 lines
4.2 KiB
Vue
|
<template>
|
|||
|
|
<section class="py-14 sm:py-16 lg:py-20">
|
|||
|
|
<div class="container mx-auto max-w-6xl px-4">
|
|||
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|||
|
|
<div>
|
|||
|
|
<p class="badge">Интерактивные задания</p>
|
|||
|
|
<h2 class="font-heading text-2xl sm:text-3xl lg:text-4xl">Практика, которая адаптируется</h2>
|
|||
|
|
<p class="mt-2 text-slate-600">AI оценивает ответы, принимает синонимы и подбирает следующую сложность.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-sm text-slate-500">Переключай режимы: перевод, пропуски, контекст.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-8 grid gap-6 lg:grid-cols-3">
|
|||
|
|
<div class="card-surface fade-up lg:col-span-2">
|
|||
|
|
<div class="flex flex-wrap gap-2 text-xs text-slate-700">
|
|||
|
|
<span class="rounded-full bg-blue-50 px-3 py-1 text-blue-800">Перевод слов в обе стороны</span>
|
|||
|
|
<span class="rounded-full bg-indigo-50 px-3 py-1 text-indigo-800">Новые слова на основе уровня</span>
|
|||
|
|
<span class="rounded-full bg-emerald-50 px-3 py-1 text-emerald-800">Заполнение пропусков</span>
|
|||
|
|
<span class="rounded-full bg-amber-50 px-3 py-1 text-amber-800">Перевод по контексту</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-5 grid gap-3 sm:grid-cols-2">
|
|||
|
|
<div class="rounded-2xl bg-slate-100 p-4 text-sm text-slate-700">
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<span class="font-semibold">Умная проверка</span>
|
|||
|
|
<span class="rounded-full bg-emerald-100 px-3 py-1 text-xs text-emerald-700">Принимает синонимы</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-2 text-slate-600">AI сравнивает смысл ответа, а не только точное совпадение.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="rounded-2xl bg-slate-100 p-4 text-sm text-slate-700">
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<span class="font-semibold">Примеры после ответа</span>
|
|||
|
|
<span class="rounded-full bg-cyan-100 px-3 py-1 text-xs text-cyan-700">Контекст</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-2 text-slate-600">После каждого ответа бот выдаёт примеры и пояснения, чтобы закрепить материал.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-surface fade-up" style="animation-delay: 0.12s">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-700">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-3-3v6m8-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p class="text-sm text-slate-500">Адаптация под уровень</p>
|
|||
|
|
<h3 class="font-heading text-xl">Сложность растёт вместе с тобой</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-3 text-sm text-slate-600">Бот повышает сложность, когда ответы стабильны, и снижает, если нужна поддержка.</p>
|
|||
|
|
<div class="mt-4 space-y-2 text-xs text-slate-700">
|
|||
|
|
<div class="flex items-center justify-between rounded-lg bg-slate-100 px-3 py-2">
|
|||
|
|
<span>CEFR A1–C2</span>
|
|||
|
|
<span class="rounded-full bg-blue-50 px-2 py-1 text-blue-700">EN</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center justify-between rounded-lg bg-slate-100 px-3 py-2">
|
|||
|
|
<span>JLPT N5–N1</span>
|
|||
|
|
<span class="rounded-full bg-indigo-50 px-2 py-1 text-indigo-700">JP</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|