Велсора.рф: промо-сайт и интернет-магазин диванов на Next.js — 57 расцветок, фильтры и корзина

Клиент: Велсора — бренд диванов, который продаёт напрямую через интернет. Компания отказалась от выставочных залов, чтобы не закладывать их аренду в цену; позиция бренда — «Вы платите за качество, а не за витрину». В каталоге 19 моделей — прямые, угловые и модульные диваны, диваны-кровати — в 57 расцветках. Доставка — по Москве, области и соседним регионам.

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

Задача: сделать промо-главную с видео и интернет-магазин — каталог с фильтрами, карточки с выбором цвета, корзину, заказ в один клик, поиск и страницы доставки, гарантии и бренда. Покупатель должен быстро найти модель в нужной расцветке, видеть итог с доставкой до оформления и иметь возможность отправить подборку ссылкой. Под поисковые запросы нужны отдельные посадочные страницы.

Структура: шоурум в браузере

Сайт мы разделили на три части. Промо-главная создаёт настроение и объясняет позицию бренда. Магазин отвечает за выбор и заказ: каталог с фильтрами, карточка модели с выбором цвета, корзина и заказ в один клик. Поиск и посадочные страницы ведут покупателя к нужной модели с главной и из поисковиков.

Промо-главная

Первый экран — видео с интерьером и обещание «Диваны от производителя без наценок шоурумов». Стоит начать листать, и заголовок растворяется с размытием, а на его месте появляется «Выбери свой диван»: стрелки меняют интерьеры, плюс ведёт в каталог.

Ниже идут:

• популярные модели — пять карточек сеткой 3 + 2 с ценами «от»;

• истории — два слайда с полосами прогресса по 8 секунд и карточкой «Мы создаем мебель, вы создаете истории»;

• тёмный блок «Эстетика комфорта» с цифрами и текстом бренда;

• форма обратного звонка.

Блок «Почему выбирают нас»

Пять пунктов: своё производство, доставка по Москве, гарантия 18 месяцев, честная цена и особый подход. Фоном секции служит картинка того пункта, который ближе к центру экрана. Картинки сменяются плавным переходом через два слоя без белых вспышек: сайт заранее подгружает все пять. На телефоне картинка стоит внутри карточки каждого пункта. Интерьеры на сайте — визуализации, а не фотосъёмка.

Поиск по каталогу на ⌘K

Поиск открывается иконкой или сочетанием ⌘K / Ctrl+K прямо с главной и сразу подгружает каталог. Каждое слово запроса должно найтись в названии, цвете, ткани или расцветке. Если точных совпадений нет, поиск прощает опечатки: одну в слове из 4–5 букв, две — в слове длиннее. Так находятся «угловй» с опечаткой и «черный» без «ё». В выдаче — до 12 карточек с подсвеченным совпадением.

Каталог и фильтры

В каталоге «Диваны и кресла» 57 карточек: у каждой из 19 моделей каждая расцветка стоит отдельной карточкой. Шесть фильтров и сортировка отвечают на вопросы, с которых начинают выбор дивана:

• цена;

• тип;

• механизм раскладывания;

• размер — три готовых варианта или свой размер в сантиметрах;

• ткань — например, «Рогожка» оставляет четыре модели;

• цвет — двенадцать расцветок.

Выбор записывается в адрес страницы, поэтому подборку можно отправить ссылкой, а кнопка «Сбросить» возвращает весь каталог.

Карточка модели

Карточка собирает решение на одном экране: галерея, цена, кнопка «В корзину» и заказ в один клик по телефону. Образцы цвета переключают галерею и название, а у каждой расцветки своя ссылка с артикулом — по ней ведут карточки каталога и поиск.

Основные характеристики видны сразу: размеры, спальное место, гарантия, каркас и механизм трансформации. Например, у дивана «Белла» — четыре расцветки, 225 × 90 × 90 см, спальное место 190 × 140 см, деревянный каркас и механизм «еврокнижка». «Показать всё» ведёт к полной таблице характеристик, ниже — описание и похожие товары. Стоимость доставки, 500 ₽, указана прямо в карточке. На телефоне после добавления кнопка меняется на «Добавлено», и появляется уведомление.

Корзина и доставка

Корзина считает итог сразу с доставкой: 500 ₽, срок 1–7 дней, рядом поле промокода. Например, диван «Белла» за 23 999 ₽ с доставкой — 24 499 ₽.

Страница «Доставка» перечисляет 54 населённых пункта Москвы, области и соседних регионов — от Химок и Балашихи до Твери, Ярославля и Владимира. Подъём на этаж и сборка оплачиваются отдельно, и это указано на той же странице.

Посадочные страницы и служебные разделы

Под поисковые запросы мы собрали 15 посадочных страниц. Десять — по типу, ткани и комнате: угловые, прямые и модульные диваны, диваны-кровати, диваны из велюра, из экокожи и с тканевой обивкой, диваны для гостиной, в комнату и для ежедневного сна. Пять — по городам: Москва, Калуга, Тверь, Ярославль и Владимир. На каждой странице — каталог с фильтрами. Есть карта сайта.

Отдельные страницы — доставка, гарантия, о бренде, контакты и правовые документы. Яндекс Метрика запускается только после согласия на cookies, на сайте работает онлайн-чат.

Технологии

Магазин собран на Next.js. Поиск подгружает каталог при открытии и ищет с учётом опечаток, фильтры хранят состояние в адресе страницы, у каждой расцветки — свой артикул в ссылке. Главная и магазин свёрстаны под телефон. Яндекс Метрика подключена с согласием на cookies.

Велсора.рф работает как промо-сайт и интернет-магазин бренда: 19 моделей в 57 расцветках, каталог с шестью фильтрами, поиск по всему каталогу с главной и заказ с расчётом доставки.

Что получил клиент

• Промо-главную: видео на первом экране, сцену при прокрутке, слайдер интерьеров, истории и форму обратного звонка

• Интернет-магазин на Next.js: каталог из 57 карточек с сортировкой и шестью фильтрами

• Карточки моделей с выбором расцветки, галереей и заказом в один клик

• Корзину с промокодом и расчётом доставки

• Поиск по всему каталогу на ⌘K с исправлением опечаток

• 15 посадочных страниц: по типу, ткани, комнате и городам

• Страницы доставки на 54 населённых пункта, гарантии, о бренде, контактов и правовые

• Согласие на cookies до запуска Яндекс Метрики, онлайн-чат и мобильную вёрстку

Сайт: https://xn--80adjypmf.xn--p1ai/ (велсора.рф)