Верстка промо страницы для Shock-World

Спустя некоторое время после завершения главной страницы Shock-World мне поступил заказ на верстку промо страницы, которая тоже оказалась весьма интересной.

Основная идея в том, что сайт состоит из 3-х секций каждая из которых растягивается на весь экран, а горизонтальное переключение по секциям происходит через стрелки влево/вправо, через кнопки в низу экрана, а так же при скролле:



Для реализации такого функционала я решил использовать slick slider. На коллбэки слайдера я подцепил необходимые обработчики и все заработало как и ожидалось. При переходе по секциям происходит анимация элементов секции, выделяется привязанные к секции пункт меню и активируются/исчезают стрелочки в зависимости от направления и доступности следующей секции.

Промо страница адаптивная, контент доступен на любом устройстве от экранов мониторов, до мобильных устройств:



Одна из фишек данной промо страницы это игровое поле. При выборе ячейки происходит ajax запрос на сервер и пользователю открывается бонус пришедший в ответе от сервера. Можно выбрать до 3-х ячеек, а так же сбросить их красивой анимацией. Как именно происходит обработка на сервере мне неизвестно, я лишь написал запросы и необходимые обработчики передав на бекенд информацию, которую мне указали в ТЗ. Результат: