Die meisten Restaurant-Websites sind dasselbe durchscrollbare Faltblatt — ein Helfbild, eine PDF-Speisekarte, ein Kontaktformular. NOIRÉ ist das nicht. Es ist wie ein Esserlebnis im Dunkeln aufgebaut: jeder Scroll-Schritt entfaltet eine neue Szene, jedes Gericht wird Kurs für Kurs enthüllt, und wenn ein Besucher den Reservierungsbutton erreicht, hat er sich schon gesetzt gefühlt.

Live-Demo: https://noire-
dining.netlify.app/

Die Vorlage fokussiert sich auf fünf Signatur-Sequenzen. Dish Reveal verwandelt einen einzelnen Teller in eine fünfschrittige filmische Geschichte — Zutat → Zubereitung → Anrichten → Das Gericht → Der erste Biss — gesteuert durch Scrollen. Fourteen Seats ist ein interaktives Sitzmuster, bei dem 14 Marker beim Hover oder Tippen animieren und ein Stück des Esserlebnisses enthüllen. Darkness Mode ist eine angeheftete, scrollgesteuerte Reise durch fünf Abendszenen, von der Ankunft bis zum letzten Gang, die den Bildschirm im Verlauf der Nacht dunkler macht. The Interactive Tasting Menu führt Gäste durch eine vollständige Fünf-Gänge-Sequenz — Amuse, First, Second, Main, Dessert — jeweils mit seinem Gericht, Zutaten und Wein-Pairing. Und Dish Anatomy öffnet jedes einzelne Gericht in derselben sequentiellen, Michelin-Menü-Stil: Gericht → Zutaten → Zusammenstellung → Wein-Pairing.

All dies wird durch einfache, getippte Datendateien unter src/data gesteuert — es gibt kein CMS, keine Datenbank und kein Backend zum Anschluss. Umbenennung des Restaurants, Neuschreiben der Speisekarte, Hinzufügen eines neuen Gerichts, Austauschen von Fotos und Videos oder Ändern der Farbpalette und Schriftarten ist eine Frage der Bearbeitung eines TypeScript-Objekts, nicht des Eingreifens in Component-Code. Die Kontakt- und Reservierungsformulare sind vollständig clientseitig aufgebaut und validiert, bereit, mit einem echten Backend oder Buchungsanbieter verbunden zu werden, wenn Sie starten. Ein vollständiger Customer Guide erläutert Branding, Inhalte, Bilder, Video, Navigation, SEO und Bereitstellung Schritt für Schritt, sodass dies auch von nicht-technischen Anwendern, die die Website tagtäglich pflegen, komfortabel nutzbar ist.

Auf Basis von Next.js 16 (App Router) mit TypeScript, Tailwind CSS v4, Framer Motion, GSAP/ScrollTrigger, Lenis Smooth Scroll, React Hook Form + Zod und Lucide-Icons. Was Sie erhalten: der komplette Quellcode, jede Route (Home, Menü, Gerichtdetail, Erlebnis, Geschichte, Journal + Artikel Detail, Reservierungen, Kontakt), responsive Layouts, getestet bis 320px Breite, Bilder über next/image bereitgestellt (automatisch AVIF/WebP, lazy loading), Reduced-Motion-Fallbacks für jede animierte Sequenz, SEO-Metadaten mit Open Graph/Twitter Cards und JSON-LD strukturierte Daten für Restaurants, eine automatisch generierte Sitemap und robots-Datei, sowie ein schriftlicher Customer Guide zu Installation, Anpassung und Bereitstellung auf Netlify oder Vercel.