Pflege

Für ambulante Pflegedienste, Pflegeheime und betreutes Wohnen. Hilfe nach Bedarf, ein Pflegegrad-Check, der Eigenanteil im Heim, ein Tag mit Besuchen und eine kostenlose Beratung.

5 Variants

Kategorie wechseln

Hilfe nach Bedarf

Wählen, wobei Hilfe nötig ist, die passenden Leistungen gleiten nacheinander herein, jede mit dem Hinweis, wer zahlt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="services" needs={[{ id, label, icon, services: [{ title, text, covered }] }]} />

Source

Pflegegrad-Check

Eine Frage nach der anderen, jede gleitet von der Seite herein und die Leiste oben füllt sich. Am Ende leuchten die fünf Grade bis zum voraussichtlichen auf, die Punkte zählen und die monatlichen Leistungen erscheinen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="care-grade" questions={[{ id, area, question, answers: [{ label, points }] }]} grades={[{ grade: 2, from: 27, benefits: [{ label, amount }] }]} />

Source

Heimkosten

Pflegegrad und Jahre im Heim wählen. Ein Balken zeigt, was die Pflegekasse zahlt, die Entlastung für lange Aufenthalte und den Eigenanteil, der Betrag gleitet.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="home-costs" homeCost={3400} careShare={1450} fundByGrade={{ "2": 805, "3": 1319 }} relief={[15, 30, 50, 75]} />

Source

Ein Tag mit Besuchen

Die Besuche eines Tages auf einem Band vom Morgen bis zur Nacht, die Markierungen springen nacheinander herein. Einen wählen für Uhrzeit, Dauer und Pflegekraft, die Liste darunter folgt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="visit-plan" visits={[{ time: "07:30", title, minutes: 40, icon, who }]} />

Source

Kostenlose Beratung

Zu Hause, am Telefon oder per Video auf einem gleitenden Schalter. Einen Tag wählen, seine Zeiten rücken herein, wählen, für wen, und buchen, die Bestätigung nennt Tag und Uhrzeit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="consultation" days={[{ id, label, times: ["09:00", "11:00"] }]} />

Source

Details

Was Pflege mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/care-services.tsx
Bringt mit: utilskitbutton icon inputsectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 47 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CareServicesProps aus components/ui/care-services.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
CareServicesVariant
servicescare-gradehome-costsvisit-planconsultation
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
needsoptional
CareNeed[]
services
questionsoptional
CareQuestion[]
care-grade
gradesoptional
CareGrade[]
homeCostoptional
number
home-costs: monthly cost of the home, fund payment per grade, relief percent per year
careShareoptional
number
fundByGradeoptional
Record<string, number>
reliefoptional
number[]
visitsoptional
CareVisit[]
visit-plan: the day of one client
daysoptional
{ id: string; label: string; times: string[] }[]
consultation: days and times to pick
currencyoptional
string

Eingebaute Texte

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

Alle 47 Texte anzeigen

Schlüssel	Englisch	Deutsch
need	Englisch What do you need help with?	Deutsch Wobei brauchst du Hilfe?
covered	Englisch Paid by the care fund	Deutsch Zahlt die Pflegekasse
selfPay	Englisch Private	Deutsch Privat
ask	Englisch Ask for this help	Deutsch Diese Hilfe anfragen
step	Englisch Question {n} of {total}	Deutsch Frage {n} von {total}
back	Englisch Back	Deutsch Zurück
result	Englisch Your likely care grade	Deutsch Voraussichtlicher Pflegegrad
grade	Englisch Grade {n}	Deutsch Pflegegrad {n}
noGrade	Englisch No care grade yet	Deutsch Noch kein Pflegegrad
points	Englisch {n} points	Deutsch {n} Punkte
perMonth	Englisch per month	Deutsch im Monat
benefits	Englisch What you may receive	Deutsch Was dir zustehen kann
again	Englisch Start again	Deutsch Neu starten
apply	Englisch Let us help with the application	Deutsch Wir helfen beim Antrag
estimate	Englisch An estimate, the assessment of the care fund decides.	Deutsch Eine Schätzung, maßgeblich ist die Begutachtung der Pflegekasse.
gradeLabel	Englisch Care grade	Deutsch Pflegegrad
years	Englisch Years in the home	Deutsch Jahre im Heim
yearsN	Englisch Year {n}	Deutsch Jahr {n}
yearsMore	Englisch Year {n} and later	Deutsch Ab Jahr {n}
totalCost	Englisch Monthly cost of the home	Deutsch Monatliche Heimkosten
fund	Englisch Care fund pays	Deutsch Pflegekasse zahlt
surcharge	Englisch Extra relief for long stays	Deutsch Entlastung für lange Aufenthalte
own	Englisch You pay, about	Deutsch Dein Eigenanteil, etwa
ownShort	Englisch You pay	Deutsch Eigenanteil
talk	Englisch Talk to our advisor	Deutsch Mit unserer Beraterin sprechen
today	Englisch A day of care	Deutsch Ein Tag in der Pflege
visits	Englisch {n} visits	Deutsch {n} Besuche
minutes	Englisch {n} min	Deutsch {n} Min.
minutesTotal	Englisch {n} min of care a day	Deutsch {n} Min. Pflege am Tag
nurse	Englisch With	Deutsch Mit
mode	Englisch How would you like to talk?	Deutsch Wie möchtest du sprechen?
home	Englisch At home	Deutsch Zu Hause
phone	Englisch By phone	Deutsch Telefon
video	Englisch Video call	Deutsch Video
day	Englisch Day	Deutsch Tag
time	Englisch Time	Deutsch Uhrzeit
name	Englisch Your name	Deutsch Dein Name
phoneNo	Englisch Phone number	Deutsch Telefonnummer
forWhom	Englisch For whom	Deutsch Für wen
self	Englisch Myself	Deutsch Für mich
parent	Englisch A parent	Deutsch Mutter oder Vater
partner	Englisch My partner	Deutsch Partner
book	Englisch Book a free consultation	Deutsch Kostenlose Beratung buchen
booked	Englisch Booked. We call you the day before to confirm.	Deutsch Gebucht. Wir rufen am Vortag an und bestätigen.
free	Englisch Free and without obligation	Deutsch Kostenlos und unverbindlich
nameError	Englisch Please enter your name	Deutsch Bitte gib deinen Namen ein
phoneError	Englisch Please enter a phone number	Deutsch Bitte gib eine Telefonnummer ein

Aus dem Quellcode der Component abgeleitet.

Pflege reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-label, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup, status, tab und tablist.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
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 Pflege?

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

Welche Varianten hat Pflege?

5 Varianten, Hilfe nach Bedarf, Pflegegrad-Check, Heimkosten, Ein Tag mit Besuchen und Kostenlose Beratung. Du wählst sie mit der Prop variant, zum Beispiel variant="care-grade".

Kann ich die Texte von Pflege übersetzen?

Ja. Pflege bringt 47 eigene Texte auf Deutsch und Englisch mit, etwa „Wobei brauchst du Hilfe?“, „Zahlt die Pflegekasse“ und „Privat“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Pflege einbauen?

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

Kann ich Pflege ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden CareServices-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Pflege stehen.

Pflege

Hilfe nach Bedarf

Pflegegrad-Check

Heimkosten

Ein Tag mit Besuchen

Kostenlose Beratung

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit