Новосёл — концепт-сайт жилого комплекса

Задача

Показать, как должен выглядеть сайт застройщика премиум-класса — не «галерея рендеров + телефон», а функциональная витрина с настоящим каталогом планировок, рабочим калькулятором ипотеки и юридической прозрачностью (214-ФЗ, эскроу, проектная декларация).

Концепция «Premium Urban Living»: глубокий navy #081425 как метафора ночного неба над городом, золотой акцент #efbd8a — тёплый свет в окнах. Серифные заголовки Playfair Display для эмоции и статуса, чистый Inter для функциональных блоков.

Решение

Стартовая точка — собственная дизайн-система «Premium Urban Living»: палитра из семи surface-токенов (от #040e1f до #2a3548), золотая шкала primary с deep-вариантом, lavender-blue акцент #bec6e0 для деталей, типографическая пара Playfair Display 500–800 (заголовки, курсивные эмфазы) + Inter 400–700 (текст), скругления 4–24px, тени с золотым подтоном на ховере. По системе спроектировано 4 концепт-экрана (главная, планировки, каталог, контакты). Дальше — ручная сборка в полноценный одностраничник с расширенным интерактивом.

Каталог планировок со SVG-схемами

6 квартир от студии 32 м² до пентхауса 120 м². Каждая карточка — SVG-схема планировки (стены, перегородки, подписи комнат) вместо безликих фото-плейсхолдеров. Chip-фильтр по комнатам (Все / Студии / 1–4 комн.) — один обработчик change переключает flat-hidden. Если фильтр ничего не нашёл — показывается заглушка «По выбранному фильтру квартир нет».

Живой калькулятор ипотеки

Не «оставьте телефон — менеджер расскажет», а реальный расчёт по аннуитетной формуле:

• Стоимость квартиры — range-slider 4,5–20 млн ₽ с шагом 100 000
• Первый взнос — slider 10–80% (отображается одновременно в % и рублях)
• Срок — slider 5–30 лет
• Программа — Семейная 6% / IT-ипотека 5% / Базовая 14.5%

Формула: loan × r × (1+r)^n / ((1+r)^n − 1) где r = rate/100/12, n = years × 12. Любое изменение — мгновенный пересчёт ежемесячного платежа, суммы кредита и переплаты. Все суммы форматируются через toLocaleString('ru-RU'). Sticky-панель результата прилипает справа.

Карта локации с инфраструктурой

Карта-плейсхолдер с пульсирующим золотым маркером ЖК (CSS animate-ping + radial-fill) и 6 карточек инфраструктуры — школа, детсад, парк, набережная, ТРЦ, больница — с расстоянием в метрах/километрах. Каждая карточка с card-lift на hover (приподнимается, обводка золотым).

Авторская фоновая анимация

Главное отличие от типового сайта застройщика — фон каждой секции «дышит» по-разному и тематически. Никаких «оранжевых шариков», как у большинства лендингов:

• Aurora gradient — глобальный фоновый слой с тремя радиальными градиентами (золото + lavender-blue + золото), плавно перемещаются по экрану с 24-секундным циклом
• Blueprint grid — едва заметная архитектурная сетка 80×80px, дрейфует по диагонали (40 сек), затемнена radial-маской по краям
• Rising light beams — вертикальные световые лучи поднимаются снизу вверх в секциях «Локация» и «Этапы» (как огни в окнах высоток)
• Spotlights — два вертикальных «прожектора» с разной фазой качаются справа и слева на 36° (18-секундный цикл)
• City skyline — SVG-силуэт городской застройки на нижней кромке секций «О ЖК» и «Этапы»
• Window lights в hero — золотые огоньки летят снизу вверх с разной скоростью, имитируя свет в окнах здания

Всё гасится через @media (prefers-reduced-motion: reduce).

Hero с расширенной хореографией

«Жилой комплекс» собирается побуквенно с задержкой 70 мс. «Тюменский квартал» — курсивом с золотым бегущим шиммером (linear-gradient + background-position, 6-секундный цикл). За контентом — Ken Burns на архитектурном рендере с панорамным остеклением, 36 золотых огоньков-частиц летят вверх. Контент следует за курсором (mouse parallax ±14px). На CTA — pulse-glow keyframe с расширяющимся золотым ореолом.

Этапы строительства

4 карточки с кварталами от 4Q 2025 до 2027 Q4. Бейджи «Готово» (солидная заливка золотом) и «В работе» (золото с opacity 40%). На каждой — описание этапа, диапазон дат, scroll-reveal stagger с задержкой 100 мс.

Юридическая прозрачность

В hero — плашка «214-ФЗ» с пиктограммой verified и формулировкой «Эскроу-счёт в Сбербанке, проектная декларация, ДДУ». В контактах — ссылка на «Проектную декларацию PDF». В футере — упоминание ЕИСЖС. Всё то, что покупатели премиум-сегмента ищут в первую очередь.

Результат

Сайт развёрнут на поддомене novosel.nazarov-evgeniy.pro по HTTPS (Let’s Encrypt), отдаётся за миллисекунды (~72 KB на index.html). Бэкенд не подключён — это концепт-демо. Для продакшена достаточно: подключить форму к amoCRM или Битрикс24 (стандартные CRM в недвижимости РФ), интегрировать live-каталог из 1С или Profitbase, добавить полноценный 3D-тур по квартире, реальную интерактивную Яндекс.Карту с инфраструктурой.

Архитектурно сайт готов к масштабированию: страницы под каждую планировку (/planirovki/dvuhkomnatnaya-62m/), раздел «Ипотека» с подробным расчётом скидок, блок программы лояльности «Новосёл Premium» — структура и стили это допускают без рефакторинга.

Стек технологий

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (Ken Burns, blob pulse, letter reveal, gold shimmer, window lights float-up, aurora drift, blueprint drift, rising beams, spotlights sweep, animate-ping на маркере карты), IntersectionObserver для scroll-reveal и счётчиков статистики, easeOutCubic для счётчика, форматирование toLocaleString('ru-RU')
• Типографика: Playfair Display 500–800 (заголовки + курсивные эмфазы), Inter 400–700 (текст), Material Symbols (иконки)
• Изображения: AI-арт для hero-рендера + Unsplash для иллюстраций архитектуры, SVG для схем планировок и силуэта skyline
• UX-паттерны: живой калькулятор ипотеки с аннуитетной формулой, chip-фильтры каталога без перезагрузки, sticky-панель результата, карта с пульсирующим маркером, multi-step форма записи на показ
• Дизайн-этап: собственная дизайн-система «Premium Urban Living» (палитра navy + gold, типографика серифов, тени, скругления, spacing-токены) под бренд-концепцию застройщика премиум-класса
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL