Лендинг ретрита, который клиент ведёт сам: редактор прямо на живом дизайне

Большинство владельцев сайтов знают эту боль: чтобы поменять дату мероприятия или поправить цену, нужно писать разработчику, ждать, оплачивать правку — и надеяться, что он ничего не сломает. Этот кейс о том, как мы убрали разработчика из цепочки повседневных изменений. Клиент открывает сайт, кликает по любому тексту и правит его прямо на живом дизайне. Разберём, зачем так сделали и почему это ценно для любого бизнеса, у которого контент меняется чаще одного раза в год.

Задача: продать тишину людям на пределе

Клиент организует ретриты восстановления после выгорания в префектуре Коти, Япония. Аудитория непростая — фаундеры, консультанты и топ‑менеджеры, которые давно работают на износе. Таких людей нельзя брать агрессивной продажей. Им нужен сайт, который с первого экрана передаёт атмосферу покоя, а уже потом, спокойно, даёт факты: программу, наставников, стоимость.

Вторая часть задачи была прагматичной. Даты ретритов, цены и состав ведущих меняются несколько раз за сезон. Клиент прямо сказал: «Хочу править это сам, без разработчика». Это требование и определило всю архитектуру проекта.

Дизайн «тихой Японии»

За визуальный ориентир взяли отельные бренды уровня Aman и Six Senses — сдержанная роскошь без лишнего шума. Что это значит на практике:

• Типографика. Антиква Cormorant Garamond для заголовков, спокойный гротеск Manrope для основного текста. Крупный воздух между блоками, ничего не кричит.
• Приглушённая палитра. Пастельные болотные и бежевые тона, одна тихая бирюзовая акцентная. Никаких стоковых градиентов и свечения.
• Строгая система. Три тени, один радиус скругления, единая сетка отступов. Дизайн выглядит собранным, потому что построен на правилах, а не на настроении.

На первом экране — фото долины реки Симанто с сакурой, дата ближайшего ретрита и две кнопки действия. Дальше идут секции: философия и метод восстановления, галерея с прошлых заездов, программа по дням, команда наставников, два тарифа и блок контактов. Всё, что нужно человеку, чтобы принять решение, — и ничего лишнего.

Главное: редактор /edit, который ведёт клиент

Вот сердце проекта. Клиент заходит по адресу с /edit, вводит пароль — и каждый текст на странице становится редактируемым по клику. Не в отдельной админ‑панели, а прямо на живом дизайне. Кликнул по заголовку, поправил, кликнул мимо — сохранилось. Точно как в текстовом редакторе, только это его настоящий сайт.

Что клиент правит сам

Что	Как это выглядит для клиента
Тексты	Заголовки, абзацы, кнопки, подписи, даже пункты выпадающих списков в форме брони
Шрифт заголовка	Выбор из шести семейств прямо на экране — можно примерить облик за секунду
Даты ретрита	Три готовых варианта, активный отмечается одним кликом и подставляется на главный экран
Цены и условия	Тексты тарифов и опций правятся так же, как любой другой текст
Фото на обложке	Загрузил новую сакуру одним заходом — старый файл уходит в резервную копию
Показ и скрытие блоков	Логотип в шапке, центральный логотип, AI-виджет в углу — включаются и выключаются тумблером

Отдельно отмечу мелочь, которая показывает уровень проработки: когда клиент прячет логотип в шапке, навигация автоматически центрируется сама. Ему не нужно думать о вёрстке — система додумывает за него.

Почему это лучше обычной CMS

Классические системы управления контентом — Tilda, WordPress, Sanity и им подобные — устроены иначе. Там вы редактируете контент в одном окне (админке), а результат смотрите в другом (превью или живой сайт). Постоянное переключение туда‑обратно. И почти всегда есть риск: неосторожное движение — и клиент меняет размер шрифта, ломает отступ, вставляет чужое форматирование. Дизайн «плывёт».

Здесь эта проблема решена на уровне архитектуры. Клиенту доступен только текст — само содержимое. Оформление, шрифты в теле, отступы, цвета остаются под замком дизайн‑системы. Клиент физически не может сломать вёрстку, потому что редактируется только то, что можно редактировать безопасно. Контекст при этом не теряется ни на секунду: он видит текст ровно там и ровно таким, каким его увидит посетитель.

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

Как это устроено на понятном уровне

Не углубляясь в код, логика такая. Все правки клиента складываются в один простой файл с настройками на сервере. Когда кто угодно открывает сайт — хоть клиент, хоть посетитель — страница подтягивает этот файл и накладывает свежие правки поверх стандартного содержимого. Один и тот же сайт обслуживает и «витрину», и «редактор» — разница лишь в том, вошёл ли человек по паролю.

sequenceDiagram
    participant U as Клиент (/edit)
    participant F as Страница в браузере
    participant B as Сервер
    participant FS as Файл с правками

    U->>F: клик по тексту, правка
    F->>F: изменение живёт в браузере
    Note over F: до нажатия «Сохранить»<br/>ничего не улетает

    U->>F: клик «Сохранить»
    F->>B: отправка правок с паролем
    B->>B: проверка пароля + защита от подбора
    B->>FS: запись в файл
    B-->>F: готово
    F-->>U: «Сохранено»

    Note over U,FS: Любой посетитель при загрузке:<br/>сайт берёт файл и накладывает<br/>свежие правки поверх базового текста

Технически это одностраничное приложение на React и Vite, а раздачей и защитой занимается веб‑сервер Caddy на собственном VPS — но клиенту про это знать не нужно, для него всё выглядит как обычный сайт с волшебной кнопкой «редактировать».

Почему сайт быстрый

Скорость — не украшение, а деньги: медленный сайт теряет посетителей ещё до первого экрана, особенно с телефона в дороге. Здесь сделали два принципиальных решения:

• Никакого видео на обложке. Раньше подобные лендинги грузят тяжёлое видео на 8 мегабайт, из‑за которого первый экран «дёргается». Здесь вместо видео — одно фото сакуры весом 95 килобайт. Кстати, само фото сгенерировали современными моделями по описанию: живая съёмка была дорогой, стоки не попадали в стиль, а генерация дала кинематографичный кадр реки Симанто ровно за нужный тон.
• Лёгкий вес. Весь сайт в сжатом виде — около 176 килобайт. Это открывается мгновенно даже на слабом мобильном интернете.

Итог — сайт, который выглядит дорого, но грузится как лёгкая страница.

Чем это полезно вашему бизнесу

Уберите из этого кейса тему ретрита — и вы получите универсальный принцип. Он подходит любому, у кого на сайте есть регулярно меняющийся контент:

• Мероприятия и обучение — даты, программа, цены, спикеры меняются каждый поток.
• Услуги — прайс, акции, состав пакетов.
• Локальный бизнес — часы работы, меню, актуальные предложения.

Выгода в цифрах простая. Правка, которая раньше стоила денег и полдня ожидания разработчика, теперь занимает у владельца минуту и стоит ноль. Разработчик подключается только тогда, когда нужна новая секция или структурное изменение — то есть редко. А значит, контент на сайте наконец‑то соответствует реальности, а не «висит с прошлого сезона, руки не доходят обновить».

Итог

Получился лендинг, который клиент сам держит актуальным: правит тексты, даты, цены и фото прямо на живом дизайне, не боясь ничего сломать. Дизайн — тихий и дорогой, загрузка — мгновенная, а зависимость от разработчика сведена к минимуму. Это тот случай, когда правильная архитектура экономит клиенту не разовую сумму, а постоянные нервы и время каждый сезон.

Как это выглядит

Посмотреть вживую

Перейти на сайтburnoutresetru.dev.uspeshnyy.ru Исходники на GitHubBurnOutQuizRu

Следующий шаг: хотите лендинг под квиз‑воронку с персональным PDF-разбором, напишите мне в Telegram.