EN

Кейс / 05

Panorama Lviv

Відкрити оглядову копію

Одна квартира у Львові, весь сенс якої — у вікні. Тому сайт побудований так, щоб довести: краєвид справжній, і попросити його можна за хвилину.

РольДослідження, продукт, перемальовка знака, дизайн, розробка, деплой — самостійно
ПеріодЗібрано й задеплоєно · чекає на перенесення домену
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind 4
  • next-intl
  • Zod
  • sharp
  • Vercel

Задача

Краєвид був продуктом, і його ніхто не бачив.

Уся присутність квартири в мережі — одна сторінка на Google Sites із сімдесятьма девʼятьма словами власного тексту, опублікована без змін одразу на двох доменах. Обидва в індексі, жоден не вказує на інший, фотографії обрізані до 1280 пікселів на чужому CDN.

Один власник здає одну квартиру. Немає ні ресепшну, ні агенції, ні channel manager — і бюджету на них теж немає. Те, що приходить на заміну, мусить редагуватися ним самим, коштувати копійки в утриманні й чесно казати, чого воно ще не знає.

Система

Гравюрна панорама і ключ до неї.

Львів століттями малювали однією смугою силуету, а під нею — ключ із назвами веж. Аргумент продукту — це краєвид, тож сайт бере саме цю форму замість звичного для орендних порталів набору: пошуковий віджет, три картки й карта внизу.

01

Панорамний ключ

  • Справжнє фото з вікон їде вбік разом зі скролом по треку, який на малих екранах ширшає, щоб телефон теж відкривав нове місто.
  • Сім памʼяток стоять на справжніх азимутах, порахованих із координат: Високий Замок 79,8°, площа Ринок 102,6°, університет 124,0° — усе в дузі від 76° до 129°.
  • Собор святого Юра лежить у файлі даних на 178,8°, але в ключі його свідомо немає: з цих вікон його не видно.
02

Бронювання без бекенду

  • Справжня форма із серверною дією: вона відправляється ще до гідратації й працює з вимкненим JavaScript.
  • Захист від спаму без CAPTCHA — honeypot, мінімум три секунди на формі, пʼять запитів на хвилину з адреси. Спійманий бот бачить той самий екран успіху, що й людина.
  • Пошта необовʼязкова. Поки вона не налаштована, запит повністю пишеться в лог, а гість одразу отримує Viber або Telegram із уже написаним текстом.
03

Фотографії та стриманість

  • Двадцять вісім знімків перетворюються на 306 похідних у AVIF і WebP на пʼяти ширинах, зі збереженими справжніми розмірами, тому нічого не стрибає при завантаженні.
  • Один кадр виключений за назвою файлу, бо на ньому впізнавані діти. Це виняток у коді збірки, а не примітка в документі.
  • Жодної оптимізації зображень у рантаймі: усі похідні вже лежать на диску, тож вона додала б лише затримку й рахунок.

Продакшн-сценарії

Три рішення, які визначили збірку.

Розкрийте сценарій, щоб побачити логіку. Кожен — місце, де очевидний варіант відкинули з названої причини.

01Координати → ключ, який можна перевіритиПанорама стверджує те, що піддається перевірці, а не те, що просто гарно виглядає.
  1. Геокодувати десять памʼяток і порахувати справжній азимут та відстань від вікна.
  2. Лишити тільки те, що потрапляє у видиму дугу, а решту зберегти з причиною, чому її виключено.
  3. Відкалібрувати час пішки — 72 метри за хвилину — за двома маршрутними значеннями, опублікованими для цієї адреси, і завжди показувати його як приблизний.
02Рух → три чесні запасні станиПрибрати рух ніколи не означає прибрати зміст.
  1. Без JavaScript секція складається в один статичний кадр з усіма підписами на місцях.
  2. У режимі зменшеного руху панорама стоїть, вписана в кадр, підписи не змінюються.
  3. На вузькому екрані трек ширшає, тож панорамування відкриває місто, а не повзе.
03Заявка → відповідь, яку власник побачитьНічого не губиться тихо, поки власник вирішує, як з ним звʼязуватись.
  1. Одна схема перевіряє дані на клієнті заради підказок і на сервері як єдиний бар'єр, що має значення.
  2. Без налаштованої пошти заявка пишеться туди, звідки її можна дістати, а гість усе одно бачить успіх.
  3. Посилання у Viber і Telegram несуть дати й текст уже набраними, бо саме так ці бронювання й закриваються.

Інтерактивне превʼю

Ключ, який ведете ви.

Це продакшн-герой з однією зміною. На сайті місто їде від скролу; всередині сторінки, яка сама гортається, це заважало б читачеві — тож тут панораму ведете ви. Фотографія, обробка кадру, дуга і всі азимути справжні.

P1

Панорамний ключ

Проведіть панораму й дивіться, як змінюється азимут у центрі кадру. Перейдіть до святого Юра, щоб побачити, чому його немає в ключі.

Справжнє фото і справжні азимути · повзунок замість скролуАзимути взяті з продакшн-файлу даних. Доказ того, що ключ порахований, а не намальований, — саме та памʼятка, яку він пропускає.

Що зроблено

Мала поверхня, свідома скрізь.

Ці цифри описують збірку, а не бізнес. Сайт ще не запущений, тому результатів не дав і жодних тут не заявлено.

статично згенерованих сторінок
14
Сім маршрутів двома мовами
памʼяток у ключі / геокодовано
7 / 10
Дуга 76°–129°
похідних зображень
306
З 28 фото, одне виключено правилом
серверна дія в усьому проєкті
1
Решта статична
сторонніх запитів на більшості сторінок
0
Десять із чотирнадцяти; лінива карта на двох

Що це доводить

Маленький бриф не означає маленьку задачу.

01

Форму сайту може задавати його аргумент

Структура йде за тим, що продукт насправді продає, а не за типовою розкладкою орендного порталу.

02

Робочий софт раніше за налаштування

Форма бронювання корисна ще до того, як зʼявилася пошта, і чесно про це каже замість тихої помилки.

03

Контент, який утримає нетехнічний власник

Усе, що він імовірно правитиме, — це прості типізовані файли з двома мовами поруч. Без CMS і без адмінки, яку треба вчити.