Restaurant Website Sections

Für Restaurants, Bistros und Weinbars, neben der Speisekarte. Tischreservierung am gezeichneten Raumplan, besondere Abende mit freien Plätzen, der Raum je Tageszeit und Gesellschaften.

4 Variants

Kategorie wechseln

Alles rund um den Tisch

Neben der Speisekarte beantwortet eine Restaurant-Website drei Fragen, gibt es einen Tisch, was ist diesen Monat besonders und wie fühlt sich der Abend an. Diese Sections antworten mit gezeichneten Räumen, freien Plätzen und Preisen, die der Gruppengröße folgen. Für die Karte selbst hat das Kit eine eigene Kategorie für Speisekarten.

„Tisch reservieren“ fragt Tag, Personen und Uhrzeit ab, Zeiten mit wenigen freien Tischen tragen einen bernsteinfarbenen Punkt, den Bereich wählt man am gezeichneten Raumplan. „Besondere Abende“ zeigen Weindinner, Chef’s Table und Supper Clubs als Datumskarten mit Platzbalken, die Menüfolge gleitet Gang für Gang herein. „Atmosphäre“ zeichnet den Gastraum vom Mittag über den Abend bis zur späten Bar, mit Lautstärke, Musik und Kleidung daneben. „Gesellschaften“ hält die Räume offen, die zur Gruppe passen, wählt den richtigen und schätzt das Menü für alle.

Setz die Reservierung weit nach oben, die meisten Besucher kommen zum Buchen. Besondere Abende verkaufen sich am besten mit den freien Plätzen im Blick. Gesellschaften verdienen eine eigene Seite für Firmen und Familien, verlinkt aus Fußzeile und Reservierung.

Tisch reservierenNeu in 1.2

Tag, Personen und Uhrzeit wählen, knappe Zeiten tragen einen bernsteinfarbenen Punkt. Den Bereich am gezeichneten Raumplan wählen, dessen Tische beim Scrollen erscheinen, freie in Grün, der gewählte im Akzent.

Installv1.0.0

aiw add @ai-website/restaurant

Bringt mit utils, kit, button, icon, section, motion

Usage

<Restaurant variant="reservation" days={[{ id, weekday, day, closed }]} slots={[{ time: "18:30", free: 4 }]} areas={[{ id, name, text, x, y, w, h, tables, free, outdoor }]} />

Source

Besondere AbendeNeu in 1.2

Weinabende, Chef’s Table und Supper Clubs als Datumskarten mit Platzbalken, wenige Plätze werden bernsteinfarben. Einen wählen, der Ablauf gleitet Gang für Gang herein, der Preis auf dem Knopf gleitet mit den Plätzen.

Installv1.0.0

aiw add @ai-website/restaurant

Bringt mit utils, kit, button, icon, section, motion

Usage

<Restaurant variant="evenings" evenings={[{ id, weekday, day, month, title, kind, text, time: "19:00", price, seats, seatsLeft, courses, host }]} />

Source

AtmosphäreNeu in 1.2

Der Gastraum gezeichnet je Tageszeit. Von Mittag zu Abend zur späten Bar wechseln, die Fenster dunkeln, die Lampen glühen, Kerzen flackern, der Raum füllt sich. Lautstärke, Musik und Kleidung wechseln mit.

Installv1.0.0

aiw add @ai-website/restaurant

Bringt mit utils, kit, button, icon, section, motion

Usage

<Restaurant variant="atmosphere" moods={[{ id, name, from: "12:00", to: "14:30", text, dusk: 0.1, volume: 2, music, dress, goodFor }]} />

Source

GesellschaftenNeu in 1.2

Gruppengröße ziehen, passende Räume bleiben offen, der richtige wird gleich gewählt. Ein Menü wählen, die Schätzung für die ganze Gruppe gleitet mit, die Anfrage geht mit einem Knopf raus.

Installv1.0.0

aiw add @ai-website/restaurant

Bringt mit utils, kit, button, icon, section, motion

Usage

<Restaurant variant="private-dining" minGuests={8} maxGuests={60} rooms={[{ id, name, min, max, text, media }]} menus={[{ id, name, price, courses }]} />

Source

Details

Was Restaurant mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 4
Version: 1.0.0 · seit 1.2.0
Datei: components/ui/restaurant.tsx
Bringt mit: utilskitbutton iconsectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 45 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle RestaurantProps aus components/ui/restaurant.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
RestaurantVariant
reservationeveningsatmosphereprivate-dining
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
daysoptional
RestaurantDay[]
reservation
slotsoptional
{ time: string; free: number }[]
reservation: times "HH:MM", with free tables
areasoptional
RestaurantArea[]
maxPartyoptional
number
reservation: largest party for a normal table
eveningsoptional
RestaurantEvening[]
evenings
moodsoptional
RestaurantMood[]
atmosphere
roomsoptional
RestaurantRoom[]
private-dining
menusoptional
RestaurantMenuOption[]
minGuestsoptional
number
maxGuestsoptional
number
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Restaurant selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 45 Texte anzeigen

Schlüssel	Englisch	Deutsch
day	Englisch Day	Deutsch Tag
closed	Englisch Closed	Deutsch Ruhetag
guests	Englisch Guests	Deutsch Personen
less	Englisch One guest less	Deutsch Eine Person weniger
more	Englisch One guest more	Deutsch Eine Person mehr
bigGroup	Englisch From {n} guests our private room is the better fit.	Deutsch Ab {n} Personen passt unser Separee besser.
time	Englisch Time	Deutsch Uhrzeit
area	Englisch Where would you like to sit?	Deutsch Wo möchtest du sitzen?
plan	Englisch Floor plan	Deutsch Raumplan
tablesFree	Englisch {n} tables free	Deutsch {n} Tische frei
tableFree	Englisch 1 table free	Deutsch 1 Tisch frei
full	Englisch Fully booked	Deutsch Ausgebucht
reserve	Englisch Reserve a table for {n}	Deutsch Tisch für {n} reservieren
reserved	Englisch Your table is reserved. A confirmation is on its way.	Deutsch Dein Tisch ist reserviert. Die Bestätigung ist unterwegs.
summary	Englisch {guests} guests · {day} · {time}	Deutsch {guests} Personen · {day} · {time}
seatsLeft	Englisch {n} of {total} seats left	Deutsch Noch {n} von {total} Plätzen
soldOut	Englisch Sold out, join the waiting list	Deutsch Ausverkauft, auf die Warteliste
perPerson	Englisch per person	Deutsch pro Person
program	Englisch The evening	Deutsch Der Abend
hostedBy	Englisch With {name}	Deutsch Mit {name}
book	Englisch Book {n} seats for {price}	Deutsch {n} Plätze für {price} buchen
bookOne	Englisch Book 1 seat for {price}	Deutsch 1 Platz für {price} buchen
booked	Englisch Booked. We look forward to seeing you.	Deutsch Gebucht. Wir freuen uns auf dich.
waitlist	Englisch Join the waiting list	Deutsch Auf die Warteliste
waitlisted	Englisch You are on the waiting list. We write to you as soon as a seat opens up.	Deutsch Du stehst auf der Warteliste. Wir schreiben dir, sobald ein Platz frei wird.
evenings	Englisch Evenings	Deutsch Abende
mood	Englisch Time of day	Deutsch Tageszeit
volume	Englisch Volume	Deutsch Lautstärke
quiet	Englisch Quiet	Deutsch Ruhig
lively	Englisch Lively	Deutsch Lebhaft
music	Englisch Music	Deutsch Musik
dress	Englisch Dress	Deutsch Kleidung
goodFor	Englisch Good for	Deutsch Passt für
hours	Englisch Served	Deutsch Geöffnet
groupSize	Englisch Group size	Deutsch Gruppengröße
persons	Englisch {n} guests	Deutsch {n} Personen
room	Englisch Room	Deutsch Raum
fits	Englisch Seats {min} to {max}	Deutsch {min} bis {max} Plätze
tooSmall	Englisch From {n} guests	Deutsch Ab {n} Personen
tooBig	Englisch Up to {n} guests	Deutsch Bis {n} Personen
menu	Englisch Menu	Deutsch Menü
estimate	Englisch Estimate for your group	Deutsch Schätzung für eure Gruppe
estimateNote	Englisch Drinks are charged as consumed. We send a firm offer within a day.	Deutsch Getränke nach Verbrauch. Ein festes Angebot kommt innerhalb eines Tages.
request	Englisch Request an offer	Deutsch Angebot anfragen
requested	Englisch Thank you. We will send your offer within a day.	Deutsch Danke. Dein Angebot kommt innerhalb eines Tages.

Aus dem Quellcode der Component abgeleitet.

Restaurant reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-label, aria-live und aria-valuetext, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen img, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Restaurant?

Mit aiw add @ai-website/restaurant. Der Befehl legt die Datei components/ui/restaurant.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Restaurant?

4 Varianten, Tisch reservieren, Besondere Abende, Atmosphäre und Gesellschaften. Du wählst sie mit der Prop variant, zum Beispiel variant="evenings".

Kann ich die Texte von Restaurant übersetzen?

Ja. Restaurant bringt 45 eigene Texte auf Deutsch und Englisch mit, etwa „Tag“, „Ruhetag“ und „Personen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Restaurant einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Restaurant mit aiw_components und installieren sie mit aiw_add @ai-website/restaurant. Nenn im Prompt die Variante, etwa variant="reservation", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Restaurant stehen.

Alles rund um den Tisch

Restaurant

Tisch reservierenNeu in 1.2

Besondere AbendeNeu in 1.2

AtmosphäreNeu in 1.2

GesellschaftenNeu in 1.2

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit