Кэлен Торн
<script setup> import { speak } from '../utils/tts'; const { t } = useI18n(); const countdown = ref(3); const showThought = ref(true); const problemText = t('home.problem'); const solutionPoints = computed(() => t('home.solutions', { returnObjects: true })); let interval: NodeJS.Timeout | null = null; onMounted(() => { speak(t('home.title'), { lang: 'ru-RU' }); interval = setInterval(() => { if (countdown.value > 0) { countdown.value--; } else { showThought.value = false; clearInterval(interval!); } }, 1000); }); onUnmounted(() => { if (interval) clearInterval(interval); }); </script> <template> <!-- Decorative blobs --> <!-- Thinking bubble --> <Transition name="bubble" mode="out-in"> <!-- Arrow pointing to mascot? --> <svg class="absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 text-white" viewBox="0 0 24 14" fill="currentColor"> <path d="M12 14L0 0h24L12 14z" /> </svg> 💡 Перевод мыслей профессионала... </Transition> <!-- Main heading --> <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight max-w-2xl leading-tight text-darkGray drop-shadow-text"> Хватит прятаться от платных переводчиков </h1> <!-- Tagline --> Освободитесь от дорогих сервисов-посредников и получайте быстрый, точный и человеческий перевод за считанные секунды. <!-- Hero interaction: professional shows thinking --> ⬇️ Прокрутите вниз, чтобы увидеть главный перевод Листайте ниже <!-- Bottom visual: face? --> <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7" /> </svg> </template> <style scoped> .bubble-enter-active { transition: all 0.5s ease-out; } .bubble-leave-active { transition: all 0.3s ease-in; } .bubble-enter-from { opacity: 0; transform: scale(0.8) translateY(10px); } .bubble-leave-to { opacity: 0; transform: scale(0.9) translateY(-20px); } @keyframes float-face { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .face-float { animation: float-face 3s ease-in-out infinite; } </style>
О Кэлен Торн
<script setup> import { speak } from '../utils/tts'; const { t } = useI18n(); const countdown = ref(3); const showThought = ref(true); const problemText = t('home.problem'); const solutionPoints = computed(() => t('home.solutions', { returnObjects: true })); let interval: NodeJS.Timeout | null = null; onMounted(() => { speak(t('home.title'...Читать больше