Miroset.
Премиальный загородный курорт в Сочи — и лендинг, который основатель правит без разработчика.
Полный цикл в одиночку: дизайн, вёрстка, деплой и спасение хостинга.
ведёт сайт через админку
- Что
- Лендинг премиального загородного курорта в Сочи с админкой, которую основатель ведёт сам.
- Зачем
- Сайт должен был редактироваться без разработчика, а потом пережить потерю хостинга.
- Моя роль
- Полный цикл в одиночку: дизайн, вёрстка и разработка, деплой, инфраструктура.
- Результат
- 0 запросов разработчику на правки · 100% контента восстановлено · 89 файлов
Курортно-деловая деревня-отель на склоне Мацесты в стиле Санторини — её продают владельцам, компаниям и инвесторам с одного лендинга.
Читать историю целиком
MIROSET — девелопер и оператор управляемых премиальных загородных экосистем. Первая локация — курортно-деловая деревня-отель в Сочи, на склоне Мацесты, в стиле Санторини. Лендинг должен привлекать три аудитории: будущих владельцев доходных резиденций, компании, которые ищут площадку для корпоративных выездов, а также партнёров и инвесторов. Полный цикл я сделал один: продуктовый дизайн, вёрстку, разработку, деплой и поддержку инфраструктуры.
Это не проект в духе «нарисовал и отдал». В нём сошлись дизайн-система, моя собственная реализация, продуктовое решение — правка без разработчика — и антикризис, когда нужно было спасать сайт и данные основателя.
Домены: miroset.ru — основной, миросеть.рф перенаправляет на него.
Одна страница. Три аудитории.
Владельцы, компании и инвесторы находят свой сценарий — на одной спокойной странице, где главное — фотографии.
ОС «ОСЬ» · Партнёры · Участие · Контакты
Сайт должен меняться без разработчика.
Три аудитории, один лендинг
Контент — это данные
Работает, правится, не ломается
Читать историю целиком
Задача. Лендинг премиального загородного курорта в Сочи, который говорит одновременно с владельцами, компаниями и инвесторами. Ключевое требование: сайт должен редактироваться без разработчика. Тексты, фото, видео, блоки, цвета, шрифты и логотипы меняет основатель.
Подход. Лендинг на данных: весь контент живёт в content.json, а PHP собирает из него страницу. Сверху — админка для каждого поля, медиа, блоков и темы. В основе — одна тёплая дизайн-система: нейтральная палитра, единственный золотой акцент, один шрифт.
Результат. miroset.ru отвечает HTTP 200 с валидным SSL и полностью работает. Основатель правит весь сайт через админку — ноль запросов разработчику на правки контента. Когда хостинг был потерян, сайт вернулся без потери данных: восстановлено 100%.
Видео, сценарии, приложение — на 390 px.
Все блоки сайта
- Первый экран — видеофон.
- Сценарии отдыха — Владеть / Приехать / Собрать команду / Создавать.
- Локация в Сочи — видеофон.
- Продуктовая линейка — карусель-галерея.
- ОС «ОСЬ» — приложение для управления.
- Партнёры — логотипы.
- Участие — Google Forms.
- Контакты — как связаться с командой.
Тёплые нейтральные. Один золотой акцент.
Полный редизайн под новый брендбук за один проход — чтобы цвет несли фотографии самого места.
Один шрифт — Manrope с кириллицей — вместо Georgia и Inter. Заголовки SemiBold; капсом только надзаголовки.
Вся система
Основная часть работы — полный редизайн под новый брендбук за один проход: палитра, единый шрифт, одна система карточек и одно правило для призыва к действию.
Палитра. Тёплая нейтральная основа: фон #F8F5F0, карточки #FFFDFC, заголовки #574D44, текст #6B635B, линии #DED5CA, декор #E8DED1, затемнение фото #4E443C примерно на 66%.
Правило золотой кнопки. Градиент 105° от #D9A03A к #C17D22 с тёмно-коричневым текстом #493D32, при наведении темнеет. Одна доминирующая золотая кнопка на экран; остальные — светлые или контурные.
Типографика. Единственный шрифт — Manrope с кириллицей — вместо Georgia и Inter. H1 64–72 px, заголовки разделов 42–52 px, основной текст 17–19 px. Плотные заголовки SemiBold и минимум капса: в верхнем регистре только надзаголовки.
Карточки. Одна нейтральная система карточек: цветное фото сверху, никогда не под текстом; золотые иконки, тонкие рамки, радиусы 18–24 px. «Кислотные» зелёные градиенты убраны. Тяжёлые тени тоже: осталась одна мягкая тень 0 10px 35px rgba(74,60,45,.08), а у большинства карточек — просто тонкая рамка.
Текст на фото. На фото и видео — тёплое коричневое затемнение #4E443C примерно на 66% и белый текст #F8F5F0.
Правки без разработчика.
Требование стало архитектурой: всё хранится в content.json, PHP это отрисовывает, а /admin меняет контент — но никогда не вёрстку.
- 01Визуальный редакторКаждый заголовок, текст, кнопка и ссылка.
- 02Загрузка фото и видеоПрямо в любое медиаполе.
- 03МедиатекаПовторное использование любого загруженного файла.
- 04Смена логотипаМеняется как любое другое изображение.
- 05Управление блокамиПоказать, скрыть, дублировать, переставить.
- 06Редактор темыЦвета кнопок и шрифты — без CSS.
"theme": {
"button_from": "#D9A03A",
"button_to": "#C17D22",
"font_heading": "Manrope",
"font_body": "Manrope"
},
"layout": [
{ "block": "scenarios", "on": true },
{ "block": "location", "on": true },
{ "block": "spaces", "on": true },
{ "block": "axis", "on": true },
…
]Тема и порядок блоков — просто данные, шаблон не меняется никогда.
Почему данные, а не вёрстка
Лендинг построен на данных. Весь контент лежит в content.json, PHP собирает из него страницу, поэтому правки касаются только контента и никогда — вёрстки. Именно это одно правило позволяет основателю менять тексты, медиа, цвета и порядок блоков, не ломая дизайн.
Редактор темы записывает градиент кнопки и шрифты; управление блоками — список layout. Шаблон страницы не меняется, поэтому сломать дизайн правками невозможно.
Мелочи, которые берегут основателя.
ИИ-визуалы в бренде
Фотографий ещё не было — поэтому фоны сгенерированы.
Поля, прощающие ошибки
Видео в поле для картинки всё равно проигрывается.
Правки не теряются
Сохранение делает глубокое слияние — даже из устаревшей вкладки.
Золотой логотип с вырезанным белым фоном · петля «∞», вырезанная для фавикона.
Читать историю целиком
- Фоны, сгенерированные ИИ. У основателя ещё не было визуалов, поэтому фоны первого экрана, локации и финального блока я сгенерировал с помощью ИИ в стилистике бренда.
- Логотип и фавикон из вордмарка. Убрал белый фон с золотого логотипа через ImageMagick (кеинг по минимальному каналу). Вырезал петлю «∞» из вордмарка для фавикона и выгрузил его в нужных размерах.
- Устойчивость к ошибкам контент-менеджера. Если видео загружено в поле «изображение», сайт всё равно проигрывает его как <video>. У полей изображения, видео и логотипа есть кнопка загрузки и медиатека.
- Защита правок. Переписал механизм сохранения в админке: сохранение из устаревшей вкладки больше не затирает поля, потому что теперь данные сливаются глубоко, а не перезаписываются. До этого правки терялись — главная боль проекта.
Один редизайн, затем точечные правки.
Партнёры: логотипы вместо иконок — одна из правок.
Семь правок
- Вернул фото в карточки
- Скрыл лишние блоки
- Логотипы партнёров вместо иконок
- Крупный надзаголовок «Первая локация»
- Воздух под заголовками
- Финальный блок
- Фавикон
Дальше основатель сама доработала тексты и загрузила медиа через админку — доказательство того, что цель «правки без разработчика» достигнута.
Сайт упал. Ничего не потерялось.
Хостинг истёк: ошибка 403, и все загруженные файлы оказались заперты вместе с аккаунтом.
Шаг за шагом
- Диагностика — проверил DNS, HTTP и FTP, чтобы понять, что именно сломалось.
- Переезд на новый сервер — перенёс сайт и настроил DNS-записи (A/AAAA).
- Домены и сертификаты — настроил редирект миросеть.рф → miroset.ru и выпустил сертификаты Let’s Encrypt для обоих доменов.
- Восстановление контента — вернул всё со старого сервера: видео, фото, галерею, логотипы и тексты. Основателю не пришлось ничего загружать заново.
Неочевидная ловушка. Редирект nginx с HTTP на HTTPS перехватывал acme-проверку Let’s Encrypt, и домен не мог получить сертификат. Нашёл и исправил.
Работает, правится, не ломается.
- 200Полностью рабочийmiroset.ru, валидный SSL.
- 0Сайт в руках основателяНи одного запроса разработчику по контенту.
- 100%Без потери данныхПережил потерю хостинга.
Стек
Форматы участия охватывают все три аудитории: владельцев, компании и сообщества, партнёров и инвесторов.
- PHP, данные из JSON
- HTML / CSS, собственная дизайн-система, без фреймворков
- Vanilla JS: карусели, меню
- ImageMagick
- Управляемый хостинг + ISPmanager
- Let’s Encrypt
- Деплой по FTPS
- Генерация изображений ИИ
Спасибо.
Сайт, который ваша команда правит сама, — спроектирую, соберу и сохраню в живых.
