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

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

Шаблон фокусируется на пяти сигнатурных последовательностях. Dish Reveal превращает одну тарелку в пятиступенчатую кинематографическую историю — Ингредиент → Подготовка → Подача → Блюдо → Первый укус — движимый прокруткой. Fourteen Seats — интерактивная тема рассадки, где 14 маркеров анимируются и наводят на кусок опыта питания при наведении курсора или касании. Darkness Mode — закрепленное, прокручиваемое путешествие через пять сцен вечера: от Прибытия до Финального блюда, который постепенно темнеет экран по мере углубления ночи. Interactive Tasting Menu проводит гостей через целую пятилетнюю последовательность — Amuse, First, Second, Main, Dessert — каждое со своим блюдом, ингредиентами и винной парой. А Dish Anatomy открывает каждое отдельное блюдо в той же последовательной, стиль меню Michelin: Dish → Ingredients → Composition → Wine Pairing.

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

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