eng-bot-landing/app/components/Progress.vue

<template>
  <section class="py-14 sm:py-16 lg:py-20">
    <div class="container mx-auto max-w-6xl px-4">
      <div class="section-shell p-8 sm:p-10">
        <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">Следи за ростом словаря, точностью ответов и прогресс-барами по уровням.</p>
          </div>
          <div class="text-sm text-slate-500">Данные всегда рядом в боте.</div>
        </div>
        <div class="mt-8 grid gap-6 md:grid-cols-2">
          <div class="card-surface fade-up">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-slate-500">Статистика слов</p>
                <h3 class="font-heading text-xl">2 450 слов в словаре</h3>
              </div>
              <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="M4.5 19.5 9 15l4 4 6-6v6h-15Z" />
                </svg>
              </div>
            </div>
            <div class="mt-4 space-y-3">
              <div>
                <div class="flex items-center justify-between text-sm text-slate-600">
                  <span>История повторений</span>
                  <span>+18% за неделю</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-100">
                  <div class="h-2 w-4/5 rounded-full bg-blue-600"></div>
                </div>
              </div>
              <div>
                <div class="flex items-center justify-between text-sm text-slate-600">
                  <span>Точность заданий</span>
                  <span>92%</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-100">
                  <div class="h-2 w-11/12 rounded-full bg-emerald-500"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-surface fade-up" style="animation-delay: 0.12s">
            <p class="text-sm text-slate-500">Прогресс по уровням</p>
            <h3 class="font-heading text-lg">CEFR и JLPT в одном дашборде</h3>
            <div class="mt-4 grid grid-cols-2 gap-3 text-sm text-slate-700">
              <div class="rounded-xl bg-slate-100 p-3">
                <div class="flex items-center justify-between">
                  <span>CEFR</span>
                  <span class="rounded-full bg-blue-50 px-2 py-1 text-xs text-blue-700">B2</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-200">
                  <div class="h-2 w-[72%] rounded-full bg-blue-600"></div>
                </div>
              </div>
              <div class="rounded-xl bg-slate-100 p-3">
                <div class="flex items-center justify-between">
                  <span>JLPT</span>
                  <span class="rounded-full bg-indigo-50 px-2 py-1 text-xs text-indigo-700">N3</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-200">
                  <div class="h-2 w-[64%] rounded-full bg-indigo-500"></div>
                </div>
              </div>
              <div class="rounded-xl bg-slate-100 p-3">
                <div class="flex items-center justify-between">
                  <span>Дни подряд</span>
                  <span class="rounded-full bg-green-50 px-2 py-1 text-xs text-green-700">12</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-200">
                  <div class="h-2 w-[90%] rounded-full bg-emerald-500"></div>
                </div>
              </div>
              <div class="rounded-xl bg-slate-100 p-3">
                <div class="flex items-center justify-between">
                  <span>Диалоги</span>
                  <span class="rounded-full bg-amber-50 px-2 py-1 text-xs text-amber-700">128</span>
                </div>
                <div class="mt-2 h-2 w-full rounded-full bg-slate-200">
                  <div class="h-2 w-[55%] rounded-full bg-cyan-500"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>