40 lines
2.5 KiB
Vue
40 lines
2.5 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="mb-10 flex flex-col gap-3 sm:mb-12 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 помогает учиться в любом чате Telegram, без лишних приложений.</p>
|
||
</div>
|
||
<div class="text-sm text-slate-500">Карточки реагируют на hover и подчеркивают ключевые функции.</div>
|
||
</div>
|
||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
<div
|
||
v-for="(item, idx) in items"
|
||
:key="item.title"
|
||
class="card-surface fade-up"
|
||
:style="{ animationDelay: `${idx * 0.06}s` }"
|
||
>
|
||
<div class="flex items-center gap-3">
|
||
<div class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-50 text-lg">{{ item.emoji }}</div>
|
||
<h3 class="font-heading text-lg">{{ item.title }}</h3>
|
||
</div>
|
||
<p class="mt-3 text-sm text-slate-600">{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const items = [
|
||
{ emoji: '🤖', title: 'AI внутри', desc: 'Умная проверка ответов, генерация заданий и диалоговая практика на лету.' },
|
||
{ emoji: '📱', title: 'Всегда под рукой', desc: 'Учись прямо в Telegram на телефоне или десктопе — ничего не нужно устанавливать.' },
|
||
{ emoji: '🎯', title: 'Персональный подход', desc: 'Задания и диалоги адаптируются под уровень A1–C2 и N5–N1.' },
|
||
{ emoji: '📚', title: 'Контекст важен', desc: 'Слова сохраняются вместе с примерами, чтобы запоминать в реальных ситуациях.' },
|
||
{ emoji: '🆓', title: 'Бесплатно', desc: 'Основной функционал доступен без оплаты — достаточно открыть бота.' },
|
||
{ emoji: '⚡', title: 'Быстрый старт', desc: 'Первые задания за минуту: бот сразу подбирает нужный сценарий.' }
|
||
]
|
||
</script>
|