Премиальный сайт для
застройщика фахверковых домов

Строительство

Полезин — фахверковые дома и базы отдыха

Разработка премиального корпоративного сайта на WordPress: кастомная тема с нуля, каталог с AJAX-фильтрами, светлая и тёмная темы, конструктор лендингов под рекламу

polezin.ru

О клиенте

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

Фахверк — премиальный сегмент частного домостроения: панорамное остекление, открытые деревянные конструкции, индивидуальная архитектура.

Премиальный корпоративный сайт компании Полезин — фахверковые дома и базы отдыха

Клиент пришёл с готовым дизайном в Figma. В нём было 11 типов страниц, две цветовые темы, три версии под разные экраны и отдельное ТЗ на анимации. Наша задача была точно перенести этот дизайн в работающий сайт и при этом не потерять скорость.

Второе требование шло от маркетинга: под рекламные кампании нужны посадочные страницы, и собирать их маркетолог должен сам — из готовых блоков, без разработчика и без установки конструкторов вроде Elementor, которые раздувают страницу и убивают скорость.

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

Две темы

Один сайт в двух темах

case-polezin1

Тёмная тема

Не инверсия цветов, а отдельный дизайн: свои фоны, своя прозрачность текста, свои оверлеи поверх фото. Выбор сохраняется — при следующем заходе тема остаётся прежней.

  • Отдельная палитра: три уровня чёрного под разные поверхности
  • Текст через прозрачность белого
  • Кнопки и иконки переключаются вместе с темой
  • Переключатель в полноэкранном меню
  • Две цветовых темы сделаны как полноценные версии дизайна
case-polezin11

Светлая тема

Основной режим: воздух, крупная типографика, акцентный оранжевый на белом. Каждый экран собран по макету пиксель в пиксель.

  • Базовая палитра: белый фон, чёрный текст, оранжевый акцент
  • Крупная типографика Inter — от 110px в заголовках до 12px в подписях
  • Границы и разделители — серые токены разной плотности
  • 11 типов страниц свёрстаны полностью в этой теме
  1. 01
    Собрали дизайн-систему до вёрстки первой страницы

    Из Figma вытащили все цвета, шрифты, отступы и сетку в CSS-переменные: 110 базовых токенов и 73 отдельных под темы. Дальше ни один цвет и ни один размер в вёрстке не задавался «на глаз» — только через токен. Именно это потом позволило переключать тему одним атрибутом, а не переписывать стили.

  2. 02
    Сверстали 66 макетов - каждая версия в 3 разрешениях

    Главная, каталог, карточка объекта, проекты, карточка проекта, услуги, страница услуги, технология, о компании, контакты, 404. Каждая — в светлой и тёмной теме, каждая в трёх брейкпоинтах: 1440, 768 и 390. Итого 66 макетов, сверенных с Figma.

  3. 03
    Сделали масштабирование под любой экран

    Все размеры на сайте заданы в rem, а базовый размер шрифта пересчитывается от ширины экрана. На 27-дюймовом мониторе интерфейс крупнее, на ноутбуке — компактнее, пропорции те же. Для каждого из трёх брейкпоинтов своя точка отсчёта, поэтому на 1440, 768 и 390 вёрстка совпадает с макетом пиксель в пиксель.

  4. 04
    Реализовали 12 анимаций по референсам клиента

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

  5. 05
    Собрали каталог с фильтрами без перезагрузки страницы

    Фильтры по типу объекта, площади, этажности и количеству спален. Карточки обновляются на месте, адрес страницы меняется — ссылку можно скопировать и отправить, кнопки «назад» и «вперёд» работают. Пагинация осталась настоящими ссылками вида /catalog/page/2/ — поисковик их видит и индексирует, а пользователь всё равно переходит без перезагрузки.

  6. 06
    Дали маркетологу конструктор лендингов

    16 блоков главной оформлены как отдельные кирпичики: hero, каталог, услуги, технология, проекты, достижения, FAQ, форма, произвольный HTML. Маркетолог собирает посадочную страницу под рекламную кампанию сам — выбирает блоки, задаёт порядок, вставляет код квиза Marquiz. Без разработчика и без установки Elementor.

  7. 07
    Сделали интеграцию с Telegram и AmoCRM

    Заявка с любой формы создаёт контакт и сделку в нужной воронке CRM, дублируется в Telegram и на почту, сохраняется в админке. Логирование — чтобы было видно, если CRM не ответила.

  8. 08
    Отдали клиенту сайт, который редактируется целиком

    3 типа записей, 180 полей в админке и отдельная страница настроек. Через панель меняется всё: фоновое видео, цифры о компании, контакты, объекты каталога с планировками и визуализациями, проекты, услуги, FAQ, тексты cookie-баннер. Разработчик для наполнения не нужен.

Результат

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

66 дизайнов свёрстаны 11 типов страниц в светлой и тёмной теме, каждая в 3 брейкпоинтах
12 анимаций реализованы по референсам из ТЗ
16 блоков конструктора маркетолог собирает лендинг под рекламу без разработчика
Кастомная тема с нуля — без Elementor и других конструкторов, которые тормозят сайт
Весь контент редактируется через админку: 3 типа записей, 180 полей, страница настроек
Интеграция с Telegram и amoCRM: заявка создаёт контакт и сделку, дублируется в Telegram и на почту
Каталог фильтруется без перезагрузки, но пагинация остаётся индексируемой для поиска
case-polezin2
Каталог объектов с фильтрами по площади, этажности и спальням
case-polezin3
Страница о компании - не просто текст, а полноценный конструктор
case-polezin4
Карточка объекта: галерея, планировки, визуализации, характеристики
case-polezin5
Страница услуги с анимированными пунктами

Сайт для премиального продукта

«Полезин» строит фахверковые дома и базы отдыха в премиальном сегменте. Клиент пришёл к нам уже с готовым дизайном в Figma: 11 типов страниц, две цветовые темы, три версии под разные экраны и отдельное ТЗ на анимации. Наша задача была точно перенести этот дизайн в работающий сайт и сделать так, чтобы им можно было самостоятельно управлять после запуска.

Дизайн-система вместо шаблона

Мы начали не с вёрстки первой страницы, а с дизайн-системы: цвета, отступы, сетка и параметры двух тем были вынесены в отдельные токены. На этой базе собрали 11 типов страниц в светлой и тёмной версиях. Каждая версия подготовлена под три размера экрана — всего 66 макетов.

Каталог без перезагрузки

В каталоге можно отфильтровать дома по типу объекта, площади, этажности и количеству спален. Результаты подгружаются без перезагрузки страницы. При этом фильтрация и пагинация работают с отдельными URL, поэтому конкретную подборку можно открыть по ссылке, а страницы каталога остаются доступными для поисковых систем.

Конструктор для маркетолога

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

Заявки сразу в CRM

Заявки с сайта передаются в amoCRM, а уведомление дополнительно приходит в Telegram и на почту. Если CRM не отвечает, это фиксируется в журнале — можно увидеть проблему и не потерять обращение.

Что осталось после запуска

Сайт полностью редактируется через стандартную админку WordPress. В ней можно менять тексты, изображения, объекты каталога, проекты, услуги, FAQ и другие элементы сайта. Всего предусмотрено около 180 редактируемых полей.

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

WordPress ACF Pro JavaScript GSAP Lenis AJAX amoCRM Telegram

Узнайте стоимость и сроки вашего сайта

Расскажите о проекте — предложим план и назовём стоимость

01

Получите 3 варианта решения

под ваш бюджет

02

Отвечаем в течение часа

в рабочее время

03

Работаем напрямую

вы общаетесь с теми, кто делает — без менеджеров