Pistachio Grand Café – Website mit Shop und Speisekarte (in Arbeit)
Für das Pistachio Grand Café in der Bremer Überseestadt entsteht eine komplette Website mit Speisekarte, Shop, Reservierungsseite, Events, Galerie und Blog. 16 Routen sind gebaut und geprüft. Die Seite ist noch nicht veröffentlicht: Formulare und Zahlung sind nicht angebunden, die Inhalte werden mit dem Betrieb abgestimmt.
- Zeitraum
- August – September 2026, laufend
- Status
- In Arbeit – noch nicht veröffentlicht, Inhalte in Abstimmung
- Art
- Website mit Shop, in Arbeit
- Branche
- Café und Patisserie
- Ort
- Bremen, Überseestadt
- Umfang
- 16 Routen
- Stack
- Next.js 16, React 19, TypeScript, GSAP
In Arbeit: Diese Website ist noch nicht veröffentlicht.
Ausgangslage
Das Pistachio Grand Café ist eine Patisserie in der Bremer Überseestadt mit Baklava, Torten und türkischem Gebäck. Ein Betrieb, der stark über Instagram und Laufkundschaft lebt. Eine Website, die Speisekarte, Vorbestellung, Reservierung und Veranstaltungen an einem Ort bündelt, gab es in dieser Form nicht.
Ich habe das Projekt von der Designidee bis zur lauffähigen Anwendung aufgebaut. Der Ausgangspunkt war ein Design-Entwurf, den ich in eine echte Next.js-Anwendung mit sauberer Datenhaltung übersetzt habe. Alle Inhalte, von der Speisekarte über Öffnungszeiten bis zu den Blogartikeln, liegen zentral in einer Datei und lassen sich ohne Eingriff in die Komponenten pflegen.
Wichtig: Die Website ist noch nicht veröffentlicht. Formulare senden derzeit nichts, die Zahlung im Shop ist nicht angebunden, und Texte, Produkte und Bilder werden noch mit dem Betrieb abgestimmt. Diese Seite zeigt den Stand der Arbeit, kein fertiges Ergebnis.
Ziele
6 Ziele, an denen sich das Projekt messen lässt
- Eine Website, die den Charakter des Cafés transportiert: warm, hochwertig, ohne Vorlagen-Look.
- Speisekarte und Shop so aufbauen, dass Produkte ohne Entwickler gepflegt werden können.
- Vorbestellung, Reservierung und Event-Anfragen als klare Wege zur Kontaktaufnahme.
- Mobil zuerst: Die meisten Gäste kommen vom Handy, oft direkt von Instagram.
- Suchmaschinen-Grundlage von Anfang an: strukturierte Daten, SEO-Landingpages, Blog.
- Datenschutz ohne Kompromisse: keine externen Schriften, Karten nur nach Zustimmung.
Lösung
Was gebaut wurde – Baustein für Baustein
Video-Hero und Vitrine
Die Startseite öffnet mit einem vollflächigen Café-Video. Darunter läuft eine Vitrine aus 3D-Tilt-Karten mit freigestellten Produktbildern, die auf Mausbewegung reagieren.
Speisekarte mit Bildvorschau
Die Speisekarte zeigt Beschreibungen immer sichtbar. Bei Hover oder Fokus erscheint das Produktbild im seitlichen Panel, auf dem Handy als kleines Vorschaubild. 29 Speisekarten-Freisteller wurden dafür erstellt.
Shop mit Mengen-Rechner
Der Bestellbereich ist in Kategorien gegliedert, mit Sprungleiste und Warenkorb. Ein Mengen-Rechner schlägt je nach Anlass und Gästezahl passende Mengen vor. Die Kasse ist vorbereitet, die Zahlung noch nicht angebunden.
Reservieren mit Live-Öffnungsstatus
Die Reservierungsseite zeigt anhand der hinterlegten Öffnungszeiten, ob das Café gerade geöffnet ist, und führt zur telefonischen Reservierung. Größere Feiern laufen über die Events-Seite.
Events, Franchise, Karriere
Eigene Seiten für Veranstaltungsanfragen mit gezeichneter Zeitleiste, für Franchise-Interessenten und für Bewerbungen. Ein Mini-Formular auf der Startseite füllt die Event-Anfrage vor.
Galerie, Blog und SEO-Seiten
Galerie mit Lightbox, Blog mit Artikelseiten und zusätzliche Landingpages für Suchbegriffe, die sich über eine Datenliste ergänzen lassen. Jede neue Seite ist ohne Programmierung anlegbar.
Baklava-Anatomie
Eine scrollgesteuerte Sektion fächert die Schichten einer Baklava auf. Auf Touch-Geräten läuft sie flach ohne 3D-Ebenen, damit Schatten und Leistung stabil bleiben.
Mobile Schnellleiste
Auf dem Handy liegt unten eine feste Leiste mit Anrufen, Route und Reservieren. Sie respektiert die Sicherheitszone moderner Geräte und verschwindet im Querformat.
Design
Die Farbwelt ist bewusst dunkel und warm: Espresso als Grund, Creme für Text, Gold für Akzente und ein Pistaziengrün als Signalfarbe. Cormorant Garamond für Überschriften und Jost für Fließtext geben der Seite eine ruhige, hochwertige Anmutung, ohne in Schreibschrift oder Kitsch zu kippen.
Die Bildsprache setzt auf freigestellte Produkte statt auf Fotos in Kästen. Produkt-Freisteller treiben leicht im Seitenkopf, Szenenbilder laufen als Hintergrund weich aus. Ein Iznik-Sternmuster und Tulpen-Ornamente als Trenner greifen die türkische Herkunft auf, ohne die Seite zu überladen. Auf kleinen Bildschirmen fallen dekorative Elemente weg, damit der Inhalt Platz hat.
Bewegung kommt von GSAP: Seitenköpfe blenden ein, Sektionen erscheinen beim Scrollen, Buttons haben einen Gold-Schimmer. Alles läuft nur, wenn das Gerät keine reduzierte Bewegung wünscht.
Technik
9 Bausteine – und warum genau diese
Next.js 16 (App Router)
Serverseitiges Rendern, saubere Routen für 16 Seiten, Sitemap und Robots direkt aus dem Code. Deploy-Ziel ist Vercel.
React 19 + TypeScript
Typisierte Inhalte: Ein Tippfehler in der Speisekarte fällt beim Build auf, nicht beim Gast.
Zentrale Datendatei
Adresse, Öffnungszeiten, Produkte, Speisekarte, Blog und SEO-Seiten liegen an einem Ort. Pflege ohne Komponenten-Kenntnis.
GSAP
Scroll-Animationen, Seitenkopf-Einblendungen und die Baklava-Anatomie mit stabiler Zeitsteuerung.
next/font mit Cormorant Garamond + Jost
Schriften werden self-hosted ausgeliefert. Kein Aufruf von Google Fonts, kein Layout-Springen.
Eigenes CSS-Token-System
Kein Tailwind. Farben, Abstände und Komponenten-Klassen in einer globalen Stylesheet-Datei, dadurch schlanker Output.
JSON-LD
LocalBusiness, Menu, FAQ und BlogPosting als strukturierte Daten, damit Google Öffnungszeiten und Speisekarte versteht.
Lokale KI-Bildpipeline
14 Produkt- und 29 Speisekarten-Freisteller wurden lokal erzeugt, freigestellt und als WebP mit Transparenz eingebunden. Keine Stockfotos, keine Cloud-Dienste.
Warenkorb und Consent als Stores
Zustand über useSyncExternalStore statt verschachtelter Effekte. Warenkorb bleibt beim Seitenwechsel erhalten.
Antippen zeigt, warum ich mich dafür entschieden habe.
SEO
5
- Jede Route hat eigenen Titel, Beschreibung und Open-Graph-Bild.
- JSON-LD für LocalBusiness, Menu, FAQ und BlogPosting.
- Zusätzliche SEO-Landingpages lassen sich über eine Datenliste anlegen, erreichbar unter eigener Adresse.
- Sitemap und Robots werden aus dem Code erzeugt. Solange die Seite in der Vorschau-Phase ist, steht sie auf noindex.
- Blog mit Artikelseiten als Grundlage für regelmäßigen Content.
Barrierefreiheit
6
- Speisekarte per Tastatur bedienbar: Fokus zeigt das Produktbild genauso wie Hover.
- Eingabefelder mit 16 px Schriftgröße, damit iOS nicht hineinzoomt.
- Touch-Ziele in der Schnellleiste und im Shop mindestens 44 px hoch.
- Alle Animationen respektieren prefers-reduced-motion.
- Semantische Struktur: eine H1 je Seite, Landmarks, Alt-Texte für Produktbilder.
- Farbwelt so angelegt, dass Creme auf Espresso die Kontrastanforderung von 4,5:1 erfüllt.
Datenschutz
5
- Google Maps nur nach Zustimmung über ein Zwei-Klick-Consent-Gate.
- Instagram-Beiträge als eigene Karten mit lokal gespeicherten Bildern, kein Einbetten von Instagram-Skripten.
- Schriften und Video liegen auf dem eigenen Server.
- Kein Tracking ohne Einwilligung; mein eigenes Analytics-System ist vorbereitet.
- Impressum und Datenschutzerklärung sind angelegt; Details werden vor Veröffentlichung mit dem Betrieb ergänzt.
Performance
- Produktbilder
- WebP mit Alpha, maximal 1200 pxFreisteller statt Fotos in Kästen, dadurch kleine Dateien
- Hero-Video
- WebM und MP4 in 1080p und 720pPoster-Bild für den ersten Frame, Video lädt nach
- Schriften
- self-hosted über next/fontKein externer Request, kein Layout-Sprung
Ablauf
6 Schritte von der Idee bis online
Design-Entwurf
Farbwelt, Typografie und Seitenaufbau als Entwurf festgelegt. Richtung: warm, hochwertig, keine Schreibschrift.
Aufbau der Anwendung
Next.js-Projekt mit zentraler Datendatei, Layout, Header, Footer und allen 16 Routen.
Bilder
Produkt- und Speisekarten-Freisteller lokal erzeugt, Hero-Video geschnitten und in zwei Auflösungen exportiert.
Feinschliff
Mehrere Runden mit Rückmeldungen: Vitrine, Speisekarte, Shop-Gliederung, Mengen-Rechner, mobile Reduktion.
Prüfung
Alle 16 Routen bei 390 px und 1400 px auf Überlauf und Konsolenfehler geprüft.
Abstimmung
Aktuell: Inhalte, Produkte und Bilder mit dem Betrieb abstimmen, dann Formulare und Zahlung anbinden.
Ergebnis
Was am Ende belegbar dasteht
- 16 Routen gebaut: Start, Speisekarte, Bestellen, Kasse, Reservieren, Events, Franchise, Über uns, Galerie, Blog mit Artikeln, Kontakt, Karriere, SEO-Seiten, Impressum, Datenschutz, 404.
- Alle 16 Routen bei 390 px und 1400 px ohne Overflow und ohne Konsolenfehler geprüft.
- 14 Produkt- und 29 Speisekarten-Freisteller lokal erzeugt und eingebunden.
- Noch offen: Formulare und Zahlung anbinden, Inhalte freigeben, Veröffentlichung.
Learnings
Was ich mitnehme
Inhalte in einer Datei zu halten zahlt sich früh aus: Jede Änderung an der Speisekarte war ein Eintrag, kein Umbau.
3D-Effekte mit Schatten verhalten sich auf Handys anders als im Desktop-Browser. Auf Touch-Geräten flach rendern spart Ärger.
Weniger ist mobil mehr: Dekoration, die auf dem Desktop trägt, darf auf 390 px komplett verschwinden.
Ein Projekt ist erst fertig, wenn der Betrieb die Inhalte freigegeben hat. Technik vorher, Veröffentlichung danach.
Fragen zum Projekt
Häufige Fragen
Ist die Website des Pistachio Grand Café schon online?
Nein. Die Seite ist technisch weit, aber noch nicht veröffentlicht. Formulare und Zahlung sind nicht angebunden, die Inhalte werden mit dem Betrieb abgestimmt. Sobald sie live ist, ergänze ich hier den Link.
Kann ich so eine Website für mein Café bekommen?
Ja. Speisekarte, Vorbestellung, Reservierung und Events sind Bausteine, die ich für jeden Betrieb anpasse. Mehr dazu auf der Seite Cafés und Bäckereien oder direkt über Kontakt.
Warum Next.js und nicht ein Baukasten?
Weil Speisekarte, Shop und Blog aus einer Datenquelle kommen sollen und die Seite schnell laden muss. Ein Baukasten bringt Fremd-Skripte und wenig Kontrolle über Datenschutz und Ladezeit mit.
Woher kommen die Produktbilder?
Die Freisteller habe ich lokal mit einer KI-Bildpipeline erzeugt und freigestellt. Eigene Fotos des Betriebs können sie jederzeit ersetzen, dafür ist nur ein Eintrag in der Datendatei nötig.
Passende Leistungen
Das steckt dahinter
Ähnliches Projekt?
Sie brauchen so etwas für Ihren Betrieb?
Schreiben Sie mir, was Sie vorhaben. Ich sage Ihnen ehrlich, was sinnvoll ist, und nenne einen Festpreis.