Верстка главной станицы сайта

Хотим обновить главную страницу сайта и подогнать ее под движок WHCMS (HTML +PHP)

Есть готовий дизайн, нужно сделать верстку используя уже готовый шаблон. 

Так же прикрепляю тз: 

1. Общие положения

• Верстка точно по макетам Figma: размеры, отступы, типографика, цвета, состояния элементов (hover, active).

• Код должен быть адаптирован под WHMCS-шаблон (Smarty / PHP-файлы).

• Обязательная отзывчивость: дизайн под десктоп, планшет, мобильные.

• Кроссбраузерность: Chrome, Firefox, Safari, Edge (актуальные версии).

• Оптимизация ресурсов: минификация CSS/JS, lazy-load для изображений, SVG для иконок, использование WebP, если возможно.

• Семантика HTML, корректные теги (header, nav, main, footer и др.).

• Чёткая структура CSS (можно использовать методологии BEM, SMACSS или аналогичные).

• Внимание к состояниям элементов (кнопки при наведении, активные меню и т.п.).

2. Структура страницы (на основе макета Figma, условно)

Ниже — ориентировочные блоки, соответствующие макету Figma:

1. Хедер / шапка

   • Логотип слева.

   • Главное меню (пункты навигации).

   • Кнопки “Войти / Регистрация” (используя стили из макета).

   • Возможно — переключатель языка / валюты.

   • Фоновая заливка / эффект (теневые, градиенты) — как в макете.

   • Фиксированный хедер при прокрутке (если это заложено в дизайне).

2. Hero / баннер / первый экран

   • Заголовок + подзаголовок — стили и размеры из макета.

   • Кнопка CTA (Call-to-Action) — цвет, эффект наведения.

   • Фон (изображение / иллюстрация / паттерн), возможно параллакс или легкая анимация.

3. Блок преимуществ / особенности

   • Иконки + тексты.

   • Расположение (ряд, карточки, сетка).

   • Отступы и выравнивания — как в макете.

4. Блок тарифов / планы

   • Карточки тарифов, внутри:

     • Название тарифа

     • Цена

     • Особенности

     • Кнопка “Заказать / Выбрать”

   • В макете могут быть “лучший выбор / рекомендовано” — нужно реализовать визуально.

   • Возможность динамического подставления цен из WHMCS (PHP-переменные).

5. Блок проверки домена

   • Поле ввода домена + выбор зоны (select).

   • Кнопка “Проверить” — стилизованная.

   • Результаты проверки (внешний блок) — как в макете.

6. Отзывы / кейсы / клиенты

   • Слайдер / карусель (с контролами).

   • Фото / аватары + цитаты + имя / должность.

   • Интервалы и отступы — как в макете.

7. FAQ / часто задаваемые вопросы

   • Аккордеон (состояния открыто / закрыто).

   • Анимация открытия, стрелки иконки — согласно дизайну.

8. CTA-блок / дополнительный призыв к действию

   • Яркий фон / заливка.

   • Заголовок + кнопка → регистрация / начать / заказать.

   • Эффекты наведения, тени и др.

9. Футер

   • Несколько колонок (Меню, Поддержка, Контакты и пр.).

   • Логотип, социальные иконки.

   • Копирайт + мелкие ссылки (Политика конфиденциальности, Условия и др.).

   • Фоновый цвет, отступы и визуальные элементы — как в макете.

3. Интеграция с WHMCS / функциональные моменты

• Файлы шаблона (clientarea.tpl, header.tpl, footer.tpl и др.) подгоняются так, чтобы главная страница была доступна как часть WHMCS (например, через index.php шаблона клиента).

• Текстовые блоки (заголовки, описания) — либо через языковые файлы WHMCS, либо через переменные шаблона (чтобы можно было редактировать через админку).

• Цены тарифов — подтягиваются через WHMCS (PHP/Smarty), вместо статичных цифр.

• Кнопки заказа ведут на cart.php?a=add&pid=ID или на order.php с правильным параметром.

• Форма проверки домена → domainchecker.php WHMCS (или endpoint WHMCS API).

• Авторизация / регистрация — ссылки ведут на страницы WHMCS login.php, register.php.

• Если в макете есть элементы, зависящие от авторизации (например, “Привет, [имя]” или “Моя учетная запись”) — учесть условную генерацию через Smarty ({if $loggedin} и т.д.).

• Подключение CSS/JS — через стандартный pipeline WHMCS (чтобы избежать конфликтов).

• Использовать возможности кеширования WHMCS, где возможно, не нарушая динамики.

4. Технически / детали

• CSS и JS — по возможности разделять: базовый + компоненты + страницы.

• Использовать препроцессор (Sass / Less), если в проекте он уже предусмотрен.

• Минификация в релизе.

• Загрузка изображений — srcset и sizes для адаптивных картинок.

• Lazy-loading (отложенная загрузка) для изображений вне экрана.

• Иконки — SVG, инлайновый код или спрайты.

• Проверка на валидность HTML/CSS (W3C).

• Готовность к SEO: alt-теги, заголовки (h1, h2…), правильная вложенность.

• Проверка работоспособности на мобильных — меню бургер, скрытые элементы, адаптив.