Zum Inhalt springen
UI Kit
Accent

Yoga Studio Website Sections

Für Yoga- und Pilates-Studios. Die Woche als Kalender, Stile auf einer Karte von ruhig bis dynamisch, ein Tarif-Finder, der die günstigste Wahl kennt, und die erste Stunde Schritt für Schritt mit Buchung.

4 Variants
Kategorie wechseln

Vom Stundenplan bis zur ersten Matte

Wer neu in ein Studio kommt, will drei Dinge wissen, wann, welcher Stil und was es kostet. Diese Sections antworten mit einem Wochenkalender, einer Karte der Stile und einem Tarif-Finder, der rechnet, und enden mit der gebuchten ersten Stunde. Pilates- und Barre-Studios passen genauso.

Der „Wochenplan“ setzt jede Stunde nach Uhrzeit und färbt sie nach Intensität, mit Level-Filter und Buchungsknopf in den Details, auf Handy und Tablet Tag für Tag. „Stile“ ordnet jeden Stil auf einer Karte von ruhig bis dynamisch und von sanft bis kräftig und sagt, für wen er passt und was man mitbringt. Der „Tarif-Finder“ fragt, wie oft jemand übt, und schiebt das Abzeichen zum günstigsten Tarif, mit dem Preis pro Stunde auf jeder Karte. „Erste Stunde“ zeigt den ersten Besuch in Schritten neben einem Einsteigerangebot mit freien Plätzen und kurzem Formular.

Markier Einsteigerstunden im Wochenplan, genau diesen Filter suchen Neue zuerst. Zeig den Preis pro Stunde neben jedem Tarif, dann fällt die Wahl leicht. Stell das Einsteigerangebot auf die Startseite und in den Wochenplan, dort beginnen Probebuchungen.

Yogastudio

WochenplanNeu in 1.2

Die Woche als Kalender, jede Stunde nach ihrer Uhrzeit platziert und nach Intensität getönt, die Blöcke steigen beim Scrollen auf. Nach Niveau filtern, eine Stunde wählen für Details und Buchungsknopf. Am Telefon und Tablet ein Tag nach dem anderen.

StileNeu in 1.2

Jeder Stil auf einer Karte von ruhig bis dynamisch und von sanft bis kräftig, sie gleiten beim Scrollen an ihren Platz. Einen wählen, er atmet auf der Karte und erzählt, für wen er passt, was mitkommt und wie lange er dauert.

Tarif-FinderNeu in 1.2

Ziehen, wie oft du übst, die Monatskosten jedes Tarifs gleiten zum neuen Wert, der günstigste übernimmt das Abzeichen. Jede Karte zeigt den Preis pro Stunde, die Wahl erklärt sich von selbst.

Erste StundeNeu in 1.2

Was beim ersten Besuch passiert, als Schritte an einer Linie, die sich beim Scrollen zeichnet. Daneben das Einführungsangebot mit Einsteiger-Terminen und einem kurzen Formular, fehlende Felder sagen, was sie brauchen.

Details

Was Yogastudio mitbringt, aus Registry und Quellcode gelesen.

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

Props

Die Schnittstelle YogaStudioProps aus components/ui/yoga-studio.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    YogaStudioVariant

    week-planstylespass-finderfirst-class

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • classesoptional
    YogaClass[]

    week-plan, first-class (the intro slots)

  • stylesoptional
    YogaStyle[]

    week-plan, styles

  • passesoptional
    YogaPass[]

    pass-finder

  • stepsoptional
    { title: string; text: string; icon?: IconName }[]

    first-class: what happens, step by step

  • offeroptional
    string

    first-class: the offer, e.g. "First class 9 €"

  • dayStartoptional
    string

    week-plan: first and last hour shown, "HH:MM"

  • dayEndoptional
    string
  • stylesHrefoptional
    string

    week-plan: link to the styles section

  • currencyoptional
    string

Eingebaute Texte

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

Alle 40 Texte anzeigen
levelEnglisch LevelDeutsch Niveau
allLevelsEnglisch All levelsDeutsch Alle Niveaus
beginnerEnglisch BeginnerDeutsch Einsteiger
mixedEnglisch MixedDeutsch Gemischt
advancedEnglisch ExperiencedDeutsch Erfahrene
dayEnglisch DayDeutsch Tag
daysEnglisch Mon,Tue,Wed,Thu,Fri,Sat,SunDeutsch Mo,Di,Mi,Do,Fr,Sa,So
minEnglisch {n} minDeutsch {n} Min.
spotsEnglisch {n} spots leftDeutsch noch {n} Plätze
fullEnglisch Full, join the waiting listDeutsch Voll, auf die Warteliste
bookEnglisch Book this classDeutsch Diese Stunde buchen
bookedEnglisch Booked. Your mat is waiting.Deutsch Gebucht. Deine Matte wartet.
withEnglisch with {name}Deutsch mit {name}
stylesEnglisch StylesDeutsch Stile
calmEnglisch CalmDeutsch Ruhig
dynamicEnglisch DynamicDeutsch Dynamisch
gentleEnglisch GentleDeutsch Sanft
strongEnglisch StrongDeutsch Kräftig
forWhomEnglisch For whomDeutsch Für wen
bringEnglisch Bring alongDeutsch Mitbringen
durationEnglisch DurationDeutsch Dauer
seeClassesEnglisch See {name} in the planDeutsch {name} im Kursplan ansehen
perWeekEnglisch How often do you practise?Deutsch Wie oft übst du?
timesWeekEnglisch {n} × a weekDeutsch {n} × pro Woche
timesWeekOneEnglisch once a weekDeutsch einmal pro Woche
perMonthEnglisch a monthDeutsch im Monat
perClassEnglisch {price} per classDeutsch {price} pro Stunde
bestEnglisch Best for youDeutsch Passt am besten
unlimitedEnglisch UnlimitedDeutsch Unbegrenzt
classesNEnglisch {n} classesDeutsch {n} Stunden
chooseEnglisch Choose {name}Deutsch {name} wählen
stepsEnglisch How your first visit goesDeutsch So läuft dein erster Besuch
slotEnglisch Pick an intro classDeutsch Wähle eine Einführungsstunde
nameEnglisch NameDeutsch Name
emailEnglisch EmailDeutsch E-Mail
requiredEnglisch Please fill in this fieldDeutsch Bitte fülle dieses Feld aus
emailInvalidEnglisch Please enter a valid email addressDeutsch Bitte gib eine gültige E-Mail-Adresse ein
claimEnglisch Book the intro classDeutsch Einführungsstunde buchen
claimedEnglisch See you on the matDeutsch Wir sehen uns auf der Matte
claimedTextEnglisch We sent the details to {email}. Come ten minutes early, we show you around.Deutsch Die Details sind an {email} unterwegs. Komm zehn Minuten früher, wir zeigen dir alles.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Yogastudio reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-describedby, aria-invalid, aria-label, aria-pressed 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.
  • 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. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Yogastudio?

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

Welche Varianten hat Yogastudio?

4 Varianten, Wochenplan, Stile, Tarif-Finder und Erste Stunde. Du wählst sie mit der Prop variant, zum Beispiel variant="styles".

Kann ich die Texte von Yogastudio übersetzen?

Ja. Yogastudio bringt 40 eigene Texte auf Deutsch und Englisch mit, etwa „Niveau“, „Alle Niveaus“ und „Einsteiger“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Yogastudio einbauen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Yogastudio stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert