AHVVM Travel

AHVVM Travel — авторские туры по Дагестану. Гиду нужен был сайт, где видно, какие есть маршруты, когда ближайшие выезды и кто ведёт группу. Макетов не было: структуру страниц и интерфейс я собирал сам, по ходу разработки.

Сначала я прошёл путь будущего туриста: он выбирает маршрут по фотографиям, читает программу, смотрит даты и пишет гиду. Онлайн-оплаты нет — запись идёт через личный диалог, и сайт должен вести именно туда.

Главный экран — каталог туров: в карточке фото, длительность, сложность и ближайшие даты. На странице тура — полноэкранный кадр, программа, даты выездов и кнопка связи с гидом.

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

Фон почти белый, текст почти чёрный — главное на странице делают фотографии гор. Мятно-серый фон выделяет даты, шалфейный — второстепенные подписи, тёмно-красный появляется только в ошибках.

Названия маршрутов набраны широким Unbounded, весь остальной текст — Onest.

Карточка тура построена вокруг большого фото. Под ним направление, цена и даты выезда — их видно с одного взгляда, а нажать можно на любое место карточки.

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

Редактор тура разбит на разделы. У каждого поля есть подпись и подсказка, а поле с ошибкой подсвечивается и получает фокус.

Форма длинная, поэтому панель сохранения прилипает к низу экрана: статус и кнопки «Отмена» и «Сохранить» всегда на виду. Скругления в админке строже, чем на сайте: 8 px у полей, 20 px у карточек, кнопки — пилюли.

Сайт собран на Astro с серверным рендерингом, контент хранится в SQLite. Фотографии отдаются в нескольких размерах, чтобы каталог быстро открывался даже с мобильного интернета.

Каталог и страницу тура проверял на телефоне: кадр, факты и кнопка связи должны помещаться на первом экране.