Задача — разработать с нуля презентационный лендинг для глэмпинга премиум-класса в горах Сочи. Сайт должен передавать атмосферу уединённого отдыха на природе, вызывать доверие и подводить посетителя к бронированию.
Основные требования:
— Премиальный визуал: крупные фото, плавные анимации, «воздушная» типографика.
— Полная адаптивность: от мобильных 360px до десктопа 1440px+.
— Интерактивный календарь свободных дат с мгновенным расчётом стоимости.
— Карточки домиков с детальными модальными окнами (фотогалерея, характеристики, цены).
— Каталог пакетов отдыха, блок активностей, отзывы в виде карусели с drag-свайпом.
— FAQ-аккордеон, контакты, карта и всё — на одной странице без перезагрузки.
— Высокая скорость загрузки и SEO-friendly разметка.
Дизайн и визуальный стиль:
Выбрал сдержанную природную палитру (оливковые, кремовые тона) и пару шрифтов Prata + Manrope для сочетания элегантности и читабельности. Каждый блок спроектирован по принципу «один экран — одна задача».
Вёрстка:
Чистый HTML5 + CSS3 без фреймворков, что даёт минимальный вес и максимальную скорость. CSS-переменные, grid/flex-разметка, адаптив через два брейкпоинта (860px, 560px). Все анимации на CSS @keyframes и IntersectionObserver (reveal при скролле).
Интерактив. Написал на чистом JavaScript (без библиотек):
— Календарь с навигацией по месяцам, подсветкой свободных/занятых дат и автоматическим расчётом итоговой стоимости.
— Модальные окна карточек домиков с переключением фото, ценами и кнопкой бронирования.
— Панельная система (center-panel) для детализации пакетов, галереи, отзывов и юридических документов.
— Карусель отзывов с drag/swipe-жестами на touch и десктопе.
— Lightbox для полноэкранного просмотра фотографий.
Изображения. Подготовил все фотографии в высоком разрешении (1400–1700px), оптимизировал в JPEG quality 90 для баланса между качеством и весом. Для галереи создал визуально уникальные варианты (кропы, тонировка), чтобы избежать повторов.
Готовый, полностью функциональный лендинг, который можно адаптировать под реальный бизнес за 1–2 дня (подключить CRM, добавить бэкенд бронирования, заменить контент).
Что получилось: — Время загрузки < 2 сек на 4G, все изображения lazy-loaded. — 100% адаптив: выглядит нативно на iPhone SE, планшетах и 27" мониторах. — Пользователь может выбрать домик, дату, увидеть итоговую цену и оставить заявку — всё без перезагрузки страницы. — Живой сайт: https://glamp-sochi.vercel.app
Сайт демонстрирует навыки, востребованные в коммерческих проектах: умение создать визуально премиальный продукт, написать чистый производительный код и довести проект до рабочего деплоя.