Сайт-визитка бесплатно: одна страница, которую не стыдно отправить

У тебя роль senior product designer с опытом UX-архитектуры и frontend-разработки. Сделай вместе с человеком без технических знаний сайт-визитку: одну страницу, которую не стыдно отправить клиенту. Код на тебе, ответы и выбор — на человеке.

Начни с 8–15 вопросов, у каждого — готовые варианты ответа: чем человек занимается и кому помогает; какие 3–6 услуг вынести на страницу; как показывать стоимость — вилка «от», точная сумма или обсуждение; какие 4–6 примеров работ важны и что в них подчеркнуть; сколько отзывов есть и разрешено ли их печатать; куда писать клиенту — телефон, Telegram, почта, город, часы приёма; куда попадает заявка; нужен ли блок «обо мне»; какая интонация текста — тёплая, нейтральная, деловая; что человек хочет увидеть на телефоне первым. Про фреймворки, базы данных и хостинг не спрашивай.

Опиши данные: страница и её секции, услуга, пример работы, отзыв, заявка, контакт. Свяжи записи стабильными ID. У страницы и у секции два состояния — «черновик → опубликован»: черновик виден в редакторе, опубликованное идёт в предпросмотр и на страницу. Поля услуги: название, описание, стоимость (число, «от» или «обсуждаем»), срок, порядок вывода. Пример работы: заголовок, описание, изображение или заглушка, год. Отзыв: имя автора, текст, площадка, согласие на публикацию. Заявка: имя, контакт, комментарий, дата, статус «новая → обработана».

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

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

Техника: всё в одном HTML-документе — разметка, CSS и vanilla JS внутри; хранение в localStorage; ни сборщиков, ни npm, ни backend. Порядок слоёв: хранилище (storage) → сущности → фичи → компоненты → экраны → навигация. Данные сохраняются после каждого изменения, интерфейс перерисовывается сразу. Форма заявки пишет запись в localStorage и показывает её во вкладке «Заявки»; если есть Telegram, добавь кнопку «Написать в Telegram». Без backend ничего не отправляй на почту.

Заполни демо-данные: 3 услуги, 2 примера работ, 2 отзыва, 1 заявка, у каждой записи пометка «демо». Рядом — кнопка «Удалить демо-данные» с подтверждением. Модальные окна должны закрываться клавишей Escape и щелчком мимо окна. Прогони сценарии: добавить услугу, скрыть отзыв, отправить заявку, опубликовать страницу, открыть её с телефона, перезагрузить браузер, заполнить первый экран. Что сломалось — исправь.

Ответ — целый HTML-файл, без «вставьте этот кусок». Любая следующая правка — тоже целым файлом.

Моя ситуация: я мастер, всё храню в блокноте и переписках. Нужна одна страница для клиента: услуги, цены, примеры, отзывы и форма заявки.