Жилой комплекс
лендинг
Azure Valley — шаблон лендинга для застройщиков и продажи новостроек, разработанный на платформе Framer. Это готовый к продаже дизайн-продукт: адаптивный сайт с презентацией жилого комплекса, планировками квартир, галереей интерьеров, списком удобств, отзывами и формой заявки на консультацию.
Проект создан для продажи на маркетплейсе Framer.
Цель: упаковать законченный, самодостаточный шаблон, который покупатель может купить, за пару часов наполнить своим контентом и запустить сайт под конкретный жилой комплекс без навыков программирования и без помощи разработчика.
Проект создан для продажи на маркетплейсе Framer.
Цель: упаковать законченный, самодостаточный шаблон, который покупатель может купить, за пару часов наполнить своим контентом и запустить сайт под конкретный жилой комплекс без навыков программирования и без помощи разработчика.
О проекте
В работе я использовала MCP, чтобы подключить Claude Code напрямую к Framer. Это позволило управлять проектом из кода и заметно ускорило разработку шаблона: правки в макет, страницы и компоненты вносились программно, без ручного перекликивания в интерфейсе.
Через это подключение я написала кастомные интерактивные элементы, которых нет в стандартном Framer: карусель фотографий, кликабельный список удобств жилого комплекса, счётчик цифр, прелоадер, плавные появления блоков.
Через это подключение я написала кастомные интерактивные элементы, которых нет в стандартном Framer: карусель фотографий, кликабельный список удобств жилого комплекса, счётчик цифр, прелоадер, плавные появления блоков.
Сначала я собрала референсы сайтов недвижимости премиум-сегмента, которые мне понравились. На их основе Claude Code создал дизайн-макет в Figma — структуру страниц, сетку, типографику и ключевые экраны.
Готовый дизайн я перенесла из Figma во Framer с помощью плагина импорта — так макет стал основой рабочего, адаптивного сайта.
Все фотографии для шаблона я сгенерировала в Midjourney, чтобы задать единый премиальный визуальный стиль.
Готовый дизайн я перенесла из Figma во Framer с помощью плагина импорта — так макет стал основой рабочего, адаптивного сайта.
Все фотографии для шаблона я сгенерировала в Midjourney, чтобы задать единый премиальный визуальный стиль.
Инструменты и процесс
Figma
Tilda
ChatGPT
MidJourney
Готовый к публикации шаблон с продуманной структурой, кастомными компонентами, редактируемыми через понятную панель свойств, инструкцией для покупателя, обложками для маркетплейса и оформленным описанием.
Результат
При адаптации лендинга я исходила из того, что мобильная версия — это не просто «сжатый десктоп». Карточки, которые на вебе стоят в ряд, нельзя механически перенести в столбик друг за другом: так блок вытягивается в бесконечную ленту, и пользователь устаёт скроллить. В таких местах я предусмотрела карусель — карточки листаются горизонтально, блок остаётся компактным, а вся информация сохраняется.
Мобильная версия
Проработала и второстепенные, но важные экраны: страницу 404 и окно успешной отправки заявки — оба в единой стилистике сайта.
Второстепенные экраны