сміливо переходьте за цим посиланням
[https://arcana-architecture.netlify.app/

Більшість сайтів архітектурних бюро відкриваються однаково: фото на всю ширину екрана, заголовок шрифтом із засічками, сітка мініатюр проєктів. Це непогано. Але це й зовсім не запам'ятовується. ARCANA відкривається інакше: з технічного паспорта проєкту, координат і розмірів, що пробігають, як на справжньому кресленницькому столі, та скрол-послідовності, у якій намальований від руки план поступово перетворюється на фотографію готової будівлі. Це перше враження, через яке відвідувач на секунду перестає гортати й справді дивиться. Усе, що йде після цього початку, створене, щоб зберегти це відчуття, а не скочуватися до звичайної шаблонності.

Шаблон постачається як повноцінний сайт на Next.js із семи сторінок. Головна сторінка містить фірмову скрол-взаємодію Blueprint → Reality, редакційний індекс проєктів, дослідження матеріалів, філософію бюро, вибрані роботи й анонс журналу. Індекс проєктів подає роботи бюро як щільний редакційний список, а не звичайну сітку карток. Кожна сторінка проєкту - це повноцінний кейс: дані проєкту, опис концепції та інтерактивний переглядач креслень План / Фасад / Розріз / Деталь, що дозволяє відвідувачам перемикатися між технічними кресленнями так, як архітектор розвішує їх на стіні, а також використані матеріали та фотографії. Сторінка бюро розповідає про практику та містить горизонтальний архів артефактів бюро, сторінка підходу веде крізь п'ятиетапну методологію (Спостерігати, Визначати, Креслити, Тестувати, Будувати), журнал містить нотатки бюро про матеріали й процес, а контакти - це повністю валідована форма запиту з коректними станами завантаження, успіху та помилки.

Нічого з цього не потребує втручання в бекенд. Кожен фрагмент контенту (проєкти, записи журналу, матеріали, тексти бюро, назви в навігації) міститься в простих, читабельних файлах TypeScript у папці data/, тож перейменувати проєкт, замінити матеріал чи переписати біографію бюро - це редагування тексту, а не перебудова. Зображення підтягуються через невеликий допоміжний конструктор URL, тож ви за лічені секунди можете спрямувати будь-який запис на власну фотографію або файл у public/. Кольори централізовано задано як користувацькі властивості CSS, шрифти змінюються в одному файлі, а навігація - це один масив: така структура робить кастомізацію доступною, навіть якщо ви не дуже добре знаєте React.

Під капотом: Next.js 16 (App Router) + TypeScript, Tailwind CSS 4, Framer Motion для інтерфейсу й переходів між сторінками, GSAP + ScrollTrigger для фірмової скрол-послідовності, Lenis для плавного прокручування та React Hook Form + Zod для валідації контактної форми. Увесь досвід поважає prefers-reduced-motion (GSAP/Lenis повністю пропускаються, переходи Framer згортаються), створений з урахуванням доступності (справжній альтернативний текст, стани :focus-visible, семантична розмітка) та налаштований на високі Core Web Vitals і чисті SEO-метадані з коробки. Що ви отримуєте: повний вихідний код, сім повністю готових сторінок, усі компоненти й анімації, шрифти на власному хостингу, письмовий посібник для клієнта, що охоплює кожен редагований елемент, і конфігурацію розгортання на Netlify в один клік (також без проблем розгортається на Vercel або будь-якому хостингу Next.js). На чому ви будуєте: статичний шаблон без бекенду; докладніше про те, що саме не входить, читайте нижче в розділі «Додаткові відомості».