Feito ó Bife – Website
Website eines portugiesischen Steakhauses mit interaktiver digitaler Speisekarte mit über 70 Gerichten in 9 Kategorien (Vorspeisen, Steaks, Gegrilltes, Fisch und Meeresfrüchte, Vegetarisches, Beilagen, Desserts, Weine, Getränke), Bildergalerie im Masonry-Stil mit Lightbox, Gästebewertungen und interaktiver Standortkarte mit Öffnungszeiten.
Umgesetzt mit React 19 und TypeScript in einer individuellen Farbpalette aus warmem Braun und Limettengrün, mit flüssigen Framer-Motion-Scroll-Animationen, eleganter Typografie aus Playfair Display und Nunito sowie responsivem Mobile-First-Design mit shadcn/ui-Komponenten.
Überblick
Branche
Gastronomie
Leistungsumfang
Vollständige Restaurant-Landingpage mit digitalem Menüsystem, Bildergalerie, Bereich für Gästestimmen und interaktiver Standortsuche mit eingebundener Karte und Öffnungszeiten
Zeitrahmen
4 Wochen von der Einrichtung bis zum Produktivstart
Herausforderung
Der Kunde, ein portugiesisches Steakhaus in Mafra, brauchte eine moderne digitale Präsenz, um seine umfangreiche Karte traditioneller portugiesischer Küche zu zeigen, die authentische Atmosphäre hervorzuheben und Gästen Standort- und Kontaktdaten leicht zugänglich zu machen. Eine Online-Präsenz fehlte bislang völlig; gesucht war eine Lösung, die die umfassende Karte (über 70 Gerichte, große Weinauswahl und Tagesempfehlungen) übersichtlich und appetitlich präsentiert und zugleich den warmen, rustikalen Charakter des Hauses einfängt.
Lösung
Wir haben eine einseitige React-Anwendung mit flüssiger Scroll-Navigation zwischen fünf Kernbereichen entwickelt (Hero, Speisekarte, Galerie, Bewertungen, Standort). Das interaktive Menüsystem unterstützt mehrere Kategorien, Unterkategorien (für Weine), Preisvarianten und besondere Kennzeichnungen für Hausspezialitäten. Eine Masonry-Galerie zeigt Ambiente und Signature-Gerichte mit Zoom-Effekt beim Überfahren und Lightbox-Vorschau. Für die interaktive Karte haben wir React Leaflet eingebunden — mit individuellem Marker im Markendesign, mehreren Kartenebenen (Standard/Satellit) und einer Informationskarte mit Öffnungszeiten und Kontaktdaten. Framer Motion sorgt durchgängig für elegante Einblend- und Scroll-Animationen.
Wichtigste Funktionen
Ergebnisse
Technologie-Stack
Bereit, Ihr Projekt zu starten?
Sprechen wir darüber, wie wir eine beeindruckende Website schaffen, die genau zu Ihren geschäftlichen Anforderungen passt.