Делегируй: сайт аутсорсинга и админка, написанные с нуля
Девять направлений аутсорса, у каждого своя страница, свой квиз-расчёт и свои кейсы. Всё это написано с нуля — вместе с админкой, в которой заказчик правит тексты прямо на сайте, ведёт блог, заявки и SEO без единой строчки кода.
Компания закрывает девять функций сразу: бухгалтерия, кадры, юристы, охрана труда, пожарная безопасность, безопасность бизнеса, IT, продажи, маркетинг. Каждое направление — отдельный продукт со своей ценой, своими возражениями и своим клиентом.
Значит, сайт не может быть лендингом: нужны девять полноценных страниц, расчёт стоимости под каждое направление и место под кейсы, которых со временем станут десятки.
И главное условие: всё это заказчик должен вести сам. Не «поменять телефон в подвале через разработчика», а править тексты, добавлять статьи, кейсы, экспертов и настраивать метатеги — как в конструкторе, только на своём сайте и своём сервере.
16
разделов админки — от заявок до robots.txt
9
направлений, у каждого своя страница и квиз
0
готовых движков и внешних сервисов
22
кейса и 16 статей ведёт сам заказчик
Первый экран собирается по мере прокрутки
Заголовок и видеоблок не просто появляются — они перестраиваются. Экран прилипает, вторая строка заголовка уезжает вправо, карточка «9 направлений» опускается, а контур видео плавно меняет форму: выступ под заголовок сверху и вырез под карточку снизу.
Фигура считается параметрически, а не хранится картинкой: обе позиции — один прямоугольник, отличающийся четырьмя числами, и промежуточные кадры вычисляются между ними. Поэтому морфинг совпадает с макетом на любой ширине экрана.
Девять направлений вылетают из папки
Блок услуг — не сетка плиток. В центре папка, из неё по прокрутке вылетают девять карточек и на лету доворачивают наклон до нуля, расходясь по эллипсу вокруг неё.
Точки на эллипсе расставлены по равной длине дуги, а не по равному углу: на вытянутой траектории равные углы дают разные промежутки, и на боках карточки налезали друг на друга. У каждого направления своя папка своего цвета — девять оттенков из одного исходника.
«Один день предпринимателя» — невыигрываемая игра
Заказчик забраковал макетный вариант с фотографией офиса и точками-подсказками: «хочется, чтобы это чувствовалось». Вместо него — сцена, в которой приходят карточки-проблемы, и на каждую закрытую прилетают две новые.
На одиннадцатой куча переполняется и всплывает вердикт: «в одиночку это не закрывается». Слева тикает счётчик потерь. Звуки синтезируются Web Audio прямо в браузере — ни одного звукового файла на сервере нет.
Админка: шестнадцать разделов и ни одной чужой панели
Обзор показывает состояние сайта одним экраном: сколько новых заявок, сколько статей, кейсов, экспертов и логотипов, настроена ли почта, сколько страниц получили свои метатеги. Каждая плитка — вход в свой раздел.
Всё своё: SQLite файлом на сервере, авторизация на scrypt, сессия в подписанной куке, загрузки на диск. Ни одного внешнего сервиса — потому что данные клиента не должны жить у третьей стороны, а сайт обязан работать без чужого тарифа.
Заявки, меню, формы, квизы, блог, кейсы
Команда, клиенты, отзывы, цифры, документы
SEO, почта, контакты, пользователи
Свой сервер, SQLite, без внешних сервисов
Тексты правятся прямо на странице
Под админской кукой сайт превращается в редактор: заголовок или абзац помечается и меняется там же, где его читает посетитель. Контент при этом остаётся в коде — в базе лежат только правки, наложенные поверх дефолтов по пути вроде «service.buhgalteriya.pains.items.2».
Отсюда два следствия. Откатиться к исходному тексту можно всегда. И правка попадает в серверный HTML, а не подставляется скриптом — то есть её видит поисковик, а не только человек.
SEO-панель, рассчитанная на стороннего сеошника
Отдельный раздел с вкладками: страницы, шаблоны метатегов, счётчики, данные организации, свой код, редиректы и — редкость для самописных админок — robots.txt и llms.txt прямо в поле ввода.
Пока поле пустое, файл собирается автоматически и остаётся корректным; как только сеошник что-то впишет, отдаваться будет ровно его текст. Так подрядчику не нужен доступ к серверу, а сайт не ломается от пустой формы.
Экономика и путь клиента — блоками, а не абзацами
Телефон и планшет — одна колонка, но не обрезки
Планшет получает ту же одноколоночную раскладку, что и телефон: десктоп собран по координатам макета 1920, и на 768–1279 он не живёт ни при каком масштабе. Отличаются только базис масштабирования и поля.
Направления превращаются в ленту крупных карточек со скролл-снапом, которая нарочно выходит за поля секции: третья колонка выглядывает с края, и сразу видно, что блок листается. Для вертикальной плитки «О компании» снят отдельный вертикальный рендер видео.
Что получилось
Сайт на девять направлений с расчётами, кейсами, блогом и экспертами — и ни одной строки чужого движка: ни WordPress, ни конструктора, ни внешней CMS.
Админка из шестнадцати разделов, в которой заказчик ведёт всё сам: двадцать две истории кейсов, шестнадцать статей, девять экспертов, заявки и метатеги. Разработчик нужен только под новые блоки.
Живёт на своём VPS: база — файлом, загрузки — на диске, письма о заявках уходят с собственного домена. Нет тарифа, который однажды подорожает, и нет сервиса, который однажды закроется.
9
направлений со своими страницами
16
разделов админки
22
кейса ведёт заказчик
0
внешних сервисов
Next.js (App Router)
TypeScript
SCSS Modules
SQLite
Lenis
Свой VPS + nginx
Спрашивают чаще всего
Зачем своя админка, если есть WordPress и конструкторы?
Потому что здесь сайт — не набор страниц, а девять продуктов с расчётами, кейсами и экспертами. На готовом движке такую структуру собирают плагинами, и дальше каждый апдейт превращается в лотерею. Своя панель делает ровно то, что нужно этому проекту: заявки, квизы, кейсы, SEO — и ничего лишнего. Заказчик не платит за платформу и не зависит от чужих релизов.
Правка текста прямо на странице — это не риск для SEO?
Наоборот. Правки хранятся отдельно от контента и накладываются на сервере, поэтому в HTML приезжает уже готовый текст — робот видит то же, что человек. Скрипт редактора грузится только под админской кукой, обычному посетителю он не отдаётся вовсе. И откат к исходному тексту возможен всегда: оригинал остаётся в коде.
Почему не Vercel, а свой сервер?
Потому что на Vercel файловая система только для чтения: там негде держать базу правок и загруженные картинки, а тащить их во внешнее хранилище — это ещё один сервис, ещё один счёт и ещё одна точка отказа. На своём VPS база лежит файлом, загрузки на диске, почта уходит с домена клиента. Vercel мы используем только под превью.
Сколько стоит такой сайт с админкой?
Считается по объёму: сколько направлений и страниц, нужны ли квизы-расчёты, блог, кейсы и SEO-панель для стороннего подрядчика. Сайт с полноценной своей админкой — это не «лендинг плюс форма», а два продукта сразу. Напишите — посчитаем по вашей задаче.
Живые сайты, а не картинки в презентации
Команда Reut Art
сегодня
Здравствуйте, я владелец компании
производим входные двери
хотел обратиться за редизайном
Здравствуйте, Евгений!
Конечно, наша команда займется этим
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
ReutArt © 2026
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247