SuperMom

SuperMom — многостраничный сайт для детского образовательного центра, реализованный как кастомная WordPress-тема. Проект решает задачи презентации курсов, лагерей, расписания и полезных материалов, а также собирает заявки через интерактивные формы.

В фокусе проекта — адаптивный пользовательский интерфейс, управляемый контент и прикладные интеграции для обработки лидов.

Основные возможности

• Главная страница с промо-блоками, курсами, видео, отзывами и преимуществами центра.
• Отдельные страницы для направлений обучения, расписания, контактов, статей и сезонных предложений.
• Динамические разделы на базе WordPress: курсы, тарифы, статьи и формы.
• Модальные окна для заявок, подарочного урока, видео и чтения статей без перехода со страницы.
• Клиентская и серверная валидация форм с масками телефона и даты рождения.
• Отправка заявок в AlfaCRM и Telegram.
• Адаптивное меню, слайдеры, плавные раскрывающиеся блоки и scroll-based анимации.

Стек

• PHP, WordPress
• Advanced Custom Fields
• JavaScript ES Modules, Fetch API
• SCSS, CSS
• Swiper, IMask, Moment.js
• Bootstrap и jQuery для отдельных промо-страниц лагеря
• Telegram Bot API, AlfaCRM API
• Yandex.Metrika

Особенности реализации

• Контент вынесен в WordPress и ACF, поэтому ключевые страницы можно обновлять из админки без правок шаблонов.
• Для заявок реализован полный цикл: клиентская проверка, AJAX-отправка, серверная валидация, отправка в CRM и уведомление в Telegram.
• Фронтенд-логика разделена на небольшие классы: модальные окна, обработка форм и валидация не смешаны с разметкой страниц.
• SCSS организован по независимым UI-блокам, что упрощает поддержку визуальной системы и повторное использование компонентов.
• Сайт содержит интерактивные сценарии, важные для коммерческого проекта: видео-модалки, загрузка статей через REST API, слайдеры, мобильное меню и попап повторного обращения.

Демонстрация

• Сайт: https://supermomenglish.com

Запуск проекта

Проект рассчитан на запуск внутри WordPress как тема.

npm install
npm run sass-watch

Для локального запуска нужно поместить проект в директорию тем WordPress, активировать тему в админке и настроить контентные поля, меню и страницы.

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

Коммерческий frontend-oriented проект на WordPress, сфокусированный на верстке, UI-интерактиве, управляемом контенте и обработке заявок.