# Лендинг переводчика Казахтелеком ## Тип решения Сайт, лендинг, витрина, афиша, меню → статика: index.html + style.css + script.js на ванильном JS (Tailwind только с CDN). Публикуется по постоянной ссылке. ## Задача Создать одностраничный сайт (лендинг) в стиле Казахстана для презентации нового продукта — сервиса перевода. ## Кто пользуется Потенциальные клиенты и партнеры Казахтелекома, просматривающие презентацию продукта. ## Что делает прототип - Отображает главный экран с заголовком продукта и фоновым изображением в национальном стиле (орнамент, степь или современная архитектура Астаны/Алматы). - Показывает блок «О продукте» с описанием возможностей переводчика. - Демонстрирует интерфейс перевода: поле ввода текста, выбор языков (Казахский ↔ Русский ↔ Английский), кнопка «Перевести» и область вывода результата. - Содержит форму захвата контактов (Имя, Телефон) с кнопкой «Оставить заявку». - Адаптирован под мобильные устройства и десктоп. - **Важно:** Данные сохраняются между открытиями страницы (localStorage) и удаление/сброс идет через подтверждение (если применимо к демо-режиму). ## Демо-данные - Заголовки и тексты на казахском и русском языках. - 3 примера переведенных фраз в блоке преимуществ. - Имитация ответа сервера при нажатии кнопки перевода (задержка 1 сек). ## Допущения - Стиль «Казахстан» реализован через цветовую гамму (голубой, золотой, белый) и использование шрифтов с поддержкой кириллицы. - Функционал перевода эмулируется на стороне клиента (заглушка), так как реальный вызов API требует настройки контекста, не указанного в заявке. ## Чего пока нет - Реальной интеграции с нейросетями для перевода (только имитация). - Отправки заявок в CRM или на почту. - Личного кабинета пользователя. ## Дизайн — дизайн-система KT AI Весь интерфейс собирай на дизайн-системе KT AI, которая уже лежит в папке проекта `design-system/`. Перед первой строкой вёрстки прочитай `design.md` и `design-system/AGENTS.md` и следуй им. Подключай файлы ДС относительными путями и в этом порядке: `./design-system/kt-ai-fonts.css`, `./design-system/kt-ai-tokens.css`, `./design-system/kt-ai-components.css`, `./design-system/kt-ai-page.css`. Тема по умолчанию — светлая: ``; не ставь `dark` и не ставь `auto` (auto уходит в тёмную по системной теме). Переключатель темы можно оставить, но открываться страница должна светлой. Цвета, отступы и размеры — только токенами `var(--kt-ai-…)`, иконки — из `design-system/icons/kt-ai-lucide-sprite.svg`. Плашки показателей — `.kt-ai-kpi` (`.value`, `.label`, `.hint`) в полосе `.kt-ai-kpi-strip`; таблицы — по правилам ДС (frameless, `.kt-ai-table-wrap`, числа вправо, `tabular-nums`); графики — чистый SVG/div высотой 190–220px, столбцы 20–28px с радиусом 2px, цвета только `var(--kt-ai-chart-blue|green|orange|pink|red|salmon)`, подсказки значений — `data-kt-tip` + `./design-system/kt-ai-chart-tip.js`. Имена токенов не выдумывай — только существующие в `design-system/kt-ai-tokens.css`: --kt-ai-fg / -fg-muted / -fg-faint, --kt-ai-bg / -bg-soft, --kt-ai-card-bg / -card-border, --kt-ai-border / -border-strong, --kt-ai-primary, --kt-ai-radius-xl / -3xl, --kt-ai-font-sans / -mono, --kt-ai-chart-blue / -green / -orange / -pink / -red / -salmon, --kt-ai-status-ok-fg / -warn-fg / -risk-fg. Несуществующий токен (`--kt-ai-text-primary`, `--kt-ai-bg-surface`, `--kt-ai-font-family`) молча не применится — страница выйдет в Times New Roman без рамок. Классы ДС (`.kt-ai-kpi`, `.kt-ai-card`, `.kt-ai-table`, `.kt-ai-btn`, `.kt-ai-chip`, `.kt-ai-input`) в своём `