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

<script setup lang="ts">
const config = useRuntimeConfig()

function trackBot() {
  fetch(`${config.public.apiBase}/api/track/bot/`, { method: 'POST' }).catch(() => {})
}

function trackChannel() {
  fetch(`${config.public.apiBase}/api/track/channel/`, { method: 'POST' }).catch(() => {})
}
</script>

<template>
  <section class="relative overflow-hidden py-16 sm:py-20 lg:py-24">
    <div class="container mx-auto max-w-6xl px-4">
      <div class="section-shell grid items-center gap-12 p-8 sm:p-10 lg:grid-cols-2">
        <div class="space-y-6 fade-up">
          <div class="badge">AI + Telegram</div>
          <h1 class="font-heading text-3xl leading-tight sm:text-4xl lg:text-5xl">
            Telegram-бот для изучения английского и японского с AI
          </h1>
          <p class="text-lg text-slate-600 sm:text-xl">
            Пополняй словарь, выполняй задания, практикуй диалоги — всё в одном боте. Искусственный интеллект адаптируется
            под твой уровень.
          </p>
          <div class="flex flex-wrap gap-4">
            <a
              class="inline-flex items-center gap-2 rounded-full bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-md transition hover:-translate-y-0.5 hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
              href="https://t.me/animeenigma_language_bot"
              target="_blank"
              rel="noreferrer"
              @click="trackBot"
            >
              Открыть бота
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14m0 0-5-5m5 5-5 5" />
              </svg>
            </a>
            <a
              class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-6 py-3 text-base font-semibold text-slate-900 shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
              href="https://t.me/animeenigmalanguage"
              target="_blank"
              rel="noreferrer"
              @click="trackChannel"
            >
              Telegram-канал
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75 16.5 12l-2.25 2.25m-3-4.5L9 12l2.25 2.25" />
              </svg>
            </a>
          </div>
          <div class="flex flex-wrap gap-3 text-sm text-slate-500">
            <span class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-blue-800">
              <span class="h-2 w-2 rounded-full bg-green-500"></span>
              Уровни A1–C2 и N5–N1
            </span>
            <span class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-indigo-800">
              <span class="h-2 w-2 rounded-full bg-cyan-500"></span>
              Быстрый старт без установки
            </span>
          </div>
        </div>

        <div class="relative isolate">
          <div class="absolute -left-10 -top-14 h-64 w-64 rounded-full bg-blue-200 opacity-60 blur-3xl"></div>
          <div class="absolute -right-16 bottom-6 h-52 w-52 rounded-full bg-gradient-to-br from-indigo-200 to-blue-100 blur-3xl"></div>
          <div class="relative grid gap-4">
            <div class="card-surface fade-up">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-sm text-slate-500">Уровень</p>
                  <p class="text-2xl font-semibold">CEFR B2 · JLPT N3</p>
                </div>
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">
                  <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="M12 6v6l4 2" />
                  </svg>
                </div>
              </div>
              <div class="mt-4 h-2 w-full rounded-full bg-slate-100">
                <div class="h-2 w-3/4 rounded-full bg-blue-600"></div>
              </div>
              <p class="mt-3 text-sm text-slate-600">AI подбирает задания под оба языка одновременно.</p>
            </div>
            <div class="card-surface fade-up" style="animation-delay: 0.15s">
              <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600">
                  <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="M12 11.25c1.864 0 3.375-1.511 3.375-3.375S13.864 4.5 12 4.5s-3.375 1.511-3.375 3.375S10.136 11.25 12 11.25Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 20.25a6.75 6.75 0 1 1 13.5 0" />
                  </svg>
                </div>
                <div>
                  <p class="text-sm text-slate-500">Диалоги</p>
                  <p class="text-lg font-semibold text-slate-900">AI-собеседник и мгновенные подсказки</p>
                </div>
              </div>
              <div class="mt-4 flex flex-wrap justify-center gap-2 text-xs text-slate-700">
                <span class="rounded-full bg-blue-50 px-3 py-2 text-blue-800">Ресторан</span>
                <span class="rounded-full bg-indigo-50 px-3 py-2 text-indigo-800">Путешествия</span>
                <span class="rounded-full bg-slate-100 px-3 py-2 text-slate-800">Работа</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>