Classes und Schedules

Wochenplan mit Filtern, Kurskarten mit freien Plätzen, Trainer, Mitgliedschaften, Probetraining und der Tag als Zeitleiste.

6 Variants

Kategorie wechseln

Wochenplan

Die Woche nach Tagen mit Kategoriefiltern, auf dem Telefon Tag für Tag.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="schedule" classes={[{ id, name, category, day, start, duration, trainer, spots, taken }]} />

Source

Kurskarten

Uhrzeit, Trainer, Intensität und freie Plätze, buchen oder Warteliste mit einem Tipp.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="class-cards" classes={[…]} day={3} onBook={(b) => …} />

Source

Trainer

Porträts mit Schwerpunkten, das Zitat erscheint beim Darüberfahren, auf dem Telefon eine Wischreihe.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="trainers" trainers={[{ name, role, image, specialties, quote, meta }]} />

Source

Mitgliedschaften

Monatlich kündbar oder zwölf Monate, die Ersparnis sichtbar, was jede Mitgliedschaft enthält.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="memberships" plans={[{ name, flex, year, features, featured, action }]} included={[…]} joiningFee={29} />

Source

Probetraining

Ziel und Zeiten wählen, Kontakt hinterlassen, das Studio ruft zurück.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="trial" goals={[{ id, label, icon }]} benefits={[…]} media={<img … />} onBook={(d) => …} />

Source

Heute

Der Tag als Zeitleiste: vorbei, läuft gerade mit Fortschritt, als Nächstes und später.

Installv1.0.1

aiw add @ai-website/fitness

Bringt mit utils, kit, button, icon, section, reveal, input

Usage

<Fitness variant="today" classes={[…]} />

Source

Details

Was Kurse und Pläne mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

variantoptional
FitnessVariant
scheduleclass-cardstrainersmembershipstrialtoday
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
classesoptional
FitnessClass[]
trainersoptional
FitnessTrainer[]
plansoptional
FitnessPlan[]
includedoptional
{ icon: IconName; label: string }[]
memberships: one line per thing that every plan includes
joiningFeeoptional
number
memberships: joining fee for monthly notice
goalsoptional
{ id: string; label: string; icon: IconName }[]
trial: goals to pick from
benefitsoptional
string[]
trial: what a trial includes
mediaoptional
React.ReactNode
trial: the picture
dayoptional
number
class-cards, today: the day to show, 0 is Monday. Defaults to today in the browser.
nowoptional
string
today: the time to measure against, HH:MM. Defaults to the browser clock.
currencyoptional
string
onBookoptional
(data: Record<string, string>) => void

Eingebaute Texte

Diese Texte schreibt Kurse und Pläne selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 46 Texte anzeigen

Schlüssel	Englisch	Deutsch
days	Englisch Mon,Tue,Wed,Thu,Fri,Sat,Sun	Deutsch Mo,Di,Mi,Do,Fr,Sa,So
daysLong	Englisch Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday	Deutsch Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
week	Englisch Week	Deutsch Woche
categories	Englisch Categories	Deutsch Kategorien
all	Englisch All	Deutsch Alle
min	Englisch {n} min	Deutsch {n} Min.
freeN	Englisch {n} of {total} free	Deutsch {n} von {total} frei
full	Englisch Full	Deutsch Ausgebucht
few	Englisch Few places	Deutsch Wenige Plätze
book	Englisch Book a place	Deutsch Platz buchen
booked	Englisch Booked	Deutsch Gebucht
waitlist	Englisch Join the waitlist	Deutsch Auf die Warteliste
onWaitlist	Englisch On the waitlist	Deutsch Auf der Warteliste
noClasses	Englisch No classes this day.	Deutsch An diesem Tag gibt es keine Kurse.
intensity	Englisch Intensity {n} of 3	Deutsch Intensität {n} von 3
with	Englisch with {name}	Deutsch mit {name}
monthly	Englisch Monthly notice	Deutsch Monatlich kündbar
yearly	Englisch 12 months	Deutsch 12 Monate
save	Englisch save {n}	Deutsch {n} sparen
perMonth	Englisch / month	Deutsch / Monat
joining	Englisch One-time joining fee {price}, waived for a 12 month term.	Deutsch Einmalige Aufnahmegebühr {price}, entfällt bei 12 Monaten Laufzeit.
allPlans	Englisch In every membership	Deutsch In jeder Mitgliedschaft
popular	Englisch Most chosen	Deutsch Am häufigsten gewählt
goal	Englisch What would you like to reach?	Deutsch Was möchtest du erreichen?
when	Englisch When suits you best?	Deutsch Wann passt es dir am besten?
morning	Englisch Mornings	Deutsch Morgens
noon	Englisch Lunchtime	Deutsch Mittags
evening	Englisch Evenings	Deutsch Abends
weekend	Englisch Weekends	Deutsch Am Wochenende
name	Englisch Name	Deutsch Name
email	Englisch Email	Deutsch E-Mail
phone	Englisch Phone	Deutsch Telefon
required	Englisch Please fill in this field.	Deutsch Bitte fülle dieses Feld aus.
invalidEmail	Englisch Please enter a valid email address.	Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
goalRequired	Englisch Please pick a goal.	Deutsch Bitte wähle ein Ziel.
send	Englisch Book a free trial	Deutsch Kostenloses Probetraining buchen
sent	Englisch See you on the mat	Deutsch Bis bald auf der Matte
sentText	Englisch We will call you within a day to find a time. Bring sports clothes and a towel, we have the rest.	Deutsch Wir rufen dich innerhalb eines Tages an und finden einen Termin. Bring Sportsachen und ein Handtuch mit, den Rest haben wir.
again	Englisch Book for someone else	Deutsch Für jemand anderen buchen
live	Englisch Live now	Deutsch Läuft gerade
next	Englisch Next	Deutsch Als Nächstes
later	Englisch Later today	Deutsch Später heute
done	Englisch Over	Deutsch Vorbei
today	Englisch Today in the studio	Deutsch Heute im Studio
optional	Englisch optional	Deutsch optional
level	Englisch Level	Deutsch Niveau

Aus dem Quellcode der Component abgeleitet.

Setzt aria-describedby, aria-label, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen group, progressbar, radiogroup, status, tab, tablist und tabpanel.
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

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 16 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kurse und Pläne?

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

Welche Varianten hat Kurse und Pläne?

6 Varianten, Wochenplan, Kurskarten, Trainer, Mitgliedschaften, Probetraining und Heute. Du wählst sie mit der Prop variant, zum Beispiel variant="class-cards".

Kann ich die Texte von Kurse und Pläne übersetzen?

Ja. Kurse und Pläne bringt 46 eigene Texte auf Deutsch und Englisch mit, etwa „Mo,Di,Mi,Do,Fr,Sa,So“, „Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag“ und „Woche“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kurse und Pläne einbauen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Classes und Schedules stehen.

Kurse und Pläne

Wochenplan

Kurskarten

Trainer

Mitgliedschaften

Probetraining

Heute

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit