ORIVA: концепт магазина аудиотехники с комнатой прослушивания

VITON¹³ делает концепт-сайты, чтобы показать свой диапазон в жанрах, где у нас пока нет клиентского проекта. ORIVA — один из них: интернет-магазин вымышленного акустического ателье, которое продаёт наушники, акустику, усилители, винил и аксессуары. Бренд, изделия, цены и бутики придуманы; сайт написан на русском.

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

18 страниц: главная, каталог, карточка товара, корзина, оформление, подтверждение заказа, личный кабинет, избранное, журнал, бутики, ателье, доставка, сервис, контакты, политика конфиденциальности, оферта, cookie и 404. В каталоге 13 изделий с фильтрами по категории, цене, цвету и меткам, сортировкой и чипами активных фильтров. В карточке — галерея с лайтбоксом, выбор цвета и количества, аккордеоны, отзывы и похожие товары.

Корзина принимает 2 демо-промокода и показывает шкалу до бесплатной доставки от 30 000 рублей — это демо-порог. Оформление идёт в три шага с проверкой полей: контакты, доставка, оплата. Демо-кабинет умеет вход и регистрацию, показывает заказы, избранное, адреса и гарантии. Бутики в 6 городах стоят на интерактивной карте с фильтром по городу и записью на прослушивание.

Комната прослушивания — плеер в виде вращающейся пластинки с тонармом: список из 5 треков, перемотка, громкость и автопереход к следующему треку. Треки общим объёмом около 16 МБ хранятся на самом сайте по лицензии Pixabay. Журнал, страница о доставке, оплате и возврате, FAQ сервиса и юридические страницы дополняют набор.

Главная открывается видео-героем и продолжается историей на скролле со счётчиками. Анимация построена на GSAP со ScrollTrigger и плавной прокрутке Lenis, с мягкими кривыми движения. Ключевой путь — каталог, карточка, оформление: корзина выезжает сбоку, поиск открывается поверх страницы, при первом визите появляется баннер cookie.

Сайт написан на чистых HTML, CSS и JavaScript без сборки. Шапка, подвал и оверлеи рендерятся одним общим скриптом, поэтому все страницы одинаковы. Аккаунты, корзины и записи хранятся в localStorage браузера, и ничего никуда не отправляется. Карта сделана на Leaflet с тайлами OpenStreetMap/CARTO; фотографии — стоковые с Unsplash, видео — с Pexels, всё подключено прямыми ссылками на CDN.

Сейчас это работающий концепт: 18 страниц, 13 изделий, бутики в 6 городах и комната прослушивания на 5 треков — всем можно пользоваться от каталога до подтверждения заказа без сервера. Проверка 22 сентября 2026 года по 17 страницам показала один H1 на каждой, alt у 100% изображений и 0 битых внутренних ссылок.

Lighthouse дал главной SEO 100 и Accessibility 99 и на мобильном, и на десктопе, Performance — 97 на десктопе и 66 на мобильном. Мобильную оценку тянет вниз вес: телефон получает 12,8 МБ, включая видео-героя в Full HD и изображения, а LCP составляет 7,3 с.

ORIVA — концепт, который VITON¹³ сделал, чтобы показать диапазон, а не заказной проект. Ателье, изделия, цены, отзывы и бутики вымышлены. У сайта нет домена, посетителей, поискового трафика и продаж, поэтому о конверсии и выручке он ничего не доказывает. Фотографии и видео — лицензионный сток с Unsplash и Pexels.

Цифры Lighthouse — лабораторный замер главной страницы в один день, а не данные реальных пользователей. SEO 100 покрывает только базу: canonical, Open Graph, JSON-LD, sitemap.xml и robots.txt не настроены. Оформление заказа не принимает оплату и ничего не отправляет: заказы и аккаунты существуют только в браузере посетителя.