«Новое Время» — корпоративный сайт мед- и образовательного центра

Обзор

ООО «Новое Время» ведёт два направления под одним брендом — медицинский центр и учебный (образовательный) центр — оба в стадии лицензирования. Задача: единый корпоративный сайт с сильной главной страницей, которая «разводит» пользователя на одно из двух направлений, а за каждой развилкой — структура разделов строго по требованиям к медицинским и образовательным организациям. Стек — Astro + Tailwind, дизайн вёлся через Google Stitch, срок — около недели.

Проблема

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

Решение

Главная — «развилка»: hero с названием и логотипом и две крупные карточки-перехода на Медицину и Образование. За медицинской развилкой — полное дерево разделов по Приказу Минздрава №118н: общая информация, блок лицензии с плейсхолдером под QR-выписку из реестра, карточки медработников строго по номенклатуре, медицинская деятельность, прейскурант по номенклатуре 804н, контролирующие органы, политика ПД и формы обратной связи. За образовательной — раздел «Сведения об образовательной организации» со всеми 11 обязательными подразделами и дополнительными по Приказу Рособрнадзора №1493 (действует с 01.03.2026), каждый с обязательной семантической разметкой. Поиск — на Pagefind (статический индекс, без бэкенда), карта сайта генерируется автоматически, формы — с чекбоксом согласия на ПД и honeypot-защитой от спама.

Возможности

• Главная-«развилка» на два направления (медцентр / учебный центр) с логотипом, hero-баннером и CTA
• Полное дерево медицинских разделов по Приказу 118н: плейсхолдер лицензии/QR, карточки специалистов, прейскурант 804н, деятельность, контролирующие органы
• Полное дерево «Сведения об образовательной организации» по Приказу Рособрнадзора 1493 — 11 обязательных + дополнительные подразделы с семантической разметкой
• Каждый пустой раздел сдан как оформленный, кликабельный шаблон, готовый к наполнению
• Поиск по сайту на Pagefind (статический, без бэкенда), автогенерируемый sitemap, Schema.org (Medical/Educational Organization)
• Доступность по WCAG 2.1 AA / ГОСТ Р 52872-2019: масштабируемый шрифт, контраст, работа с клавиатуры, корректные alt/aria
• Бирюзовая палитра с мягкими градиентами — более «нежная» и яркая айдентика вместо строгого институционального стиля

Процесс разработки

Сложным был не код, а «картография соответствия»: превратить два плотных нормативных чек-листа в дерево разделов, которое инспектор может отметить галочками, но которое при этом сможет наполнять нетехнический владелец. Дизайн вёлся через Google Stitch (воздушный макет Arctic Clarity), затем синий акцент заменили на бирюзовый по просьбе заказчика и усилили мягкими сине-бирюзовыми градиентами. Поскольку закон о локализации ПД (152-ФЗ) исключает зарубежный хостинг для боевого контура, сборка осталась статической и переносимой — её можно развернуть на российском хостинге без серверных функций.

Результаты

• Готовый к лицензированию сайт: все обязательные мед- и образовательные разделы на месте, правильно названы, кликаются и размечены
• Структура, которую владелец может наполнять раздел за разделом без разработчика
• Статичный, быстрый и доступный — ориентир Lighthouse Performance ≥ 90, Accessibility ≥ 95, SEO ≥ 95 на мобильных
• Фундамент для следующей фазы: сбор заявок, SEO-продвижение и контент

Выводы

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