Smilio — лендинг стоматологической клиники

Многостраничный сайт стоматологии полного цикла. Тёплый светлый премиум-визуал в приглушённой мятной палитре (dusty teal), акцент на доверии и «лечении без боли». Vanilla-стек, без фреймворков и сборки.

Live Demo

georgy-itech.github.io/smilio-landing

Особенности

• 4 страницы: Главная, Услуги, О клинике, Контакты — общий header/footer, единый CSS/JS
• Дизайн-система на CSS-переменных: одна палитра и типографика (Fraunces + Manrope) на весь сайт
• Мобильное меню — выезжающая панель с оверлеем, закрытие по Esc / клику / выбору пункта
• Экран загрузки — полный (~2.4с) только при первом заходе за сессию, дальше по сайту — короткий
• Форма записи: строгая валидация телефона (только мобильный РФ, живая маска +7 900 123-45-67), кастомный select услуги (доступен с клавиатуры, role="combobox"), поля без alert() (класс is-error + aria-invalid), тосты вместо всплывашек
• 12 карточек врачей — фото, специализация, стаж
• Раскрывающиеся карточки услуг — доп. направления открываются по клику с составом услуги
• Анимированные счётчики в trust-bar — считают от 0 при появлении в вьюпорте, с double-safety на случай сбоя анимации
• FAQ-аккордеон — доступен с клавиатуры, aria-expanded
• Scroll-reveal через IntersectionObserver (с уважением к prefers-reduced-motion)
• Карта — встроенный виджет Яндекс.Карт без API-ключа (нет внешней зависимости, которая может «сломать» сайт)
• Кастомные SVG-иконки — единый линейный стиль, симметричный фирменный «зуб»
• SEO/шеринг: title, description, Open Graph, favicon.svg, og-image.jpg (1200×630)
• Доступность: lang="ru", семантика, aria-label на иконочных кнопках, skip-link, видимый :focus-visible
• Производительность: локальные изображения (без хотлинков), loading="lazy" ниже первого экрана

Технологии

• Семантический HTML5
• CSS3 — custom properties, Grid/Flexbox, clamp(), mobile-first
• Vanilla JavaScript (ES5-совместимый IIFE, без зависимостей)
• Шрифты Google Fonts: Fraunces (заголовки) + Manrope (текст)

Структура проекта

smilio-landing/
├── index.html        # Главная
├── uslugi.html       # Услуги и цены
├── o-nas.html        # О клинике (история, анестезия, врачи, оборудование)
├── kontakty.html     # Контакты, форма записи, карта, FAQ
├── css/
│   └── style.css     # Все стили сайта
├── js/
│   └── main.js       # Меню, reveal, FAQ, валидация формы, тосты
├── assets/           # Фото (hero, услуги, врачи, интерьер) + og-image
├── favicon.svg
└── README.md

Форма записи

Это витринный проект для портфолио, поэтому форма сознательно без реального бэкенда — рабочая почта клиники здесь не нужна. Показана полноценная фронтенд-логика: строгая валидация (телефон, обязательные поля), живая маска ввода, кастомный select, состояния ошибок без alert(), тост об успехе. При желании форму легко подключить к любому сервису вроде Formspree — для этого достаточно указать реальный action на <form id="booking-form"> в kontakty.html.

Что практиковалось

• Проектирование многостраничного сайта на общей дизайн-системе (переиспользуемые header/footer/компоненты без дублирования CSS/JS)
• Доступная форма с валидацией на нативном JS без библиотек, нормализация и маска телефона
• Кастомный select поверх нативного (progressive enhancement — значение всё ещё уходит в форму)
• Аккордеон и reveal-анимации на IntersectionObserver, счётчики с защитой от сбоя анимации
• Кастомные SVG-иконки в едином стиле, генерация og-image через canvas

Возможные доработки

• Реальный бэкенд формы вместо Formspree
• Страницы отдельных услуг с подробными прайсами
• Онлайн-запись с выбором врача и времени
• Блог о здоровье зубов для SEO

---

Учебный проект из портфолио. Контент вымышленный, изображения — со стоковых сервисов (Pexels).