YOUNG CHEFS: створення лендингу для «смачного» івенту

Hoteliero — компанія, яка займається організацією різних івентів. YOUNG CHEFS — один із них, тому потрібен був лендинг для інформативності відвідувачів та продажу квитків. За розробкою Hoteliero звернулися до нас. Розглянемо, як ми реалізували цей вебсайт.

Оскільки це лендинг, всі блоки розташовані на одній сторінці. Ми розробили сайт для івенту з майстер класами та pop-ups від шеф-кухарів з продуманою структурою, розгляньмо її детальніше.

Його особливість — фон адаптується до фону сторінки. Наприклад, при скролі на екран з білим фоном, хедер теж стає білим. Ми досягли цього за допомогою кастомної функції JS. Кольорова палітра в певній області екрану зчитується та колір хедеру міняється на відповідний. На ньому розташовані кнопки «Що буде», «Для кого», «Програма», «Спікери», «Квитки», «Контакти», клікнувши на які користувача переносить на відповідну секцію лендингу. В правому верхньому куті розташований CTA «Купити квиток».

Він одразу кидається в очі, оскільки реалізовано яскраве зображення. На ньому розташовані текстовий блок з назвою івента. Крім цього, ми впровадили такі клікабельні кнопки:

• «Купити квиток» — при кліці користувача переносить на секцію сторінки, де можна придбати квиток;
• «Програма» — швидкий перенос до розділу з програмою івенту;
• «Тут фото» — при кліці користувача переносить на сторінку івенту в соціальній мережі FaceBook;
• «Тут відео» — при кліці відкривається відеопрезентація івенту.

Він білого кольору, на ньому розташовано декілька текстових блоків. Користувач може ознайомитись з тим, що буде на івенті. Крім цього, відображається кількість спікерів, гостей та запланованих pop-ups. При скролі вниз вона зростає від 0 до відповідного числа. Це реалізовано за допомогою функції JS «Counter up animation». Наші розробники вказали число, до якого кількість спікерів та інших зростає від нуля.

На темному фоні ми розмістили текстові блоки, тематичні іконки та клікабельні картинки. При кліці на зображення відкривається віконце з картинкою та описом до неї. Нам це вдалося зробити за допомогою JS-бібліотеки «Fancybox». В нижній частині ми реалізували кнопку CTA. 

На білому фоні відображена програма заходу. Оскільки івент складається з двох частин — Chefs Scene та Food Lab, ми реалізували перемикач. Користувачеві достатньо клікнути по частині, яка його цікавить, щоб переглянути розклад. Під розкладом ми також додали кнопку CTA.

В цій секції користувачі можуть ознайомитись зі спікерами івенту. Ми реалізували блоки з чорно-білими фотокартками. При наведенні курсора на фотокартку вона стає кольоровою завдяки CSS-властивості «Filter». Під фото кожного спікера є невеликий блок з текстом, де розміщена інформація про нього. Якщо користувач хоче дізнатись більше про ораторів івенту, достатньо клікнути на фото. Після цього з’являється віконце з інформацією про спікера.

На цьому екрані користувач може придбати квиток на івент. На Chefs Scene квитки продаються за однією ціною, а на Food Lab прайс інший. Для привабливого зовнішнього вигляду блока ми додали яскраві іконки.

Компанія Hoteliero вирішила додати блок з партнерами в лендинг івенту. Іконки брендів мали бути інтерактивними. Ми їх реалізували у відтінках сірого та чорного кольорів. Якщо навести курсор, іконки зафарбовуються в корпоративні відтінки вибраного бренду. Крім цього, вони клікабельні, після натискання користувача переносить на корпоративний сайт вибраної компанії.

Блок з популярними ресторанами, шеф-кухарі яких проводять pop-ups. Ліворуч розміщені клікабельні тексти. Якщо натиснути на один з них, праворуч з’являється інформація про заклад. Під нею розташовані клікабельні кнопки з посиланнями на соціальні мережі або вебсайт.

В цьому розділі користувач може ознайомитись з іншими івентами компанії Hoteliero. Їх ми реалізували у вигляді каруселі. Кожен івент супроводжується зображенням, клікнувши на яке, відкривається міні-галерея. Під зображеннями реалізовано текстові поля для опису.

В кінці сторінки ми створили блок з контактами організаторів. Розробники впровадили мініатюри фотографій, інтегрували клікабельні номери телефонів та електронні пошти. Завдяки цьому зв’язатись з організаторами можна в один клік. Футер виконано в темних відтінках. На ньому розташовані лого івенту, CTA-кнопка, текстові поля та посилання на соціальні мережі, благодійного партнера, з яким співпрацює компанія Hoteliero.

Клієнт залишився повністю задоволеним виконаною роботою. Ми впровадили дизайн з усіма побажаннями щодо функціональності та зовнішнього вигляду. Якщо ви бажаєте стати власником крутого лендингу, напишіть нам і ми разом втілимо ваш проєкт в життя!