Живе демо: https://estatex-realestate.netlify.app/

Більшість шаблонів для нерухомості схожі на електронну таблицю з фотографіями: сітка карток, цінник, кнопка «зв'язатися з агентом», повторені сто разів. ESTATEX відкидає цей каталожний формат. Він побудований навколо однієї ідеї: будинок має сприйматися як місце, яке запам'ятовуєш, а не як товар, повз який гортаєш. Кожен екран, від hero на весь екран до галереї з прокруткою кімната за кімнатою на сторінці об'єкта, має ритм і композицію редакційного розвороту, тож оголошення за $2 млн (або весь бренд бутикового агентства) виглядає продуманим і дорогим, а не шаблонним і безликим. Якщо ви колись відкривали сайт нерухомості й нічого не відчували, ось рішення.

Головна сторінка відкривається кінематографічним hero, далі йдуть головний об'єкт, вибір категорій «Досліджуйте за відчуттям» із напрямленими переходами при наведенні, асиметрична редакційна сітка об'єктів, розділ про філософію бренду, представлення агентів і завершальний заклик до дії: повноцінна історія, а не набір віджетів. Сторінка колекції об'єктів має живий пошук і фільтрацію з плавною пагінацією та збереженими обраними, тож перегляд відчувається чутливим, хоча все працює на стороні клієнта. Центральний елемент - сторінка деталей об'єкта: архітектурна галерея, керована прокруткою, що проводить через кожну кімнату в міру прокручування, а також інтерактивне планування, карта району, розділ зручностей, профіль агента та заклик до контакту. Окремі сторінки про локації, агентів, про нас і контакти доповнюють сайт, усі в єдиній дизайн-системі, і кожен стан опрацьовано з турботою (порожні результати пошуку, відсутність обраних, власна сторінка 404), а не лише ідеальний сценарій.

Нічого з цього не вимагає втручання в бекенд. Увесь контент (об'єкти, агенти, локації, категорії) зберігається у простих типізованих файлах даних у src/data/, тож додати оголошення чи змінити біографію агента - це копіювання й вставлення, а не інтеграція з CMS. Зображення проходять через простий конструктор URL, який працює з Unsplash одразу або з вашими власними розміщеними фото. Кольори, шрифти та час анімацій - централізовані дизайн-токени, тож зміна стилю всього сайту (акцентний колір, типографіка, відчуття руху) - це правка в кількох файлах, а не пошуки серед сотень компонентів. Повний посібник для клієнта крок за кроком пояснює, як редагувати тексти, зображення, навігацію, кольори, шрифти, анімації, форми та брендинг.

Створено на Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, Framer Motion, GSAP із ScrollTrigger, плавній прокрутці Lenis, Leaflet з безкоштовними тайлами OpenStreetMap та React Hook Form із валідацією Zod. Форма контактів повністю валідується зі станами завантаження й успіху і готова до підключення до будь-якого бекенда форм на ваш вибір. Повністю адаптивний від великих настільних екранів до мобільних, увесь рух поважає prefers-reduced-motion, скрізь семантична розмітка та навігація, зручна для клавіатури, а SEO-метадані (Open Graph, sitemap, robots.txt) вже налаштовані. Що ви отримуєте: повний вихідний код Next.js, посібник для клієнта та ліцензію на один проєкт для розгортання одного живого сайту - готово до розгортання на Netlify чи Vercel без налаштування сервера.