VITON¹³ SCHOOL: una landing de cursos serena en cinco idiomas, con una lección en vivo sobre la foto de un portátil

VITON¹³ SCHOOL es la escuela online del ecosistema VITON¹³, en school.viton13.com. Enseña tres programas aplicados —Inteligencia Artificial, Diseño en Inteligencia Artificial y SEO para sitios web— con precios en rublos de 1300, 2600 y 3900 ₽.

La escuela necesitaba una portada que explicara tres cursos y un método sin gritar, mostrara cómo es una lección antes de pagar nada y diera los mismos datos en inglés, ruso, español, francés e hindi.

Una landing en cinco ediciones: el inglés sin prefijo y luego /ru, /es, /fr y /hi, enlazadas con hreflang. La página avanza como una secuencia: una primera pantalla con una cinta de las trece habilidades de la escuela, tres escaparates de cursos con una tarjeta de manifiesto entre ellos, contadores, tarjetas de cursos con precios y botones de compra, el método en cuatro pasos, un planificador de cursos de tres preguntas, admisión, noticias, guías, preguntas frecuentes y un formulario de lista de espera.

El aspecto sigue a las webs de producto de IA más serenas, como sanalabs.com: una sola grotesca, Inter Tight, casi siempre en peso 400, botones negros en forma de píldora, amplios planos grises y un gran bodegón por curso. Las seis fotografías se generaron para la escuela con GPT Image 2.5 en Higgsfield.

En el escaparate de Inteligencia Artificial, la pantalla del portátil no forma parte de la imagen: medimos su posición sobre un original con croma verde y colocamos encima una lección HTML en vivo, con la lista de módulos, el paso actual, una línea para preguntar al mentor y una barra de progreso. Cuatro pestañas cambian lo que muestra la pantalla; avanzan cada 6,5 segundos mientras la sección está a la vista, se detienen en cuanto el visitante elige una y se quedan quietas si el sistema pide reducir el movimiento. Los escaparates de diseño y SEO muestran el mismo tipo de paso en un panel flotante.

La landing forma parte de la aplicación Next.js de VITON¹³ y tiene su propio subdominio. Los nombres, precios y módulos de los cursos salen de un único archivo de datos, así que contadores, tarjetas, menús y pie de página leen las mismas cifras; los precios se formatean para cada idioma y la letra pequeña aclara que no se cobra nada hasta que la escuela confirma el inicio con el alumno.

La landing está publicada en school.viton13.com. El 27 de septiembre de 2026 las cinco ediciones respondían con código 200 y el mapa del sitio de la escuela listaba 30 URL: en cada idioma, la landing, la página de noticias, el índice de guías y tres guías. Renderizamos las 30 a 390 px: cada una tiene un solo H1, una URL canónica que apunta a sí misma, hreflang a las cinco ediciones y x-default, y Open Graph; ninguna se desplaza en horizontal y 30 destinos de enlaces internos respondieron sin errores.

Ese día pasamos Lighthouse 13.4 tres veces por la página de inicio en cada formato. En un móvil simulado, el rendimiento fue de 87, 93 y 93, con el mayor elemento pintado a los 3,1 s en la pasada mediana, 21 ms de tiempo total de bloqueo y ningún desplazamiento de diseño. En escritorio, el rendimiento fue 100 en todas las pasadas y el mayor elemento llegó a los 0,8 s. Accesibilidad 97, buenas prácticas 100 y SEO 100 en ambos; la página entera, fotos incluidas, pesa unos 0,8 MB en móvil y 1,0 MB en escritorio.

Es la escuela propia de VITON¹³, no un proyecto de cliente. El caso muestra cómo está hecha la página y lo rápido que carga, no cómo funciona con los alumnos: no aportamos matrículas, inscripciones en la lista de espera, ventas ni tráfico.

Las fotografías están generadas con IA y son escenas preparadas: nadie en ellas es alumno, profesor ni cliente de VITON¹³, y la lección de la pantalla es un ejemplo, no el trabajo de un alumno. En la landing, las imágenes tienen texto alternativo descriptivo pero aún no una etiqueta visible de IA, por eso lo decimos aquí; las tarjetas de guías más abajo usan fotografías con licencia de Unsplash. Lighthouse es una prueba de laboratorio desde un MacBook en un solo día, no datos de campo de visitantes reales, y el diseño sigue un género marcado por la web de producto de otra empresa; los textos, las fotos y el código son nuestros.

Cómo revisar el portafolio de un estudio web →