Initial commit (fresh repo)
This commit is contained in:
Maxim
109
app/components/Hero.vue
Normal file
109
app/components/Hero.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<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 grid grid-cols-3 gap-2 text-xs text-slate-700">
|
||||
<span class="rounded-full bg-blue-50 px-3 py-2 text-center text-blue-800">Ресторан</span>
|
||||
<span class="rounded-full bg-indigo-50 px-3 py-2 text-center text-indigo-800">Путешествия</span>
|
||||
<span class="rounded-full bg-slate-100 px-3 py-2 text-center text-slate-800">Работа</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user