На чём собрано и почему
Фронтенд
Каталог
Конверсия
Инфраструктура
Что это за продукт
Atabike — витрина веломагазина в Алматы в эстетике инженерного минимализма. Каталог моделей с фильтрами и быстрым просмотром, подбор ростовки по росту и запись на тест-драйв — всё на чистом HTML, CSS и JS.
Ноль зависимостей и фреймворков: сайт грузится мгновенно, не ломается от обновлений пакетов и легко правится вручную.
Витрина, а не «пишите в директ»
Показать модели с ценами и характеристиками, помочь подобрать размер рамы и дать записаться на тест-драйв — в чистой минималистичной эстетике и без веса фреймворков.
- каталог моделей с фильтрами и наличием
- подбор ростовки по росту
- запись на тест-драйв с сайта
- минимальный вес — без фреймворков
Продавали в Instagram и 2ГИС
Велосипеды показывали в Instagram и на 2ГИС: без каталога, без цен, без помощи с размером. Покупатель не понимал, какая ростовка ему нужна, и уходил думать.
Записаться на тест-драйв можно было только через переписку. Нужна была лёгкая витрина, которая закрывает выбор и подбор размера сама.
Как это выглядит вживую
Полностраничный скриншот — прокрутите внутри рамки или откройте живой сайт.
Витрина, которая закрывает выбор
Каталог с быстрым просмотром, подбор ростовки и запись на тест-драйв — собраны так, чтобы посетитель выбрал модель, понял размер и записался, не открывая мессенджер.
Модели, фильтры, наличие
Сетка моделей с фильтрами по типу — город, гравий, шоссе. Клик открывает быстрый просмотр: фото, цена, доступные размеры, цвета и наличие, без ухода со страницы.
- сетка моделей с фильтрами по типу
- модалка быстрого просмотра (фото, цена, размеры)
- цвета и наличие прямо в карточке
- пустое состояние, если под фильтр ничего нет
Размер рамы по росту
Отдельный блок помогает выбрать раму по росту: вводишь рост — получаешь рекомендованную ростовку. Барьер «а какой размер мне нужен?» снят ещё до заявки.
- подбор размера рамы по росту
- понятная таблица ростовки
- снимает главный барьер перед покупкой велосипеда
- ведёт к записи на тест-драйв
Заявка с валидацией
Форма записи на тест-драйв: модель, дата, имя и телефон с валидацией полей и подсказками об ошибках. После отправки — понятное подтверждение, без ухода в мессенджеры вслепую.
- выбор модели, даты и времени
- валидация имени и телефона с ошибками
- подтверждение записи на месте
- доступна с клавиатуры
Что делает лёгкую витрину надёжной
- Ноль зависимостей. Ванильный JS без сборки и фреймворков — минимальный вес и никакого устаревания пакетов.
- Хардненная статика. X-Content-Type-Options: nosniff, robots и sitemap; на Vercel — заголовки безопасности и кэш ассетов.
- Доступность. Клавиатурное меню с ловушкой фокуса, корректная иерархия заголовков, контраст и skip-ссылка; noscript-фолбэк.
- Демо-контакты — заглушки. Телефон и адрес намеренно оставлены плейсхолдерами, чтобы не шли случайные звонки; меняются в одном месте.
Нужен такой же магазин?
YK Partnership собирает сайты и интернет-магазины под ключ — от лёгкой статики до сложных сервисов. Расскажите о задаче, предложим решение.