Сайт 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.
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).
Так же мы интегрировали модуль бронирования, который позволяет просматривать доступность номеров по датам и оставлять заявку на определённое время.
Итог
В результате, мы получили стильный и полностью адаптивный сайт, имеющий множество интересных эффектов. Отдельно хочется выделить минималистичную и понятную для пользователя страницу бронирования, где каждый желающий может ознакомиться с кратким описанием, списком услуг и преимуществ, фотографиями, ценой и возможностью бронирования.
Комментарии