Сайт юриста: практики, кейсы и консультация на одном листе

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

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

Спроектируй сущности: секция страницы (первый экран, услуги, работы, отзывы, контакты, форма), услуга (название, что входит, цена или правило расчёта, срок, порядок), работа/кейс (практика, задача клиента, что сделали, результат, год, обезличенные данные), отзыв (текст, подпись, тип дела), заявка (имя, контакт, суть вопроса, срочность, согласие на обработку, статус). Свяжи кейсы с услугами по стабильным ID. Статусы услуги и кейса: черновик → опубликован; черновик видит только владелец.

Экраны: публичная страница — первый экран, услуги, работы, отзывы, контакты и форма; и режим редактирования. В режиме редактирования меняйте тексты и цены на месте, скрывайте и переставляйте секции и кейсы без перезагрузки страницы. Кейс открывается целиком по клику. Форма проверяет обязательные поля, не выводит персональные данные в публичную часть и после отправки показывает готовый текст обращения для мессенджера — без backend.

Дизайн: спокойный деловой стиль, много воздуха, тонкие линии, ясная иерархия, serif в заголовках, никаких стоковых иконок, градиентов и декоративных цифр. Адаптив от 360 px, читаемые таблицы цен, крупные зоны нажатия. Продумай пустые состояния, alt-тексты и то, что видит посетитель без JavaScript.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков и npm. Раздели слои: storage → сущности → фичи → компоненты → экраны → навигация. После любого изменения данные сохраняются и интерфейс перерисовывается сразу.

Добавь 5–7 демонстрационных кейсов и 3 отзыва, кнопку «Удалить демо-данные» с подтверждением. Учти пустые поля, битые данные в localStorage, удаление связанных записей, длинные тексты, переносы строк, закрытие модальных окон по Escape и по клику на фон.

Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент». Все дальнейшие правки — тоже полным файлом.

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