Большинство сайтов ресторанов - это один и тот же прокручиваемый буклет: главное фото, меню в PDF, форма обратной связи. NOIRÉ не такой. Он построен как ужин в темноте: каждая прокрутка раскрывает новую сцену, каждое блюдо открывается по подачам, и когда посетитель доходит до кнопки бронирования, он уже чувствует себя сидящим за столом.

Живая демо-версия: https://noire-
dining.netlify.app/

В центре шаблона пять фирменных последовательностей. «Раскрытие блюда» превращает одну тарелку в пятиэтапную кинематографичную историю: ингредиент → приготовление → подача → блюдо → первый кусочек, и всё это управляется прокруткой. «Четырнадцать мест» - интерактивный мотив рассадки, где 14 маркеров плавно появляются и раскрывают часть атмосферы ужина при наведении или касании. «Режим темноты» - закреплённое путешествие по пяти сценам вечера, от прибытия до последнего блюда, управляемое прокруткой, в котором экран постепенно темнеет по мере наступления ночи. «Интерактивное дегустационное меню» проводит гостей через полную последовательность из пяти подач: амюз-буш, первое, второе, основное, десерт, каждая со своим блюдом, ингредиентами и подбором вина. А «Анатомия блюда» открывает каждое отдельное блюдо в том же последовательном стиле меню мишленовского уровня: блюдо → ингредиенты → состав → сочетание с вином.

Всё это управляется обычными типизированными файлами данных в src/data/: никакой CMS, базы данных или бэкенда подключать не нужно. Переименовать ресторан, переписать меню, добавить новое блюдо, заменить фото и видео или изменить цветовую палитру и шрифты можно, просто отредактировав объект TypeScript, не трогая код компонентов. Формы контактов и бронирования полностью готовы и проверяются на стороне клиента, их можно подключить к реальному бэкенду или сервису бронирования при запуске. Полное Руководство для клиента шаг за шагом описывает брендинг, контент, изображения, видео, навигацию, SEO и развёртывание, поэтому шаблоном удобно пользоваться даже тому, кто не является разработчиком и ведёт сайт изо дня в день.

Создан на Next.js 16 (App Router) с TypeScript, Tailwind CSS v4, Framer Motion, GSAP/ScrollTrigger, плавной прокруткой Lenis, React Hook Form + Zod и иконками Lucide. Что вы получаете: полный исходный код, все маршруты (главная, меню, страница блюда, впечатления, история, журнал + страница статьи, бронирование, контакты), адаптивные макеты, проверенные вплоть до 320 px, изображения через next/image (автоматические AVIF/WebP, отложенная загрузка), запасные варианты для уменьшенной анимации в каждой анимированной последовательности, SEO-метаданные с карточками Open Graph/Twitter и структурированными данными ресторана JSON-LD, автоматически создаваемые файлы sitemap и robots, а также письменное Руководство для клиента по установке, настройке и развёртыванию на Netlify или Vercel.