GENIUS

GENIUS — Лендінг-сторінка навчального курсу
Лендінг за макетом із Figma з сучасним дизайном, акцентами на CTA та чіткою структурою. Використано HTML, CSS і JavaScript без сторонніх фреймворків.

Технології
HTML5
CSS3
JavaScript (таймер, скролл, логіка зміни цін)
Технічне завдання
Верстаємо пк версію 1в1 як на макеті, моб версію можна адаптивно зробити самому, але щоб це круто виглядало. (для моб версії є окремо промальований блок “Програма курсу”).

Дві кнопки “Записатися на курсу” що в першому блоці ведуть плавним скроллом до пакетів “Формат участі”, на кнопках ставимо плавну анімаці зі зміною фону кнопки з фіолетового на білий.

Блок “Програма курсу”, кожен модуль плавно відкривається випадаючим елементом знизу, його можна розкрити та відкрити натиснувши по блоку “Модуль…”. Кожен урок має свій окремий опис (назви уроків та опис можна взяти з макету та під кожен модуль зробити однакові). В кожному уроці є кнопка “Забронювати місце на курс” яка веде до блоку з пакетами “Формат участі”.

Блок “Оберіть свій формат участі” має таймер до наступної пʼятниці до 23:59, кожен пункт в форматах участі де біля нього є іконка має при наведені свою підказку, на кожен пункт можна поставити однакову підказку яка є на макеті. На цінах в цьому блоці потрібно поставити скрипт який разом з таймером в задану дату буде автоматично змінювати ціни, можна змінені ціни поставити на 1 тис грн більше, і так 4-ри рази. Тобто якщо пакет про 10080, то наступна ціна 11080, наступна 12080 і тд.

Блок “Розстрочка” має по середині дедлайн “Пропозиція діє до: ”, там встановити скрипт який бере сьогоднішню дату та додає +2 дні до цієї дати.

Статус виконання
ПК версія 1:1 з макетом
Плавний скролл та анімації кнопок
Випадаючі модулі програми
Підказки при наведенні
Таймер до п’ятниці
Автоматична зміна ціни (4 етапи)
Скрипт розстрочки (плюсує 2 дні до поточної дати)
Проєкт не використовує сторонніх бібліотек чи фреймворків
Увесь код написаний вручну з фокусом на чисту верстку та функціональність.