Dental Pro — концепт-сайт премиум-стоматологии

Задача

Показать, как должен выглядеть сайт современной стоматологии: не «таблица услуг с ценами + телефон в footer», а профессиональная цифровая клиника, которая внушает доверие с первого экрана и закрывает посетителя в запись за минимум кликов.

Концепция «Clinical Excellence»: премиальная медицина без клинической холодности. Глубокий синий (#1E40AF) для авторитетности, мятный зелёный (#10B981) для здоровья и «свежести» — только на CTA. Шрифты Plus Jakarta Sans + Inter, скруглённые формы (12-16px), мягкие ambient-тени.

Решение

Стартовая точка — собственная дизайн-система «Clinical Excellence»: deep blue + mint green + tertiary light blue, типографическая пара Plus Jakarta Sans (заголовки) + Inter (текст), скруглённые формы 8-16px, ambient-тени с лёгким синим оттенком. По этой системе спроектировано 4 концепт-экрана (главная, услуги, врачи, запись) с детальными wireframes и компонентами. Затем — ручная сборка всех экранов в полноценный одностраничник с продвинутыми UX-фишками.

Многошаговая запись

Не унылая форма «имя/телефон/комментарий», а пошаговый сценарий:

1. Выбор услуги — 4 карточки с иконками (Первичный осмотр, Профгигиена, Лечение кариеса, Другое). Активная подсвечивается зелёной рамкой и тонированным фоном.
2. Дата + врач + время — нативный <input type="date">, селект врачей с указанием специализации, время — chip-кнопки. Активный слот — синяя обводка + lighter background.
3. Контакты — имя, телефон, опциональный комментарий. Submit морфит кнопку в «✓ Запись подтверждена».

Сбоку — карточка контактов с картой и блок «Не хотите выбирать сами?» с callback-формой на тот случай, если пользователь не дошёл до конца основной формы.

Анимированные счётчики статистики

Блок «12 лет на рынке / 8500+ пациентов / 12 врачей / 78+ сертификатов» — числа считаются от 0 до целевого значения с easing 1 - (1-t)³ (decel-out). Анимация запускается единожды, когда блок попадает в viewport — через отдельный IntersectionObserver с порогом 0.5.

Hero с двухцветным побуквенным появлением

Заголовок «Здоровая улыбка / начинается здесь» собирается побуквенно с задержкой 70 мс между символами. Первая строка — text-primary-dark, вторая — text-secondary (зелёный). За контентом — два пульсирующих blob’а (bg-tertiary/70 и bg-secondary/15) с анимацией translate + scale по 16-секундному циклу.

В hero — две плавающие карточки с задержкой floatY: «5 лет гарантия» с зелёной иконкой и «★ 4.9 / 320+ отзывов». Парят с разной фазой — выглядит живо.

Дифференциация секций через blob-фоны

Каждая секция получила свой фоновый акцент:

• Services — большой bg-tertiary/40 blob по центру сверху
• Doctors — bg-secondary/10 blob в правом нижнем углу
• Booking — bg-tertiary/50 blob в верхней четверти
• Final CTA — два blob’а на градиентном primary-фоне

Все blob’ы с blur-3xl + индивидуальные animation-delay, чтобы не пульсировали синхронно.

Карточки врачей с бейджем доступности

6 врачей в grid’е 3×2 (адаптив до 1 колонки). Каждая карточка — портрет 4:5, имя, специализация, стаж, ВУЗ, сертификаты, CTA «Записаться». Три из шести имеют бейдж «🟢 Принимает сегодня» — реалистичный приём, повышает срочность.

FAQ через нативный <details>

5 вопросов в <details>/<summary> — открываются без JS, accessibility «из коробки». Стрелка expand_more поворачивается на 180° через [open] CSS-селектор. При открытии заголовок подсвечивается синим.

Результат

Сайт развёрнут на поддомене dental.nazarov-evgeniy.pro с HTTPS (Let’s Encrypt), отдаётся за миллисекунды (~70 KB на index.html). Бэкенд не подключён — это концепт-демо, реальной клиники не существует. Для продакшена достаточно: подключить форму записи к CRM (1С, Medesk, IDENT), добавить настоящие фото врачей, реальный адрес и SEO-копирайт.

Архитектурно сайт готов к масштабированию: добавить раздел акций, блог с медицинскими статьями, страницы под конкретные услуги (/implantatsiya/, /breket-sistemy/) — структура и стили это допускают без рефакторинга.

Стек технологий

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (blob pulse, floatY, fadeUp, pulse-glow на CTA), IntersectionObserver для scroll reveal и stats counter, easing easeOutCubic для счётчиков
• Типографика: Plus Jakarta Sans 500-800 (заголовки), Inter 400-700 (текст), Material Symbols (иконки)
• Изображения: Unsplash для hero-фото + randomuser.me для портретов врачей (демо-данные)
• UX-паттерны: многошаговая форма с активным состоянием, нативный <details> для FAQ, sticky header с pulse-glow CTA, fixed bottom panels
• Дизайн-этап: собственная дизайн-система «Clinical Excellence» (палитра, типографика, тени, скругления, spacing-токены) под бренд-концепцию премиум-стоматологии
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL