Die meisten Restaurant-Websites sind dieselbe scrollbare Broschüre: ein Titelfoto, eine Speisekarte als PDF, ein Kontaktformular. NOIRÉ ist anders. Es ist wie ein Dinner im Dunkeln aufgebaut: Jedes Scrollen entfaltet eine neue Szene, jedes Gericht wird Gang für Gang enthüllt, und wenn ein Besucher den Reservierungsbutton erreicht, fühlt er sich schon so, als säße er am Tisch.

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

Die Vorlage konzentriert sich auf fünf Signatur-Sequenzen. „Gericht enthüllen“ verwandelt einen einzelnen Teller in eine fünfstufige filmische Geschichte: Zutat → Zubereitung → Anrichten → Das Gericht → Der erste Bissen, gesteuert durch Scrollen. „Vierzehn Plätze“ ist ein interaktives Sitzplatz-Motiv, bei dem 14 Markierungen eingeblendet werden und beim Überfahren oder Antippen ein Stück des Dinner-Erlebnisses enthüllen. Der „Dunkelmodus“ ist eine fixierte, scrollgesteuerte Reise durch fünf Szenen eines Abends, von der Ankunft bis zum letzten Gang, bei der sich der Bildschirm mit fortschreitender Nacht zunehmend verdunkelt. Das „Interaktive Degustationsmenü“ führt die Gäste durch eine vollständige Folge aus fünf Gängen: Amuse-Bouche, Vorspeise, Zwischengang, Hauptgang, Dessert, jeweils mit Gericht, Zutaten und Weinbegleitung. Und die „Gericht-Anatomie“ öffnet jedes einzelne Gericht im selben sequenziellen Stil einer Michelin-Speisekarte: Gericht → Zutaten → Komposition → Weinbegleitung.

Jede dieser Sequenzen wird von schlichten, typisierten Datendateien unter src/data/ gesteuert: Es gibt kein CMS, keine Datenbank und kein Backend, das angebunden werden muss. Das Restaurant umbenennen, die Speisekarte neu schreiben, ein neues Gericht hinzufügen, Fotos und Videos austauschen oder Farbpalette und Schriften ändern: Dafür bearbeiten Sie lediglich ein TypeScript-Objekt, ohne den Komponentencode anzufassen. Die Kontakt- und Reservierungsformulare sind vollständig gebaut und clientseitig validiert, bereit, beim Start mit einem echten Backend oder Buchungsanbieter verbunden zu werden. Ein vollständiger Kundenleitfaden führt Schritt für Schritt durch Branding, Inhalte, Bilder, Video, Navigation, SEO und Deployment, sodass die Vorlage auch von Nicht-Entwicklern im Alltag bequem gepflegt werden kann.

Gebaut mit Next.js 16 (App Router) und TypeScript, Tailwind CSS v4, Framer Motion, GSAP/ScrollTrigger, Lenis Smooth Scroll, React Hook Form + Zod und Lucide-Icons. Das erhalten Sie: den vollständigen Quellcode, alle Routen (Startseite, Speisekarte, Gericht-Detail, Erlebnis, Geschichte, Journal + Artikel-Detail, Reservierungen, Kontakt), responsive Layouts, getestet bis 320 px, Bilder über next/image (automatisches AVIF/WebP, Lazy Loading), Fallbacks für reduzierte Bewegung in jeder animierten Sequenz, SEO-Metadaten mit Open-Graph-/Twitter-Cards und JSON-LD-Restaurant-Strukturdaten, eine automatisch erzeugte Sitemap- und robots-Datei sowie einen schriftlichen Kundenleitfaden zu Installation, Anpassung und Deployment auf Netlify oder Vercel.