| Клієнт | Власний концепт-проєкт |
| Тип | Односторінковий лендинг · Ресторан |
| Мови | UA + EN |
| Стек | Next.js · React · TypeScript · Vercel · Кастомна збірка |
| Live | з Червень 2026 |
| Адреса | steakhouse-one.vercel.app |
VATRA — вигаданий преміальний стейкхаус, який я спроєктував і зібрав як робочий концепт-лендинг, а не макет. Мета: єдиний публічний артефакт, що доводить — кастомний фронтенд-стек (Next.js, React, TypeScript) здатен дати відшліфований сайт ресторану високого рівня з двомовним контентом, SEO на рівні коду й реальним сценарієм бронювання, задеплоєний на сучасному CI/CD-конвеєрі.
Завдання
Спроєктувати односторінковий сайт, що передає атмосферу преміальної кухні на вогні та веде відвідувача до бронювання столу. Він мав відчуватися редакційним і дорогим, працювати двома мовами, залишатися швидким і працювати на продакшн-інфраструктурі — не статичний прототип.
Мій підхід
- Зібрав кастомний односторінковий сайт з нуля на Next.js (React + TypeScript, App Router) — без шаблону й конструктора сторінок.
- Розробив темну «вогняну» естетику з єдиним візуальним стилем і преміальною типографікою по всіх секціях: hero, філософія, відруби визрівання, меню, атмосфера, доставка й кейтеринг, бронювання.
- Зробив сайт двомовним (UA/EN) з перемикачем мов, що охоплює всі рядки інтерфейсу й контенту.
- Додав форму бронювання, сітку меню з цінами, галерею атмосфери та блок доставки/кейтерингу — повну комерційну структуру ресторанного лендингу.
- Задеплоїв через GitHub → Vercel (CI/CD, авто-HTTPS, CDN), із SEO-метою на рівні коду.
Результат
Відшліфований, повністю адаптивний двомовний лендинг, що веде відвідувача від першого враження до заявки на бронювання. Побудований на сучасному фронтенд-стеку й задеплоєний на продакшн-інфраструктурі, він водночас слугує доказом, що студія працює поза межами WordPress — включно з кастомними сайтами на React/Next.js.
Відомі компроміси
VATRA — концепт-проєкт: форма бронювання та сценарії доставки є фронтенд-демо, не під’єднані до реального бекенду ресторану чи платіжної системи. Бренд і контент вигадані. Кожне обмеження — свідомий вибір обсягу для портфоліо-демо, названий прямо, а не замаскований.
Стек
Next.js · React · TypeScript · App Router · Vercel (CI/CD) · Кастомна збірка (без UI-кіта фреймворку) · SEO на рівні коду
