Avao Café: Website eines Cafés

Ausgangslage

Avao Café ist ein Café in der Aachener Innenstadt mit Specialty Coffee, Frühstück, Brunch und Sweet Bowls. Die Website entstand rund um die Eröffnung. Deshalb steht der Termin im Zentrum des Heros: Ein Countdown zählt Tage, Stunden, Minuten und Sekunden herunter, und sobald das Zieldatum erreicht ist, kippt die Seite dauerhaft in den Eröffnungszustand mit der Zeile „AVAO hat eröffnet.“

Die Öffnungszeiten (täglich 9 bis 20 Uhr) sind an einer Stelle im Code hinterlegt. Daraus berechnet die Seite den Live-Status „Jetzt geöffnet“ oder „Geschlossen“ in der Zeitzone des Standorts.

Gestaltungsentscheidungen

• Bildsprache: Ein großes Interieur-Foto im Hero, dazu ein Scroll-Video aus 282 WebP-Einzelbildern, das beim Scrollen Bild für Bild auf einem Canvas abläuft. KI-erzeugte Bilder und Videos sind am Bild als „mit KI & Liebe erstellt“ gekennzeichnet.
• Typografie: Libre Caslon Text in Kursiv für die redaktionellen Überschriften, Instrument Sans für den Fließtext, Poppins nur für die Wortmarke. Alle Schriften liegen als woff2-Dateien auf dem eigenen Server, es gibt keinen Font-CDN-Aufruf.
• Farbe: Ein warmes Papierweiß (#FAF7F2) als Grund, Sand (#C8A97E) als Akzent, dunkles Braun (#3D2B1F) für Kontrast. Das Konfetti bei der Eröffnung nutzt Sand, Papierweiß und einen dunkleren Sandton (#B5956A).
• Bewegung: Parallax im Hero, ein gebogener Textstreifen („IT'S A MATCH(A)“), der beim Scrollen mitläuft, 26 Konfettistücke über 3,6 Sekunden beim Eröffnungswechsel. Bei reduzierter Bewegung schaltet die Seite die Effekte zurück.
• Ton: Ein kleiner Musik-Player mit drei Titeln (Calm Night, Late Night Club, Refined Piano Trumpet) lässt sich ein- und ausschalten. Blockiert der Browser die automatische Wiedergabe, pulsiert der Play-Button als Hinweis.

Aufbau und Seiten

Die Startseite ist ein langer Einzelaufbau: Hero mit Countdown, Statement „Ein Ort zum Ankommen.“, Scroll-Video, Textstreifen, Speisekarte, „Über uns“, Standort mit Karte und Routenlink, Kontaktformular. Dazu kommen Impressum, Datenschutz und eine 404-Seite.

Die Speisekarte arbeitet mit drei Tabs (Food, Cold, Desserts & Coffee), die sich per Tastatur bedienen lassen. Die Gerichte tragen Preis und Allergen-Kennzeichnung. Das Kontaktformular öffnet die Mail-App mit vorbefüllter Nachricht und bietet Anlässe wie Reservierungsanfrage, Frage oder Kooperation zur Auswahl.

Technik

Die Seite läuft mit React 19 und Vite, gestaltet mit Tailwind CSS, animiert mit Framer Motion. Übersetzungen kommen aus i18next: Die Seite gibt es auf Deutsch, Englisch und Arabisch, für Arabisch schaltet sie auf Rechts-nach-links um. Impressum und Datenschutz bleiben deutsch.

Für die Auffindbarkeit stehen im HTML strukturierte Daten (CafeOrCoffeeShop, Organization, FAQPage), Open-Graph-Angaben, ein canonical-Link sowie Sitemap und robots.txt. Das Hero-Bild wird per Preload und getrennten Varianten für Mobil und Desktop geladen, weil es das größte sichtbare Element ist. Angaben ohne bestätigten Wert, etwa Telefonnummer oder Geokoordinaten, fehlen bewusst im Markup.

Was das Projekt zeigt

Ein Café lebt von Atmosphäre, und die Website übersetzt sie in Bild, Schrift und Bewegung, ohne Angaben zu erfinden. Das Projekt zeigt außerdem, wie NOVEX Termine in die Gestaltung einbaut: Der Countdown ist keine Dekoration, sondern der Kern der Seite in den Tagen vor der Eröffnung.