Services

Was ein Betrieb anbietet, in sieben Aufbauten: Karten mit Preisen, Preisliste, Akkordeon, Detailzeilen mit Bild, Bento, Schritte zum Ergebnis und Anfrage mit Richtwert.

7 Variants

Kategorie wechseln

Leistungskarten

Sechs Leistungen mit Icon, zwei Punkten, Preis und einem Link über die ganze Karte.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="cards" title="…" items={[{ icon, title, description, price, priceNote, points, href }]} />

Source

Preisliste

Gruppiert wie eine Karte, mit Punktlinien, Dauer und einem Etikett für Beliebtes.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="price-list" items={[{ category, title, description, price, duration }]} />

Source

Akkordeon

Die Überschrift bleibt links, jede Leistung öffnet sich zu Details, Umfang und Zeitrahmen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="accordion" items={[{ icon, title, description, price, duration, points }]} />

Source

Detailzeilen mit Bild

Eine breite Karte je Leistung, Bild und Text wechseln die Seite, Dauer und Preis unten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="detail-rows" items={[{ title, description, media, points, duration, price }]} />

Source

Bento

Fünf Leistungen als Mosaik, die wichtigste groß, jede mit Bild und Preis.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="bento" items={[{ title, description, media, price, href }]} />

Source

Schritte zum Ergebnis

Der Weg vom ersten Gespräch zur fertigen Leistung, mit dem, was am Ende in der Hand liegt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="steps" steps={[{ title, description, duration }]} result={{ title, points, price, action }} items={[]} />

Source

Mit Anfrage

Leistungen wählen, den Richtwert mitlaufen sehen und eine geprüfte Anfrage senden.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/services

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

Usage

<Services variant="with-inquiry" currency="EUR" items={[{ title, description, price, amount }]} onInquiry={(data) => …} />

Source

Details

Was Leistungen mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 7
Version: 1.0.0 · seit 1.0.0
Datei: components/ui/services.tsx
Bringt mit: utilskiticonsectionbuttonreveal
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 21 eigene Texte
Studio: Alle 7 Variants bearbeitbar
In Sammlungen: Lokales Geschäft
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

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

variantoptional
ServicesVariant
cardsprice-listaccordiondetail-rowsbentostepswith-inquiry
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
itemsPflicht
ServiceItem[]
stepsoptional
ServiceStep[]
steps: the way to the service
resultoptional
{ title: string; description?: React.ReactNode; points?: string[]; price?: string; action?: React.ReactNode }
steps: what the client holds in the end
currencyoptional
string
with-inquiry: currency for the estimate, e.g. "EUR"
onInquiryoptional
(data: { services: string[]; name: string; email: string; message: string }) => void
with-inquiry: called with the form data. Without it the block only shows the thank-you note.

Eingebaute Texte

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

Alle 21 Texte anzeigen

Schlüssel	Englisch	Deutsch
more	Englisch Details	Deutsch Details
included	Englisch Included	Deutsch Enthalten
duration	Englisch Duration	Deutsch Dauer
price	Englisch Price	Deutsch Preis
services	Englisch Services	Deutsch Leistungen
step	Englisch Step	Deutsch Schritt
result	Englisch Result	Deutsch Ergebnis
choose	Englisch Choose services	Deutsch Leistungen wählen
selected	Englisch selected	Deutsch gewählt
estimate	Englisch Estimate	Deutsch Richtwert
estimateNote	Englisch A first figure, the offer follows after a short call.	Deutsch Ein erster Wert, das Angebot folgt nach einem kurzen Gespräch.
name	Englisch Name	Deutsch Name
email	Englisch Email	Deutsch E-Mail
message	Englisch What should we know?	Deutsch Was sollten wir wissen?
messagePh	Englisch A few words about your project	Deutsch Ein paar Worte zu deinem Projekt
send	Englisch Send inquiry	Deutsch Anfrage senden
sent	Englisch Thank you. We reply within one working day.	Deutsch Danke. Wir antworten innerhalb eines Werktags.
pickOne	Englisch Pick at least one service.	Deutsch Bitte wähle mindestens eine Leistung.
invalidEmail	Englisch Please enter a valid email address.	Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
required	Englisch Please fill in this field.	Deutsch Bitte fülle dieses Feld aus.
none	Englisch Nothing selected yet	Deutsch Noch nichts gewählt

Aus dem Quellcode der Component abgeleitet.

Setzt aria-busy, aria-describedby, aria-invalid, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert 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

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. 15 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Leistungen?

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

Welche Varianten hat Leistungen?

7 Varianten, Leistungskarten, Preisliste, Akkordeon, Detailzeilen mit Bild, Bento, Schritte zum Ergebnis und Mit Anfrage. Du wählst sie mit der Prop variant, zum Beispiel variant="price-list".

Kann ich die Texte von Leistungen übersetzen?

Ja. Leistungen bringt 21 eigene Texte auf Deutsch und Englisch mit, etwa „Details“, „Enthalten“ und „Dauer“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Leistungen einbauen?

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

Kann ich Leistungen ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Services stehen.

Leistungen

Leistungskarten

Preisliste

Akkordeon

Detailzeilen mit Bild

Bento

Schritte zum Ergebnis

Mit Anfrage

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Teil dieser Sammlungen

Teil dieser Sammlungen

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit