Верстка головної сторінки сайту

Хотим оновити головну сторінку сайту та підлаштувати її під движок 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…), правильна вкладеність.

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