ONYX: шаблон лендинга для сервисных центров

Одностраничный шаблон лендинга, управляемый скроллом, для магазинов iPhone и сервисных центров. Демо показывает вымышленную сеть в пяти городах Казахстана. Все данные бизнеса (бренд, адреса, телефоны, цены, отзывы) выдуманы, и страница прямо об этом говорит.

Владельцы небольших сервисных центров и розничных сетей без сайта. А ещё это основа, которую я могу перебрендировать под реального клиента.

Малому бизнесу нужен сайт, который продаёт и быстро запускается. Магазины, цены и фото лежат в JSON, чек-лист ребрендинга есть в README, а один выбор города переписывает все контактные ссылки на странице (WhatsApp, звонок, Instagram, Telegram, маршрут). На телефоне нижняя панель держит WhatsApp и звонок под рукой.

Сольный проект: дизайн и разработка.

Проект показывает, что я умею делать фронтенд с насыщенной анимацией, который при этом безопасно деградирует, и это шаблон, который я могу переиспользовать для клиентов.

• HTML
• CSS
• JavaScript
• GSAP
• Lenis

HTML, CSS и чистый JavaScript (ES modules), GSAP со ScrollTrigger и SplitText, плавный скролл Lenis, Node test runner, деплой на Vercel. Без фреймворка и без сборки.

• Три режима: полная анимация, статичная страница (reduced motion, нет GSAP или ошибка при инициализации) и читаемая страница без JavaScript.
• Data-driven: магазины, цены и фото берутся из JSON, а HTML-билдеры экранируют каждое значение из данных.
• Производительность: Lenis загружается только для мыши и тачпада; зум в hero ограничен после замера нагрузки на GPU; фото в WebP с srcset и lazy loading.
• Доступность: aria-label на разбитых на части заголовках, live region на карточке магазина и тест, который проверяет цветовые токены на контраст по WCAG.
• Демо-режим: клик по контактной ссылке показывает toast с объяснением, что произошло бы, вместо перехода со страницы.
• 166 unit-тестов.

onyx-landing-pi.vercel.app