Сайт SPA-готелю з бронюванням номерів
Про проєкт
«Undersun» — п’ятизірковий спа-готель, розташований на березі чорного моря в селі Грибівка. Це місце відрізняється екологічно чистою п’ятикілометровою зоною з широкими дрібнопіщаними пляжами, пансіонатами та базами відпочинку. Готель надає широкий спектр послуг: ресторан, безплатне паркування, сезонний відкритий басейн, бар, доставку їжі в номер, сауну та багато іншого.
«Undersun» просувався та надавав послуги через системи інтернет-бронювання, такі як «Booking», «HotelsCombined» та безліч українських сервісів. Але робота з ними накладала низку обмежень, тому власники спа-готелю вирішили створити власний сайт для просування бренду.
Наше завдання полягало у створенні привабливого, адаптивного сайту з можливістю бронювання номерів і демонстрацією послуг, що надаються.
Програмінг сайту
Перед початком роботи по сайту ми розгорнули середовище для подальшої розробки та налаштували сервер, враховуючи стек технологій, що використовується. Річ у тому, що Laravel і Nuxt.js — корисні, але досить примхливі інструменти. Тому важливо підібрати для них потрібне середовище та правильно його налаштувати.
Back-end розробка на Laravel
Для розробки «внутрішньої» складової ми вирішили використати
Laravel — популярний та адаптивний фреймворк, який найкраще підходить для вирішення легких та середніх за тяжкістю завдань. При цьому він легко масштабується і доопрацьовується, тому в будь-який момент можна виправити помилки та швидко налаштувати сайт за бажанням клієнта.
Laravel – це фреймворк мови програмування PHP. Завдяки йому верстальникам і дизайнерам не потрібно щоразу винаходити велосипед, аби створити вебдодаток. Натомість вони можуть зосередитися на вирішенні по-справжньому важливих завдань. Laravel дозволяє робити як прості, так і складні сайти, запроваджуючи потрібний функціонал. Не дарма слоган проєкту свідчить, що це інструмент для ремісників.
Адміністративна панель
Nova — це чудово оформлена та максимально зручна адміністративна панель для Laravel. Її основна особливість полягає у можливості створювати, переглядати, редагувати та видаляти ресурси в базі даних. Крім цього, розробник може працювати з об'єктивами, створювати фільтри, вибирати пріоритетність завдань та користуватися SQL-пошуком. Тому слова творців Nova про те, що їхній продукт зробить із вас найпродуктивнішого працівника в галактиці — не порожні слова.
На панелі для адміністратора сайту ми реалізували:
- Додавання контенту з перекладом на три мови;
- Додавання множинних сутностей «кімнат»;
- Збереження зображень та відео;
- Роботу із зображеннями в окремому розділі адмін. панелі;
- Використання конструкторів для редактури за допомогою Flexible Content. Завдяки цьому адміністратор може створювати блоки з будь-яким набором полів і міняти їх місцями.
Крім цього, ми використовували REST API, за допомогою якого можна «віддавати» весь контент у зручному форматі json.
Front-end розробка на Vue.js
Головна мета проєкту – залучення клієнтів з подальшим бронюванням номерів, тому сайт має індексуватись пошуковими системами. Для цього найкраще підходить фреймворк Nuxt.js. Він заснований на більш відомому Vue.js і дозволяє досягти потрібної нам мети через малювання з боку сервера (SSR). Завдяки цьому вже зі старту сайт підтримує необхідний функціонал для SEO просування в пошукових системах.
Туризм — міжнародне захоплення, яким із кожним роком починає цікавити дедалі більше людей із різних частин планети. З цієї причини ми вирішили запровадити мультимовність за допомогою i18n та додати українську, російську та англійську версії сайту.
Зазначимо, що це не стандартний автопереклад — контент заповнюється окремо для кожної мови та має унікальні URL-адреси.
Серед цікавих завдань під час розробки відзначимо додавання великої кількості ефектів та анімацій. Переважну частину ми реалізували за допомогою бібліотеки GSAP.
Ось кілька прикладів анімацій, реалізованих на сайті:
- Scroll Trigger — поява блоків, коли скрол на сторінці досягає певної позиції.
- Split Text — поява тексту символічно.
- Timeline + Scroll Trigger + плавний скрол — ефект паралакса.
Крім того, ми реалізували досить цікаву анімацію зміни між слайдами, яка підтримує відразу кілька ефектів. Для її створення використовувалася бібліотека Hover Effects, заснована на Three.js.
Як випливає з назви, вона працює при наведенні курсора, тому нам довелося доопрацювати та адаптувати її під елемент з автоматичною зміною слайдів через заданий проміжок часу (autoplay).
Підсумок
В результаті ми отримали стильний і повністю адаптивний сайт, що має безліч цікавих ефектів. Окремо хочеться виділити мінімалістичну та зрозумілу для користувача сторінку бронювання, де кожен охочий може ознайомитися з коротким описом, списком послуг та переваг, фотографіями, ціною та можливістю бронювання.
Комментарии