VITON¹³ SCHOOL: спокойный лендинг курсов на пяти языках с живым уроком на фотографии ноутбука

VITON¹³ SCHOOL — онлайн-школа внутри экосистемы VITON¹³, её адрес — school.viton13.com. В ней три прикладные программы: «Искусственный интеллект», «Дизайн в искусственном интеллекте» и «SEO сайта» стоимостью 1300, 2600 и 3900 ₽.

Школе нужна была главная страница, которая без рекламного крика объясняет три курса и один метод, ещё до оплаты показывает, как выглядит урок, и сообщает одни и те же факты на английском, русском, испанском, французском и хинди.

Один лендинг в пяти версиях: английская без префикса, остальные под /ru, /es, /fr и /hi, связанные тегами hreflang. Страница выстроена как последовательность: первый экран с бегущей строкой из тринадцати навыков школы, три витрины курсов с карточкой манифеста между ними, счётчики, карточки курсов с ценами и кнопками оформления, метод из четырёх шагов, подбор курса по трём вопросам, поступление, новости, статьи, вопросы и ответы и форма листа ожидания.

Облик — в жанре спокойных продуктовых сайтов об ИИ вроде sanalabs.com: один гротеск Inter Tight, набранный в основном начертанием 400, чёрные кнопки-таблетки, широкие серые плоскости и по одному крупному натюрморту на курс. Шесть фотографий сгенерированы для школы в GPT Image 2.5 через Higgsfield.

В витрине курса «Искусственный интеллект» экран ноутбука не нарисован на снимке: мы измерили его положение по оригиналу с хромакеем и положили поверх живой HTML-урок — список модулей, текущий шаг, строку вопроса куратору и шкалу прогресса. Четыре вкладки меняют содержимое экрана: пока секция на виду, они переключаются каждые 6,5 секунды, останавливаются, как только посетитель выбирает вкладку сам, и не двигаются, если система просит уменьшить движение. Витрины дизайна и SEO показывают такой же шаг на парящей панели.

Лендинг — часть Next.js-приложения VITON¹³ и живёт на собственном поддомене. Названия, цены и модули курсов берутся из одного файла данных, поэтому счётчики, карточки, меню и подвал показывают одни и те же цифры; цены форматируются под каждый язык, а в сносках сказано, что до подтверждения старта школой деньги не списываются.

Лендинг работает по адресу school.viton13.com. 27 сентября 2026 года все пять языковых версий отвечали кодом 200, а карта сайта школы содержала 30 URL: на каждом языке — лендинг, новости, список статей и три статьи. Мы отрисовали все 30 страниц при ширине 390 px: у каждой один H1, канонический URL на саму себя, hreflang на пять версий и x-default и Open Graph; ни одна не прокручивается вбок, а 30 внутренних адресов из ссылок ответили без ошибок.

В тот же день мы трижды прогнали Lighthouse 13.4 по главной странице для телефона и для компьютера. На эмулированном телефоне производительность — 87, 93 и 93; в медианном прогоне крупнейший элемент отрисован за 3,1 с, общее время блокировки — 21 мс, сдвигов вёрстки нет. На компьютере производительность — 100 во всех прогонах, крупнейший элемент появляется за 0,8 с. Доступность — 97, рекомендации — 100, SEO — 100 на обоих устройствах; вся страница вместе с фотографиями весит около 0,8 МБ на телефоне и 1,0 МБ на компьютере.

Это собственная школа VITON¹³, а не клиентский проект. Кейс показывает, как устроена страница и как быстро она загружается, но не то, как она работает на учеников: данных о записях, заявках в лист ожидания, продажах и трафике здесь нет.

Фотографии сгенерированы ИИ и постановочные: на них нет учеников, преподавателей или клиентов VITON¹³, а урок на экране ноутбука — пример, а не работа ученика. На самом лендинге у изображений есть описательный alt-текст, но видимой пометки об ИИ пока нет, поэтому мы указываем это здесь; карточки статей ниже по странице используют лицензионные фотографии с Unsplash. Lighthouse — лабораторный тест с одного MacBook в один день, а не полевые данные реальных посетителей, а вёрстка следует жанру, заданному продуктовым сайтом другой компании; тексты, фотографии и код — наши.

Как проверить портфолио веб-студии →