---
title: "NORDHUS — Сайт загородного отдыха · alekhin.dev"
description: "Сайт загородного отдыха: каталог домов с фильтрами, фотогалереи и форма бронирования."
canonical_url: "https://alekhin.dev/projects/nordhus/"
meta:
  "og:description": "Сайт загородного отдыха: каталог домов с фильтрами, фотогалереи и форма бронирования."
  "og:image": "https://alekhin.dev/_og/s/o_e7eb6170a42341b7.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "NORDHUS — Сайт загородного отдыха"
  "twitter:image": "https://alekhin.dev/_og/s/o_e7eb6170a42341b7.png"
---

> Index of every page on this site: [llms.txt](https://alekhin.dev/llms.txt)

[К проектам](https://alekhin.dev/#projects)2024

Сайт загородного отдыха

# NORDHUS

Сайт загородного отдыха: каталог домов с фильтрами, фотогалереи и форма бронирования.

<dl>

<dt>Задача</dt>
<dd>Помочь гостю сравнить дома и перейти к бронированию подходящего варианта.</dd>

<dt>Что сделано</dt>
<dd>Собрал каталог с фильтрами, страницы домов, фотогалерею и форму бронирования.</dd>

<dt>Результат</dt>
<dd>Посетитель может изучить дома, выбрать вариант и пройти сценарий бронирования на компьютере или телефоне.</dd></dl>

## Моя роль

Проектирование интерфейса, адаптивная разработка, каталог домов, галереи и клиентские сценарии бронирования.

<dl>

<dt>Состав работ</dt>
<dd>Сайт бронирования / Frontend / UI</dd>

<dt>Период</dt>
<dd>2024</dd>

<dt>Статус</dt>
<dd>завершён</dd>

</dl>

## Стек

- Nuxt
- Vue
- TypeScript
- Tailwind CSS

*Главная страница*

Первый экран знакомит с местом и сразу предлагает перейти к выбору дома.

## От первого впечатления к выбору дома

Крупные фотографии передают атмосферу, а каталог помогает сравнить дома и выбрать подходящий вариант.

*Вся главная страница*

Полная главная страница связывает атмосферу места, варианты размещения и доступные впечатления.

*Каталог домов*

Каталог даёт сравнить дома по фотографиям и характеристикам перед переходом к подробностям.

*Впечатления и услуги*

Отдельная страница показывает, чем можно заняться во время поездки, дополняя выбор размещения.

*Страница дома Lake*

Страница отдельного дома объединяет галерею, описание и характеристики рядом с переходом к бронированию.

## Удобно смотреть и бронировать с телефона

Фотографии, фильтры и кнопки остаются крупными, поэтому дом можно выбрать без увеличения экрана.

*Главная на телефоне*

На телефоне длинная главная страница сохраняет последовательность разделов и доступ к выбору дома.

*Каталог на телефоне*

Карточки домов перестраиваются в вертикальный каталог; фотографии и ключевые параметры остаются читаемыми.

*Дом Lake на телефоне*

Мобильная страница дома позволяет рассмотреть фотографии и перейти к бронированию с того же экрана.

## Бронирование без лишних переходов

Даты, гости и параметры дома выбираются прямо на странице, а галерею можно открыть на весь экран.

*Форма бронирования*

Форма бронирования открывается поверх сайта, сохраняя контекст выбранного дома.

*Lightbox-галерея*

Фотографии дома можно открыть крупно в отдельной галерее и рассмотреть детали.

*Фильтры на телефоне*

На телефоне параметры подбора вынесены в отдельную панель, чтобы не занимать место в каталоге.

<details>

<summary>Технические детали

</summary>

Каталог, страницы домов, фильтры, галерея и диалог бронирования собраны на Nuxt и Vue. Компоновка адаптирована для широких экранов и телефонов.

</details>

## Обсудим вашу задачу?

Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы.

## Связаться

[alekhin.v99@gmail.com](mailto:alekhin.v99@gmail.com)

[Telegram](https://t.me/alekhin_vv) [GitHub](https://github.com/ValentinAlekhin)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://alekhin.dev/#website","@type":"WebSite","description":"Сайт загородного отдыха: каталог домов с фильтрами, фотогалереи и форма бронирования.","inLanguage":"ru-RU","name":"NORDHUS","url":"/projects/nordhus/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"mainEntityOfPage":{"@id":"https://alekhin.dev/projects/nordhus/#webpage"},"publisher":{"@id":"https://alekhin.dev/#identity"},"workTranslation":{"@id":"https://alekhin.dev/en/#website"}},{"@id":"https://alekhin.dev/projects/nordhus/#webpage","@type":"WebPage","description":"Сайт загородного отдыха: каталог домов с фильтрами, фотогалереи и форма бронирования.","name":"NORDHUS — Сайт загородного отдыха","url":"https://alekhin.dev/projects/nordhus/","breadcrumb":{"@id":"https://alekhin.dev/projects/nordhus/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"isPartOf":{"@id":"https://alekhin.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/projects/nordhus/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Разработчик сайтов и сервисов","name":"Валентин Алёхин","url":"https://alekhin.dev/","knowsAbout":["TypeScript","Vue","Nuxt","Node.js","Go","SaaS"],"sameAs":["https://github.com/ValentinAlekhin","https://t.me/alekhin_vv"]},{"@id":"https://alekhin.dev/projects/nordhus/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev","position":1},{"@type":"ListItem","name":"NORDHUS","item":"https://alekhin.dev/projects/nordhus/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/nordhus/og.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/nordhus/og.webp"},{"@id":"https://alekhin.dev/#/schema/image/2","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/nordhus/og.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/nordhus/og.webp"}]}
```

## Sitemap

See the full [sitemap](https://alekhin.dev/sitemap.md) for all pages.