Franky Bar Zürich - Gemütliche Lounge, Senegalese Food & Cocktails
Moderne, interaktive Single-Page-Website für die Franky Bar in Zürich mit digitaler Speisekarte und FIFA WM 2026 Live-Planer.
Die Franky Bar im Herzen des Zürcher Kreises 4 verbindet traditionelle westafrikanische Küche (Teranga Vibes) mit einer stilvollen Lounge-Atmosphäre. Für die Bar wurde ein massgeschneiderter, performanter Webauftritt entwickelt. Neben wichtigen Standort- und Kontaktinfos bietet die Seite eine interaktive Speisekarte mit einer Merkliste für Tischreservierungen sowie einen dynamischen Live-Planer für die FIFA Fussball-Weltmeisterschaft 2026. Dieser ermöglicht es Sportfans, alle 104 Spiele zu durchsuchen und gezielt nach Top-Matches oder Spielen der Schweiz und Senegals zu filtern.
Herausforderung & Lösung
Die Herausforderung
- Synthese aus traditioneller senegalesischer Kultur (Gastfreundschaft/Teranga) und dem Designanspruch einer modernen Zürcher Cocktail-Lounge.
- Entwicklung eines extrem schnellen und interaktiven Turnierplaners für alle 104 Spiele der WM 2026 ohne den Einsatz von schweren externen Frameworks.
- Schaffung eines intuitiven Ablaufs, bei dem sich Gäste Speisen vormerken und diese direkt an das Reservierungsformular übergeben können.
Unsere Lösung
- Einsatz eines edlen, dunklen Lounge-Designs (Pitch-Dark) mit goldenen Akzenten im Kontrast zu einem sportlichen, lebendigen Stadion-Grün für den WM-Event-Bereich.
- Ein rein clientseitig optimiertes JavaScript-System zur Darstellung, Live-Filterung und dynamischen Suche der Spieldaten (inklusive Zeitzonen-Hinweis).
- Implementierung eines Floating-Item-Selection-Toasts, der die getroffene Menüauswahl speichert und die Daten nahtlos in das Reservierungsformular einfügt.
Technische Kernfeatures
Digitale Speisekarte mit Vorselektion
Ermöglicht Gästen das Durchstöbern der senegalesischen Spezialitäten und Cocktails mit Option zum Vormerken für die Reservierung.
FIFA WM 2026 Live-Fahrplan
Interaktiver 104-Spiele-Ticker mit Live-Status, Echtzeit-Suche und Schnellfiltern für die Teams der Schweiz und Senegals.
Integriertes Reservierungsformular
Ein benutzerfreundliches Buchungsformular, das ausgewählte Speisen und spezielle Gästewünsche direkt übernimmt.
Premium Lounge-Aussendesign
Volle Responsivität auf allen Endgeräten mit modernen CSS-Glow-Effekten, Glassmorphismus und flüssigen Mikro-Animationen.
Tech Engine
Expertise / Rollen
Der strategische Phasenplan
Exzellente Ergebnisse sind kein Zufall. Jedes WEB4EX Projekt folgt einem strukturierten, Schweizer Prozess.
Discovery & Konzept
Definition der Designsprache (Teranga Lounge) und Konzeption des interaktiven Tickers.
- Briefing
- Sitemap & Layout-Konzept
- Turnierplaner Spezifikation
UI Design & Prototyping
Entwicklung des Dark-Lounge-Designs mit goldenen Akzenten und kontrastierendem Event-Bereich.
- Visual Design
- High-Fidelity Mockups
- Responsive Flow Planning
Entwicklung & Interaktion
Implementierung in reinem HTML/CSS/JS mit performantem Client-seitigem Such- und Filtersystem.
- HTML5 Structure
- CSS Glassmorphism Styles
- JS Match Ticker Engine
- Booking Pre-selection Logic
QA & Deployment
Testen der Suchleistung, Formularübergabe und Veröffentlichung auf Vercel.
- Performance Optimierung
- Form Validation QA
- Vercel Rollout
Projekt realisieren?
Lassen Sie uns gemeinsam den strategischen Prozess für Ihren Erfolg in Zürich oder schweizweit planen.
Jetzt Strategiegespräch buchen