Dolce Vita Chalet — шале в горах Заамина
Сайт для аренды дома целиком: галерея во весь экран, интерактивный план по зонам, маршрут в горы и заявка на бронирование напрямую владельцу.
- Клиент
- Dolce Vita Chalet Zaamin
- Отрасль
- Аренда жилья
- Срок
- 4 дня
- Команда
- 2 человека
- Формат
- Одностраничный сайт
Показывает дом и принимает бронь
Страница закрывает один сценарий целиком. Гость приходит по ссылке, пролистывает дом сверху вниз, понимает, как туда добраться, и оставляет заявку — не уходя со страницы и никуда не переключаясь.
- Галерея во весь экран вместо сетки миниатюр
- Интерактивный план: общие зоны, спальни, санузлы
- Расположение на карте и маршрут в Google Maps
- Форма брони с именем, телефоном и числом гостей
Одна длинная страница вместо каталога
Дом сдаётся целиком, поэтому каталог не нужен — нужна одна длинная страница, которая читается за одну прокрутку и на каждом экране даёт повод написать.
- Каждый экран отвечает на один вопрос гостя
- Якорная навигация вместо переходов между страницами
- Снимки в WebP, с отдельного домена для файлов
- Заявка уходит на сервер, а не в почтовую ссылку
Как выглядит
Снимки сделаны с работающего сайта.
Страница целиком
Первый экран с цифрами дома, галерея, план по зонам, дорога и форма брони — одной прокруткой.
Что умеет
Галерея дома
Снимки комнат, террасы и видов на весь экран, с прокруткой без перезагрузки страницы.
Интерактивный план
Переключение между общими зонами, спальнями и санузлами прямо на схеме дома.
Как добраться
Точка на карте и кнопка, открывающая готовый маршрут в Google Maps.
Заявка на бронь
Имя, телефон, число гостей и комментарий, с обработкой на сервере.
Быстрые изображения
Фотографии дома в WebP нужного размера, чтобы первый экран открывался на мобильном интернете.
Как шла работа
- 01
Собрали материал
Отобрали фотографии дома и видов, свели факты: спальни, вместимость, высота, дорога от трассы.
- 02
Собрали порядок экранов
Решили, в каком порядке гость видит дом: вид, интерьер, как добраться, бронь.
- 03
Свёрстали и подключили форму
Next.js, изображения на отдельном домене, заявка с серверной обработкой.
- 04
Запустили
Домен, метатеги и карта сайта — чтобы страницу нашли поиском, а не только по прямой ссылке.
Технологии проекта
Фронтенд
- Next.js
- React
- TypeScript
Вёрстка
- Tailwind CSS
Изображения
- next/image
- WebP
Нужен такой же сайт?
Расскажите о проекте — оценим сроки и стоимость в течение 24 часов.