Лендинг для недвижимости
Do'mbirobod City
Профессиональный корпоративный лендинг для местной компании недвижимости — планировки квартир, виртуальные туры и калькулятор цен. Создан на Next.js с прототипированием UI/UX в Figma.
Обзор
Застройщикам нужен сайт, который делает больше, чем просто перечисляет квартиры — он должен давать покупателям уверенность до визита. Я построил лендинг Do'mbirobod City из дизайнов Figma, предоставив потенциальным покупателям интерактивные планировки, виртуальный тур и калькулятор цен, чтобы они могли изучить объект в удобном темпе.
Что я сделал
Перевёл дизайны Figma в пиксельно-точный сайт Next.js — компонент за компонентом, с плавными scroll-анимациями по всему сайту.
Создал интерактивный просмотрщик планировок, позволяющий покупателям изучать расположение квартир с подсветкой на уровне комнат.
Интегрировал калькулятор цен и компоненты виртуального тура, чтобы дать покупателям полное представление до визита.
Архитектура
Статически генерированный сайт Next.js — быстрый по умолчанию, бэкенд не нужен. Интерактивные компоненты (просмотрщик планировок, калькулятор цен, виртуальный тур) работают на клиенте, статические страницы загружаются мгновенно с периметра.
Под капотом
Интерактивная планировка с подсветкой на уровне комнат и выбором блока — покупатели могут кликать по каждой планировке квартиры и видеть, какие комнаты входят в блок.
Клиентский калькулятор цен, принимающий тип блока, этаж и площадь как входные данные и вычисляющий итоговую стоимость на основе настроенных правил ценообразования застройщика.
Плавные scroll-анимации и отполированные переходы по всему сайту — соответствующие премиальному ощущению, необходимому бренду клиента.
Чему я научился
Работа по дизайнам Figma научила меня, что пиксельная точность важна меньше, чем передача задуманного настроения — иногда нужно вносить небольшие правки в код, чтобы соответствовать тому, что дизайнер действительно имел в виду.
Статические сайты недооценены для маркетинговых страниц — почти мгновенное время загрузки и никакой инфраструктуры для беспокойства, что сделало клиента довольным в день запуска.
Технологии
Фронтенд
- Next.js
- React
- TypeScript
- Tailwind CSS
Дизайн и инструменты
- Figma
- ESLint
- Prettier
