Лендинг переводчика Казахтелеком

Тип решения

Сайт, лендинг, витрина, афиша, меню → статика: 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. Тема по умолчанию — светлая: <html lang="ru" data-theme="light">; не ставь 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) в своём <style> не переопределяй — ДС рисует их сама; свой <style> — только сетка и отступы. <body class="kt-ai-app">. Перед публикацией проверь сам: в HTML не меньше десятка классов kt-ai-*, каждый var(--kt-ai-…) есть в tokens.css, свои hex-цвета — только внутри логотипа. Иначе это не дизайн-система, а перекраска. Таблицы, списки, журналы, дашборды и формы собирай из готовых классов ДС (design-system/COMPONENTS.md), архетип экрана выбирай по design-system/docs/ARCHETYPES.md. Каркас страницы — из design.md, с обычными <link>. Шаблон design-system/templates/kt-ai-app-shell.html целиком не копируй: его скрипты-загрузчики (data-kt-ai-base-resolver, data-kt-ai-boot) тянут CSS с корня сайта по абсолютному пути /design-system/…, а сайт публикуется в подпапке — стили не загрузятся. Подключай только файлы, которые реально лежат в design-system/ (проверь ls design-system): файла kt-ai-components.js там нет. Свой стиль не выдумывай, Bootstrap/Tailwind/Material/Google Fonts не подключай, сырые hex-цвета не пиши. Папку design-system/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.

7.1 KiB Raw Permalink Blame History Unescape Escape