ГК «МЕТРЫ»: три сайта девелопера в одном — с каталогом, лотами и PDF по каждой квартире
Девелопер реновирует исторические дома Петербурга и Москвы с 2018 года, а в интернете жил на трёх разных сайтах. Мы собрали их в один: имиджевая главная, которая с первого экрана отвечает «куда вложить», каталог на реальных объектах, страницы домов и лотов, которые собираются из одной модели данных.
У компании было три сайта: корпоративный metry.group на WordPress и два на Tilda — pro.metry.group и metri.pro. Покупатель, инвестор и агент попадали в разные места, а объекты приходилось вести руками в WordPress, хотя новые дома выкупаются примерно дважды в месяц и цены меняются постоянно.
Главный запрос клиент сформулировал сам: золотая середина. Главная должна быть имиджевой и при этом сразу отвечать на вопрос «я хочу инвестировать — куда?». Скролл-джекинг отвергли с порога — «никак не можешь передвигаться помимо скролла, и это неудобно». Богатая анимация — только внутри страниц проектов.
Отсюда задача: один сайт вместо трёх, без посадочных-спутников, со всеми разделами экосистемы внутри — от смарт-квартир и коммерции до выкупа объектов и службы заботы. И каталог, который не придётся дублировать руками: данные по лотам должны приходить из Битрикс24.
3 → 1
сайта сведены в одну экосистему
90
страниц в рабочей версии
24
объекта в каталоге, два города
55
страниц лотов, у каждого свой PDF
Главная без скролл-джекинга: страница листается, а не ведёт за руку
Первый экран отвечает на продуктовый вопрос сразу: три слова-переключателя — «Инвестировать», «Разместить бизнес», «Жить в центре». Кадр, заголовок и две живые цифры меняются под выбранный раздел: сколько лотов в продаже и от какой цены, какая доходность или где находится объект. Кадры сделаны по фотографиям настоящих фасадов в фотостиле брендбука — золотой час, смаз машин; сама архитектура не менялась.
Ниже главная рассказывает о компании кадрами, а не абзацами: видео города, фраза-манифест и шесть этапов работы — от поиска объекта до управления. Прокрутка остаётся обычной: сцены привязаны к положению страницы, но не перехватывают колесо, и человек в любой момент уходит дальше или назад. Переходы между кадрами — прямой вертикальный срез: в брендбуке линии только под 0° и 90°.
Каталог, где выдача живая, а фильтр не прыгает
Каталог собран на реальных объектах компании, сверенных со всеми тремя старыми сайтами и таблицей клиента: 24 объекта в четырёх разделах — смарт-квартиры, коммерция, недвижимость для жизни и реализованные проекты. Кнопки «Показать» нет: выдача пересчитывается сразу, как на телефоне.
Состав полей по разделам прислал клиент, первыми на любой странице всегда стоят «Город» и «Раздел». Ряд — ровно шесть полей, остальное под «Ещё фильтры», и поле второго ряда стоит точно под полем первого. Подборки и метки домов показываются только тогда, когда реально сужают выдачу: кнопка, после которой ничего не меняется, просто не рисуется.
Страница дома — там, где анимации разрешены «с фанфарами»
Всё, что на главной сдержано, отдано странице проекта. Первый экран дома — три кадра и цифры из модели: лоты в продаже, минуты до метро, потолки, готовность. Дальше — описание, карта с окружением, фотогалерея, история дома и лоты с планом каждой квартиры.
Страниц домов пятнадцать, и ни одна не сверстана вручную: каждая собирается из одной записи в базе. Добавить новый дом — значит заполнить карточку, а не заказывать разработчику ещё одну страницу.
Планы этажей — вектором из PDF архитекторов
Архитекторы работают в AutoCAD и SVG не экспортируют, зато штатно печатают векторный PDF: один лист, ноль растра, одиннадцать слоёв — стены, перегородки, окна, мебель, второй ярус. Мы не стали просить у них другой формат, а написали свой конвертер, который читает такой PDF сам.
Конвертер раскладывает геометрию по группам, перерисовывает номера квартир своей типографикой и нарезает этаж на отдельные планы. Каждый лот получает свой план и план этажа с подсветкой — по номеру на чертеже. Архитекторам достаточно дорисовать в том же файле слой с контурами квартир, и ручных шагов не остаётся.
Загружается один PDF на этаж — лоты получают планы сами
Цвета плана — переменные темы, а не зашитые в файл
Штриховку стен, которую AutoCAD бьёт на полоски, чиним в конвертере
План не ходит в фиде: это статика дома, фид несёт только номер лота
Лот: страница, PDF и расчёт из одних и тех же данных
У страницы лота одна логика: цифры лота крупно, сразу за ними — где это на карте, потом дом, расчёт дохода, вопросы по сделке и похожие лоты. Кнопка «PDF» отдаёт готовый файл: план квартиры, план этажа, фасад, характеристики, карта и QR на страницу. Он собирается на сервере из актуальных данных, поэтому цена в PDF не расходится с ценой на сайте.
Калькулятор доходности построен на модели, которую посчитала сама компания: загрузка, доля собственника и управляющей компании, расходы и рост цены. Итог показан не столбиками, а квадратами-метрами — сколько метров в выбранном доме покупает заданная сумма. Это расчёт только для смарт-квартир, и на сайте это сказано прямо: доходность коммерции считается отдельно.
PDF лота и калькулятор доходности
Битрикс24 — источник цен, сайт — всё остальное
Интеграцию начали не с кода, а со спецификации для IT-отдела клиента. Главное расхождение было в модели: у них одна плоская запись, где смешаны признаки дома и лота. Мы предложили так: одна запись на лот, дом собирается по коду дома, а из Битрикса приходит только то, что там и так ведут, — цена, площадь, статус. Всё статичное о доме заводится на сайте один раз.
Правило на случай конфликтов записано заранее: срочная ручная правка цены живёт до первого изменения в Битриксе, а при расхождении видны оба значения и можно вернуть цену из CRM. Так отдел продаж ведёт цены там, где привык, а сайт не расходится с CRM.
3
поля приходят из CRM: цена, площадь, статус
1
запись на лот в фиде: дом собирается по коду дома
0
страниц домов и лотов, сверстанных вручную
Телефон: та же развилка на первом экране
Аудитория сайта — в основном 45+, поэтому мобильная версия — не уменьшенная копия. Первый экран на узком экране собран стопкой: переключатель разделов сверху, цифры и заголовок под ним, для телефона сделан отдельный вертикальный ролик города.
Фильтр каталога сворачивается в одну кнопку, подборки остаются строкой. На странице лота план вписан целиком и открывается на весь экран, а цена с кнопкой бронирования держится липкой полосой внизу.
Что получилось
Один сайт вместо трёх: все разделы экосистемы — смарт-квартиры, коммерция в Москве, реализованные проекты, управление, выкуп объектов, служба заботы, агентам и блог — живут на одном домене и в одной базе. Девяносто страниц, и страницы домов и лотов среди них не сверстаны руками, а собираются из данных.
Работа шла открыто: клиент писал правки прямо поверх снимков сайта в Figma, и только в двух волнах правок таких комментариев было 32 и 49 — все разобраны и внесены в вёрстку. Реакция руководителя маркетинга ГК «МЕТРЫ» Анастасии: «Направляю руководителям на просмотр их блоков и слышу: „Вааааууу, как красиво! Хочется теперь текст докрутить, чтобы сайту соответствовал“. Считаю, это победа!» Следом в том же чате: «Вау, это превосходно».
81
комментарий клиента в Figma — только в двух волнах правок
15
страниц домов собираются из одной записи в базе
59
лотов в модели каталога
2
города — Санкт-Петербург и Москва
Next.js 16
TypeScript
PostgreSQL + Drizzle
Lenis
Playwright (PDF лотов)
Свой конвертер PDF → SVG
Яндекс Карты
Свой сервер + nginx
Спрашивают чаще всего
Как совместить имиджевую главную и быстрый ответ «куда вложить»?
Развести их по месту, а не по времени. Первый экран сразу даёт продуктовую развилку — инвестиции, бизнес, жильё — с живыми цифрами под каждый раздел, а имиджевая часть идёт ниже обычной прокруткой. Скролл-джекинга нет: анимации привязаны к положению страницы, но не держат человека. Всё, что с «фанфарами», вынесено на страницы проектов.
Зачем свой конвертер планов, если можно попросить у архитекторов SVG?
Потому что AutoCAD в SVG не экспортирует, а векторный PDF печатает штатно — просить SVG значит заставить архитекторов искать конвертер. Мы читаем их PDF сами: план этажа загружается один раз, и каждый лот получает свой план по номеру на чертеже.
Почему не сделать сайт сразу на Битриксе, раз CRM и так в Битрикс24?
Интеграция с Битрикс24 была обязательной, а платформа — нет. Сайт на своей базе забирает из CRM только то, что там и так ведут: цену, площадь, статус лота. Тексты, фото, планы и страницы домов живут на самом сайте, в модели, сделанной под этот каталог, а не под типовой интернет-магазин.
Сколько стоит такой сайт?
Считается по объёму: сколько разделов экосистемы, нужен ли каталог с фильтрами и страницами лотов, интеграция с CRM и обработка фото. Для девелопера с каталогом это не лендинг, а продукт из нескольких частей. Напишите — посчитаем по вашей задаче.
Живые сайты, а не картинки в презентации
Команда Reut
сегодня
Здравствуйте! Нужен сайт для компании
есть примеры, что нравится
с чего начнём?
Здравствуйте! Пришлём бриф под вашу нишу
а по ответам — КП со сроками и сметой
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
© 2026 Reut · reut.art
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247