Physiotherapie Website Sections

Für Physiotherapie-Praxen. Behandlungen am gezeichneten Körper, der erste Termin Schritt für Schritt, ein ganzes Rezept als Wochenserie gebucht, Zuzahlung und Preise und Übungen für zu Hause.

5 Variants

Kategorie wechseln

Von der ersten Beschwerde bis zur letzten Behandlung

Patienten kommen mit einer Beschwerde und einem Rezept in die Praxis und wollen schnell wissen, ob ihnen hier geholfen wird und wann. Diese Sections beginnen am Körper, erklären den ersten Termin, buchen eine ganze Serie und machen die Kosten vor der ersten Behandlung klar.

Die „Körperkarte“ zeichnet eine Figur, deren Bereiche man am Körper oder über Chips wählt, jeder bringt seine Beschwerden und Behandlungen mit. „Erster Termin“ zeigt den ersten Besuch in nummerierten Schritten mit Zeitangabe und dem, was man mitbringt. „Serie buchen“ nimmt die Behandlung auf dem Rezept und einen freien Wochentermin und reiht alle Termine der Serie auf, ein Feiertag rückt in die nächste Woche und sagt es. „Kosten“ wechselt zwischen gesetzlich, privat und Selbstzahler und rechnet die Zuzahlung aus Preis und Anteil. „Übungen für zu Hause“ zeigt gezeichnete Figuren, die in ihre zweite Haltung gehen, mit Haltezeit und Tageszähler.

Buch Serien statt Einzeltermine, Patienten mit Rezept brauchen sechs bis zehn Behandlungen am Stück. Zeig die Zuzahlung vor der Buchung, das beantwortet eine Frage, die sonst am Telefon kommt. Die Übungen halten Patienten zwischen den Terminen dran und sind ein guter Grund, die Seite wieder zu öffnen.

KörperkarteNeu in 1.2

Die Figur blendet ein und ihre Linien zeichnen sich beim Scrollen, die Punkte folgen nacheinander. Einen Bereich am Körper oder auf den Chips wählen, ein weiches Licht wandert dorthin, Beschwerden und Behandlungen gleiten herein.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="body-map" regions={[{ id, label, x: 50, y: 16, complaints: [], treatments: [{ title, text, duration, icon }] }]} bookHref="#" />

Source

Erster TerminNeu in 1.2

Der erste Termin als nummerierte Schritte mit Zeitangabe. Eine Linie füllt sich beim Scrollen von Schritt zu Schritt, jeder Text steigt auf. Foto und was mitzubringen ist bleiben daneben im Blick.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="first-visit" steps={[{ title, text, time, icon }]} bring={[…]} media={<img … />} />

Source

Serie buchenNeu in 1.2

Behandlung vom Rezept und einen freien Platz im Wochenraster wählen. Alle Termine der Serie reihen sich nacheinander auf, ein Feiertag rückt in die nächste Woche und sagt es. Mit Name und Telefon anfragen.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="series-booking" seriesTreatments={[{ id, label, sessions, duration }]} weekSlots={{ 0: ["08:00"] }} taken={{ 0: ["10:00"] }} startWeek="2026-10-26" closedDays={["2026-11-18"]} onRequest={(data) => …} />

Source

KostenNeu in 1.2

Zwischen gesetzlich, privat und Selbstzahler mit gleitender Pille wechseln. Behandlung und Anzahl der Termine wählen, die Zuzahlung errechnet sich aus Pauschale und Anteil, ein Balken zeigt, was die Kasse zahlt.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="costs" prices={[{ id, label, duration, statutory, private, selfPay }]} copayFee={10} copayPercent={10} />

Source

Übungen für zu HauseNeu in 1.2

Gezeichnete Figuren bewegen sich beim Hereinscrollen einmal in ihre zweite Haltung, der Wiedergabe-Knopf wiederholt die Bewegung. Ein Ring zählt die Haltezeit herunter, Abhaken füllt die Bilanz für heute.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="home-exercises" exercises={[{ id, title, text, pose: "bridge", dose: "3 × 12", hold: 20 }]} />

Source

Details

Was Physiotherapie mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

variantoptional
PhysiotherapyVariant
body-mapfirst-visitseries-bookingcostshome-exercises
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
regionsoptional
PhysioRegion[]
body-map
bookHrefoptional
string
stepsoptional
PhysioStep[]
first-visit
bringoptional
string[]
mediaoptional
React.ReactNode
seriesTreatmentsoptional
PhysioSeriesTreatment[]
series-booking
weekSlotsoptional
Record<string, string[]>
Weekly free times per weekday, 0 is Monday, e.g. { 0: ["08:00", "17:30"] }
takenoptional
Record<string, string[]>
Taken times shown greyed out, e.g. { 0: ["10:00"] }
startWeekoptional
string
Monday of the first week, YYYY-MM-DD
closedDaysoptional
string[]
Days without treatment, YYYY-MM-DD
defaultSlotoptional
{ day: number; time: string }
Slot picked from the start, day 0 is Monday
onRequestoptional
(data: { treatment: string; dates: string[]; time: string; name: string; phone: string }) => void
pricesoptional
PhysioPrice[]
costs
copayFeeoptional
number
Flat fee per prescription for statutory patients
copayPercentoptional
number
Share of the treatment cost for statutory patients in percent
exercisesoptional
PhysioExercise[]
home-exercises
currencyoptional
string

Eingebaute Texte

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

Alle 50 Texte anzeigen

Schlüssel	Englisch	Deutsch
area	Englisch Where does it hurt?	Deutsch Wo tut es weh?
pick	Englisch Show {label}	Deutsch {label} zeigen
complaints	Englisch Often seen here	Deutsch Häufig hier
treatments	Englisch What helps	Deutsch Was hilft
min	Englisch {n} min	Deutsch {n} Min.
bookArea	Englisch Book an appointment for this area	Deutsch Termin für diesen Bereich buchen
bring	Englisch Please bring	Deutsch Bitte mitbringen
treatment	Englisch Treatment	Deutsch Behandlung
sessions	Englisch {n} sessions	Deutsch {n} Termine
weekday	Englisch Weekday	Deutsch Wochentag
time	Englisch Time	Deutsch Uhrzeit
days	Englisch Mon,Tue,Wed,Thu,Fri	Deutsch Mo,Di,Mi,Do,Fr
series	Englisch Your series	Deutsch Deine Serie
seriesHint	Englisch Same day, same time, every week. Holidays move to the next free week.	Deutsch Gleicher Tag, gleiche Uhrzeit, jede Woche. Feiertage rücken in die nächste freie Woche.
moved	Englisch moved	Deutsch verschoben
session	Englisch Session {n}	Deutsch Termin {n}
name	Englisch Name	Deutsch Name
phone	Englisch Phone	Deutsch Telefon
request	Englisch Request the series	Deutsch Serie anfragen
requested	Englisch Requested. We confirm the {n} dates by phone today.	Deutsch Angefragt. Wir bestätigen die {n} Termine noch heute telefonisch.
again	Englisch Plan another series	Deutsch Weitere Serie planen
errName	Englisch Please enter your name.	Deutsch Bitte gib deinen Namen an.
errPhone	Englisch Please enter a phone number so we can reach you.	Deutsch Bitte gib eine Telefonnummer an, damit wir dich erreichen.
errSlot	Englisch Please pick a weekday and a time.	Deutsch Bitte wähle einen Wochentag und eine Uhrzeit.
busy	Englisch Taken	Deutsch Belegt
payer	Englisch How you are insured	Deutsch Wie du versichert bist
statutory	Englisch Statutory	Deutsch Gesetzlich
private	Englisch Private	Deutsch Privat
selfPay	Englisch Self pay	Deutsch Selbstzahler
perSession	Englisch per session	Deutsch je Termin
count	Englisch Sessions	Deutsch Termine
less	Englisch One session less	Deutsch Ein Termin weniger
more	Englisch One session more	Deutsch Ein Termin mehr
rx	Englisch Prescription fee	Deutsch Pauschale je Rezept
share	Englisch {pct} of the treatment cost	Deutsch {pct} der Behandlungskosten
copay	Englisch Your co-payment	Deutsch Deine Zuzahlung
insurerPays	Englisch Your insurance pays {amount}	Deutsch Deine Kasse zahlt {amount}
exempt	Englisch Exempt from co-payments? Bring your certificate and you pay nothing.	Deutsch Von der Zuzahlung befreit? Bring den Nachweis mit, dann zahlst du nichts.
privateNote	Englisch You get an invoice, your insurer refunds it according to your plan.	Deutsch Du bekommst eine Rechnung, deine Versicherung erstattet nach deinem Tarif.
selfNote	Englisch No prescription needed. Pay by card or cash after each session.	Deutsch Ganz ohne Rezept. Bezahlt wird nach jedem Termin mit Karte oder bar.
total	Englisch Total	Deutsch Gesamt
exercises	Englisch Exercises for today	Deutsch Übungen für heute
done	Englisch Done today	Deutsch Heute erledigt
doneN	Englisch {n} of {total} done today	Deutsch {n} von {total} heute erledigt
start	Englisch Hold {n} s	Deutsch {n} s halten
stop	Englisch Stop	Deutsch Stopp
left	Englisch {n} s left	Deutsch noch {n} s
play	Englisch Show the movement of {title}	Deutsch Bewegung von {title} zeigen
pause	Englisch Pause the movement	Deutsch Bewegung anhalten
exNote	Englisch Practise as agreed with your therapist. Move slowly and stay below the pain threshold.	Deutsch Übe so, wie es mit deiner Therapeutin besprochen ist. Bewege dich langsam und bleib unter der Schmerzgrenze.

Aus dem Quellcode der Component abgeleitet.

Physiotherapie reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert, group, 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. 7 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Physiotherapie?

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

Welche Varianten hat Physiotherapie?

5 Varianten, Körperkarte, Erster Termin, Serie buchen, Kosten und Übungen für zu Hause. Du wählst sie mit der Prop variant, zum Beispiel variant="first-visit".

Kann ich die Texte von Physiotherapie übersetzen?

Ja. Physiotherapie bringt 50 eigene Texte auf Deutsch und Englisch mit, etwa „Wo tut es weh?“, „Häufig hier“ und „Was hilft“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Physiotherapie einbauen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Physiotherapie stehen.

Von der ersten Beschwerde bis zur letzten Behandlung

Physiotherapie

KörperkarteNeu in 1.2

Erster TerminNeu in 1.2

Serie buchenNeu in 1.2

KostenNeu in 1.2

Übungen für zu HauseNeu in 1.2

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit