Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт SPA-готелю з бронюванням номерів

Про проект

«Undersun» — п’ятизірковий спа-готель розташований на березі чорного моря в селі Грибівка. Це місце відрізняється екологічно чистою п’ятикілометровою зоною з широкими дрібнопіщаними пляжами, пансіонатами та базами відпочинку. Готель надає широкий спектр послуг: ресторан, безкоштовне паркування, сезонний відкритий басейн, бар, доставку їжі в номер, сауну та багато іншого.

«Undersun» просувався та надавав послуги через системи інтернет-бронювання, такі як «Booking», «HotelsCombined» та безліч українських сервісів. Але робота з ними накладала низку обмежень, тому власники спа-готелю вирішили створити власний сайт для просування бренду.

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

Процес розробки

Перед початком роботи по сайту ми розгорнули середовище для подальшої розробки і налаштували сервер, враховуючи стек технологій, що використовується. Справа в тому, що Laravel і Nuxt.js – корисні, але досить примхливі інструменти. Тому важливо підібрати для них потрібне середовище та правильно його налаштувати.

Back-end розробка на Laravel

Для розробки «внутрішньої» складової ми вирішили використати
Laravel — популярний та адаптивний фреймворк, який найкраще підходить для вирішення легких та середніх за тяжкістю завдань. При цьому він легко масштабується і доопрацьовується, тому в будь-який момент можна виправити помилки і швидко налаштувати сайт за бажанням клієнта.

Laravel – це фреймворк мови програмування PHP. Завдяки йому верстальникам та дизайнерам не потрібно щоразу винаходити велосипед, щоб створити веб-додаток. Натомість вони можуть зосередитися на вирішенні по-справжньому важливих завдань. Laravel дозволяє робити як прості, так і складні сайти, запроваджуючи потрібний функціонал. Не дарма слоган проекту свідчить, що це інструмент для ремісників.

Для адміністративної панелі ми вибрали Laravel Nova, яка з коробки підтримує потрібні функції і значно прискорює розробку для програмістів.

Nova — це чудово оформлена та максимально зручна адміністративна панель для Laravel. Її основна особливість полягає у можливості створювати, переглядати, редагувати та видаляти ресурси в базі даних. Крім цього, розробник може працювати з об'єктивами, створювати фільтри, вибирати пріоритетність завдань та користуватися SQL-пошуком. Тому слова творців Nova про те, що їхній продукт зробить із вас найпродуктивнішого працівника в галактиці — не порожні слова.

На панелі для адміністратора сайту ми реалізували:

  • Додавання контенту з перекладом на три мови;
  • Додавання множинних сутностей «кімнат»;
  • Збереження зображень та відео;
  • Роботу із зображеннями в окремому розділі адмін. панелі;
  • Використання конструкторів для редактури за допомогою Flexible Content. Завдяки цьому адміністратор може створювати блоки з будь-яким набором полів міняти їх місцями.

Крім цього, ми використовували REST API, за допомогою якого можна «віддавати» весь контент у зручному форматі json.

01

/ 05

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).

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

Підсумок

В результаті ми отримали стильний і повністю адаптивний сайт, що має безліч цікавих ефектів. Окремо хочеться виділити мінімалістичну та зрозумілу для користувача сторінку бронювання, де кожен бажаючий може ознайомитися з коротким описом, списком послуг та переваг, фотографіями, ціною та можливістю бронювання.

Бажаєте створити сайт готелю, здатний справити яскраве враження на гостя?

Ми зробимо все, що для цього потрібно: від прототипування, структури та дизайну до SEO-оптимізації, SMM та реклами. Напишіть нам, щоб обговорити деталі проекту сьогодні!

Над проектом работали