Интернет-магазин (товарная страница) для продажи электрического велосипеда. Задача — быстро показать ценность модели, спецификации и цену, провести пользователя к оформлению заказа. Сделал полный цикл: прототип → минималистичный чёрно-белый дизайн с акцентом на продукт → адаптивная вёрстка → интеграции и оптимизация.
Ключевые блоки
— Hero с крупным фото велосипеда и CTA «заказать».
— Быстрые факты: запас хода, макс. скорость, вес.
— Раздел «преимущества» с подзаголовками (тормоза/подсветка, управление, безопасность, дисплей и т. д.).
— Таблица характеристик по группам: рама, трансмиссия, тормоза, привод, прочее.
— Лайфстайл-галерея.
— Блок «заказ»: цена в евро, выбор цвета, форма заявки.
— Футер с контактами и соцсетями.
Техническая реализация
Адаптивная сетка (Grid/Flex), ретина-изображения, (WebP/AVIF), lazy-loading, минификация и критический CSS. Формы с валидацией и антиспамом (honeypot/маска телефона). SEO-основа: корректные H1–H3, meta + OG/Twitter, favicon-пакет, микроразметка Schema.org Product/Offer/BreadcrumbList, sitemap.xml и robots.txt. Подключены события e-commerce в GA4/Метрике (view_item, add_to_cart/lead). Доступность: alt-тексты, aria-атрибуты, контраст.
Результат
Лёгкая и быстрая витрина товара: покупатель за 1–2 экрана понимает преимущества и характеристики, видит цену и оставляет заявку в пару кликов. Страница готова к SEO и платному трафику.
https://alexandercherepkin.github.io/utopia-site/