Hotel Website Sections
Für Hotels, Gasthöfe und Boutique-Häuser. Das Haus als gezeichneter Schnitt, Raten mit Stornobedingungen, Pakete Tag für Tag und Online-Check-in mit digitalem Schlüssel.
Kategorie wechseln
Marketing
- Hero17
- Features19
- Logo Clouds8
- Stats12
- Pricing11
- Testimonials15
- Call to Action11
- FAQ7
- Newsletter12
- Banners14
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust12
- Changelog und Roadmap10
- Launch und Waitlist14
- Product Tour6
- Press und Awards15
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Artikel-Bausteine20
- Gallery7
- Team8
- About11
- Content16
- Process7
- Contact8
- Comparison9
- Integrations9
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars10
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Analysen und Berichte10
- Tables6
- Settings5
- AI und Chat24
- Calendar5
- Inbox und Messages5
- Notifications6
- Files11
- Projects6
- Aufgaben und Planung20
- CRM und Rechnungen10
- Team und Zusammenarbeit20
- Karten und Orte4
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten22
- KI-Schreiben und Erstellen22
- KI-Einrichtung18
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
- Bauunternehmen5
- Solarbetrieb5
- Spedition und Logistik5
- Hotel4
- Verein und Hilfsorganisation5
- Apotheke5
- Optiker5
- Physiotherapie5
- Kreativagentur5
- Finanz-App5
- Restaurant4
- Club und Bar4
- Bäckerei4
- Yogastudio4
Elements
- Buttons35
- Forms und Inputs45
- Picker und Auswahlfelder29
- Spezielle Eingabefelder24
- Cards10
- Overlays44
- Navigation21
- Menüleisten und Umschalter14
- Data Display35
- Fortschritt und Zustände18
- Listen, Bäume und Timelines17
- Charts39
- Vergleichs-Charts34
- Statistik-Charts24
- KPI-, Live- und Karten-Charts26
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media27
- Code und JSON8
- Panels und Splitter4
Vom ersten Blick bis zum Zimmerschlüssel
Eine Hotel-Website verkauft einen Aufenthalt, bevor sie ein Zimmer verkauft. Diese Sections führen Gäste vom Haus über die Rate und das Arrangement bis zur Anreise, jede mit eigenem ruhigem Layout fürs Handy, wo die meisten Aufenthalte geplant werden.
„Das Haus“ zeigt das Hotel als gezeichneten Querschnitt, dessen Etagen beim Scrollen nacheinander erscheinen, zeigt man auf eine Etage, kommen ihre Öffnungszeiten und ihre Ausstattung herein. „Raten“ lässt Gäste ein Zimmer und dann eine Rate mit Leistungen und Stornobedingungen wählen, die Summe folgt den Nächten und der Knopf nennt den Preis. „Arrangements“ listet Pakete mit Nächten und Preis pro Person, das gewählte entfaltet sich Tag für Tag auf einem Zeitstrahl. Der „Online-Check-in“ fragt in drei kurzen Schritten Ankunftszeit, Parkplatz, Wünsche und Kontakt ab und endet mit einem digitalen Zimmerschlüssel.
Stell die Stornobedingungen direkt neben jede Rate, dort entscheiden Gäste zwischen flexibel und günstiger. Arrangements wirken mit drei bis fünf Angeboten und einem klaren Preis pro Person am besten. Verschick den Check-in-Link ein paar Tage vor Anreise, dann übergibt die Rezeption nur noch den Schlüssel.
Hotel
Details
Was Hotel mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Industries
- Variants
- 4
- Version
- 1.0.0 · seit 1.2.0
- Datei
- components/ui/hotel.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 51 eigene Texte
- Studio
- Im Code anpassen
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle HotelProps aus components/ui/hotel.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalHotelVarianthouserate-planspackagespre-check-in
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodefloorsoptionalHotelFloor[]house: floors from top to bottom, a spa floor sits below ground
ratesoptionalHotelRate[]rate-plans
roomsoptionalHotelRoomType[]packagesoptionalHotelPackage[]packages
bookingoptionalHotelBookingpre-check-in
arrivalSlotsoptionalstring[]pre-check-in: arrival times as "HH:MM"
requestsoptional{ id: string; label: string; icon?: IconName }[]pre-check-in: wishes to tick
currencyoptionalstring
Eingebaute Texte
Diese Texte schreibt Hotel selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 51 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| floors | Englisch Floors | Deutsch Etagen |
| level | Englisch Level {n} | Deutsch Etage {n} |
| open | Englisch Opening hours | Deutsch Öffnungszeiten |
| room | Englisch Room | Deutsch Zimmer |
| rate | Englisch Rate | Deutsch Rate |
| sizeGuests | Englisch {size} m² · up to {n} guests | Deutsch {size} m² · bis {n} Gäste |
| perNight | Englisch per night | Deutsch pro Nacht |
| nights | Englisch Nights | Deutsch Nächte |
| oneNight | Englisch One night less | Deutsch Eine Nacht weniger |
| moreNight | Englisch One night more | Deutsch Eine Nacht mehr |
| nightsN | Englisch {n} nights | Deutsch {n} Nächte |
| nightsOne | Englisch 1 night | Deutsch 1 Nacht |
| total | Englisch Total stay | Deutsch Gesamter Aufenthalt |
| taxes | Englisch Including VAT and breakfast where listed | Deutsch Inklusive MwSt. und Frühstück, wo angegeben |
| reserve | Englisch Reserve for {price} | Deutsch Für {price} reservieren |
| reserved | Englisch Reserved. Your confirmation is on its way. | Deutsch Reserviert. Deine Bestätigung ist unterwegs. |
| refundable | Englisch Free cancellation | Deutsch Kostenlos stornierbar |
| fixed | Englisch Best price | Deutsch Bester Preis |
| from | Englisch from | Deutsch ab |
| perPerson | Englisch per person | Deutsch pro Person |
| includes | Englisch Included | Deutsch Inklusive |
| itinerary | Englisch Your stay, day by day | Deutsch Dein Aufenthalt, Tag für Tag |
| book | Englisch Request this package | Deutsch Paket anfragen |
| requested | Englisch Request sent. We will reply within a day with dates that fit. | Deutsch Anfrage gesendet. Wir melden uns innerhalb eines Tages mit passenden Terminen. |
| choose | Englisch Package | Deutsch Paket |
| stepArrival | Englisch Arrival | Deutsch Anreise |
| stepWishes | Englisch Wishes | Deutsch Wünsche |
| stepContact | Englisch Contact | Deutsch Kontakt |
| arrivalTime | Englisch When do you arrive? | Deutsch Wann kommst du an? |
| parking | Englisch I need a parking space | Deutsch Ich brauche einen Parkplatz |
| parkingHint | Englisch Garage under the house, one space per room | Deutsch Tiefgarage im Haus, ein Platz pro Zimmer |
| wishes | Englisch Anything we can prepare? | Deutsch Was dürfen wir vorbereiten? |
| note | Englisch A note for the front desk | Deutsch Eine Notiz an die Rezeption |
| notePh | Englisch Late dinner, an anniversary, a feather-free pillow … | Deutsch Spätes Abendessen, ein Jahrestag, ein Kissen ohne Federn … |
| name | Englisch Full name | Deutsch Vor- und Nachname |
| Englisch Email | Deutsch E-Mail | |
| terms | Englisch I confirm the details of my stay | Deutsch Ich bestätige die Angaben zu meinem Aufenthalt |
| next | Englisch Continue | Deutsch Weiter |
| back | Englisch Back | Deutsch Zurück |
| send | Englisch Check in online | Deutsch Online einchecken |
| required | Englisch Please fill in this field | Deutsch Bitte fülle dieses Feld aus |
| emailInvalid | Englisch Please enter a valid email address | Deutsch Bitte gib eine gültige E-Mail-Adresse ein |
| termsMissing | Englisch Please confirm the details | Deutsch Bitte bestätige die Angaben |
| doneTitle | Englisch You are checked in | Deutsch Du bist eingecheckt |
| doneText | Englisch Your room key is ready on arrival, skip the queue and head straight up. | Deutsch Dein Zimmerschlüssel liegt bei Ankunft bereit, an der Schlange vorbei direkt aufs Zimmer. |
| booking | Englisch Booking | Deutsch Buchung |
| number | Englisch Booking number | Deutsch Buchungsnummer |
| guest | Englisch Guest | Deutsch Gast |
| stay | Englisch Stay | Deutsch Aufenthalt |
| key | Englisch Room key | Deutsch Zimmerschlüssel |
| step | Englisch Step {n} of {total} | Deutsch Schritt {n} von {total} |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Hotel reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
- Setzt aria-checked, aria-current, aria-describedby, aria-invalid, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen 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. 4 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Hotel?
Mit aiw add @ai-website/hotel. Der Befehl legt die Datei components/ui/hotel.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 Hotel?
4 Varianten, Das Haus, Raten, Arrangements und Online-Check-in. Du wählst sie mit der Prop variant, zum Beispiel variant="rate-plans".
Kann ich die Texte von Hotel übersetzen?
Ja. Hotel bringt 51 eigene Texte auf Deutsch und Englisch mit, etwa „Etagen“, „Öffnungszeiten“ und „Zimmer“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Hotel einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Hotel mit aiw_components und installieren sie mit aiw_add @ai-website/hotel. Nenn im Prompt die Variante, etwa variant="house", dann schreibt der Assistent deine Inhalte direkt in die Props.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Industries, demselben Bereich des Kits.
- Spedition und LogistikSendungsverfolgung, Standortnetz, Flotte mit Maßen, Frachtanfrage und Laufzeiten.
- Verein und HilfsorganisationWirkung in Zahlen, Jahresbericht, Mittelverwendung, Projekte auf der Karte und Ehrenamt mit Anmeldung.
- SolarbetriebErsparnis-Schätzung, Ablauf bis zur Inbetriebnahme, Förderung und Finanzierung, Anlagenpakete und Live-Ertrag.
- ApothekeÖffnungszeiten mit Live-Status, Notdienst nach Datum, Vorbestellung zur Abholung, Beratungstermine und Reiseapotheke.
- Alles aus IndustriesFertige Sections für Praxen, Restaurants, Handwerk, Hotels, Schulen, Vereine und Creator.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Hotel stehen.
Quellcode lädt