Сайт SPA-готелю з бронюванням номерів
Про проект
«Undersun» — п’ятизірковий спа-готель розташований на березі чорного моря в селі Грибівка. Це місце відрізняється екологічно чистою п’ятикілометровою зоною з широкими дрібнопіщаними пляжами, пансіонатами та базами відпочинку. Готель надає широкий спектр послуг: ресторан, безкоштовне паркування, сезонний відкритий басейн, бар, доставку їжі в номер, сауну та багато іншого.
«Undersun» просувався та надавав послуги через системи інтернет-бронювання, такі як «Booking», «HotelsCombined» та безліч українських сервісів. Але робота з ними накладала низку обмежень, тому власники спа-готелю вирішили створити власний сайт для просування бренду.
Наше завдання полягало у створенні привабливого, адаптивного сайту з можливістю бронювання номерів та демонстрацією послуг, що надаються.
Процес розробки
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).
