Цель создания шаблона
Разработка посадочных страниц для продуктов SaaS часто сводится к повторяющимся элементам: секция героя, сетка функций, таблица цен, раздел вопросов и ответов. Чтобы избежать постоянного дублирования работы, я решил создать универсальный шаблон, который можно легко адаптировать под разные проекты.
Основные требования к шаблону:
- Внешний вид премиум-класса сразу после установки;
- Отсутствие необходимости использовать инструменты сборки или фреймворки;
- Поддержка темного режима и нескольких цветовых схем;
- Модульность для быстрой кастомизации.
Выбор технологий
Для реализации проекта был выбран максимально простой стек технологий:
- HTML5 — базовый язык разметки веб-страниц;
- Tailwind CSS через CDN — библиотека стилей, позволяющая быстро менять внешний вид элементов прямо в коде HTML;
- Vanilla JavaScript — чистый JavaScript без использования сторонних библиотек или фреймворков.
Почему не использовались популярные решения вроде React или Next.js?
Покупатель должен иметь возможность открыть файл index.html двойным кликом мыши и увидеть полностью готовую страницу без дополнительных шагов типа запуска терминала, выполнения команды npm install или настройки окружения.
Использование Tailwind CSS через CDN позволяет покупателям изменять классы напрямую в HTML-коде и мгновенно видеть результат изменений. Для продакшена они могут позже переключиться на сборку с использованием инструментов оптимизации.
Структура шаблона
Шаблон состоит из 11 отдельных компонентов-секций, каждая из которых представляет собой автономный модуль:
Навигационная панель (Navbar)
Секции навигации с поддержкой мобильных устройств и плавной анимации при прокрутке.
Герой (Hero)
Главная часть страницы с демонстрацией макета панели управления, карточек метрик и графика.
Логотипы клиентов (Logo Bar)
Бесконечная карусель логотипов с эффектом постепенного исчезновения.
Особенности продукта (Features)
Грид из шести карт с иконками и эффектами при наведении курсора.
Статистика (Stats)
Анимированные счетчики, использующие Intersection Observer для плавных переходов.
Демонстрация возможностей (Showcase)
Чередование изображений и текста с анимациями скольжения.
Отзывы пользователей (Testimonials)
Отображает отзывы с рейтингами звездочек, аватарками и цитатами.
Цены (Pricing)
Таблица цен с возможностью выбора между месячной и годовой оплатой и анимированным переключателем.
Часто задаваемые вопросы (FAQ)
Аккордеон с вопросами и ответами, плавно раскрывающимися при нажатии.
Призыв к действию (CTA)
Кнопка призыва к действию с градиентным фоном и светящимися эффектами.
Футер (Footer)
Многостолбцовая структура ссылок и социальных сетей.
Каждая секция хранится в отдельном файле внутри папки /sections, что упрощает их комбинирование и адаптацию под конкретные нужды.
Реализация темного режима
Темный режим оказался самой трудоемкой частью разработки. Решение было найдено путем применения пользовательских свойств CSS для всех цветов интерфейса. Например:
:root {
--bg-primary: #ffffff;
--text-primary: #111827;
}
[data-theme="dark"] {
--bg-primary: #0b1120;
--text-primary: #f1f5f9;
}
Таким образом, изменение темы происходит простым добавлением атрибута [data-theme="dark"] к корневому тегу документа.