53 lines
3.5 KiB
Vue
53 lines
3.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="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">6 сценариев с AI-собеседником</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-5 sm:grid-cols-2 lg:grid-cols-3">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, idx) in dialogs"
|
|||
|
|
:key="item.title"
|
|||
|
|
class="card-surface fade-up"
|
|||
|
|
:style="{ animationDelay: `${idx * 0.07}s` }"
|
|||
|
|
>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 text-lg">{{ item.emoji }}</div>
|
|||
|
|
<div>
|
|||
|
|
<p class="text-sm text-slate-500">{{ item.label }}</p>
|
|||
|
|
<h3 class="font-heading text-lg">{{ item.title }}</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-3 text-sm text-slate-600">{{ item.desc }}</p>
|
|||
|
|
<div class="mt-4 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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
const dialogs = [
|
|||
|
|
{ emoji: '🍣', label: 'Ресторан', title: 'Бронь и заказ', desc: 'Практикуй заказ блюд, замену ингредиентов и small talk с официантом.' },
|
|||
|
|
{ emoji: '🛍️', label: 'Магазин', title: 'Покупки и возврат', desc: 'Спрашивай про размеры, оформляй возвраты и уточняй акции.' },
|
|||
|
|
{ emoji: '✈️', label: 'Путешествия', title: 'Аэропорт и отель', desc: 'Check-in, паспортный контроль, просьбы на стойке регистрации.' },
|
|||
|
|
{ emoji: '💼', label: 'Работа', title: 'Созвоны и письма', desc: 'Стэнд-апы, уточнение задач, переговоры с заказчиком.' },
|
|||
|
|
{ emoji: '⚕️', label: 'Врач', title: 'Запись и симптомы', desc: 'Опиши симптомы, получи рекомендации и отработай мед. лексику.' },
|
|||
|
|
{ emoji: '💬', label: 'Свободный диалог', title: 'Топики по запросу', desc: 'AI поддержит разговор на любую тему и подскажет формулировки.' }
|
|||
|
|
]
|
|||
|
|
</script>
|