CleanPro — это современный адаптивный шаблон для сайтов клининговых услуг, разработанный для платформы 1C-Битрикс. Шаблон предназначен для создания лендингов и корпоративных
сайтов компаний, предоставляющих услуги по уборке помещений.
Основные характеристики
Дизайн и стиль
- Цветовая схема: Зеленая палитра (#4CAF50) как основной акцентный цвет
- Типографика: Шрифт Montserrat для современного и читаемого дизайна
- Стиль: Минималистичный, чистый дизайн с акцентом на функциональность
- Адаптивность: Полностью адаптивный дизайн для всех устройств
1. Hero-секция (section-hero)
- Главный баннер с фоновым изображением
- Заголовок и подзаголовок
- Кнопка призыва к действию
- Поддержка редактирования через админку
2. О компании (section-about)
- Описание компании
- Статистические показатели (количество клиентов, лет работы и т.д.)
- Светлый фон для выделения
3. Услуги (section-services)
- Сетка услуг с иконками
- Описание каждой услуги
- Адаптивная верстка
- 4-колоночная сетка преимуществ
- Анимации при наведении
- Градиентные фоны и эффекты
5. Процесс работы (section-workflow)
- Пошаговое описание процесса
- Нумерованные этапы
- Адаптивная верстка
6. Ценообразование (section-pricing)
- Таблица с ценами на услуги
- Структурированное представление тарифов
- Карточки отзывов клиентов
- Адаптивная сетка
8. FAQ (section-faq)
- Интерактивные вопросы и ответы
- Анимация раскрытия/скрытия
- Стилизованные иконки
9. Форма заявки (section-cta)
- AJAX-форма обратной связи
- Валидация полей
- Модальное окно подтверждения
- Поддержка политики конфиденциальности
Технические особенности
JavaScript функциональность:
- AjaxForm: Обработка форм с AJAX
- AjaxFormWithModal: Формы с модальными окнами
- FaqQuestion: Интерактивные FAQ
- AnchorSmoothScroll: Плавная прокрутка по якорям
- ExternalLink: Открытие внешних ссылок в новой вкладке
- CloseModal: Закрытие модальных окон
CSS особенности:
- Flexbox и Grid: Современная верстка
- CSS-анимации: Плавные переходы и эффекты
- Медиа-запросы: Адаптивность для мобильных устройств
- CSS-переменные: Легкая кастомизация цветов
- Hover-эффекты: Интерактивность элементов
- Компоненты news.list: Для вывода контента
- Редактирование в админке: Поддержка режима редактирования
- Локализация: Поддержка русского языка
- AJAX-обработка: Безопасная отправка форм
- События: Интеграция с почтовыми событиями Битрикс
Формы и взаимодействие
Форма обратной связи:
- Поля: Имя, телефон, выбор услуги
- Валидация: Проверка обязательных полей
- AJAX: Отправка без перезагрузки страницы
- Безопасность: Проверка sessid и site_id
- Уведомления: Модальные окна с результатами
Модальные окна:
- Анимации: Плавное появление/исчезновение
- Закрытие: По клику на крестик или кнопку
- Адаптивность: Корректное отображение на мобильных
Адаптивность
Брейкпоинты:
- Desktop: > 1024px
- Tablet: 768px - 1024px
- Mobile: < 768px
Адаптивные элементы:
- Header: Вертикальное расположение на мобильных
- Benefits: 4 → 2 → 1 колонка
- Workflow: Вертикальное расположение шагов
Hero: Уменьшение размера заголовка