Problem und Lösung

Der Schmerz, den Besucher kennen, dann der Ausweg. Nebeneinander, beim Scrollen durchgestrichen, als Schalter zwischen zwei Wochen, als monatliche Kosten und als Gespräch.

5 Variants

Kategorie wechseln

Nebeneinander

Jedes Problem mit seiner Antwort in einer Reihe. Der Pfeil zeichnet sich beim Hereinscrollen, Hover hebt die Antwort an. Auf dem Telefon steht die Antwort unter dem Problem.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/problem-solution

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<ProblemSolution variant="split" title="…" solutionLabel="With Northwind" pairs={[{ problem, solution, detail }]} cta={{ label, href }} />

Source

Durchgestrichen

Große Problemzeilen werden beim Scrollen Zeile für Zeile durchgestrichen, darunter steigt die Antwort auf. Die Überschrift bleibt auf breiten Bildschirmen stehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/problem-solution

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<ProblemSolution variant="strike" title="…" pairs={[{ problem, solution, detail }]} cta={{ label, href }} />

Source

Zwei Wochen

Ein Schalter mit gleitender Marke zwischen der Woche heute und der Woche mit dir. Die Balken schrumpfen und behalten eine Spur von vorher, die Summe zählt hoch.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/problem-solution

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<ProblemSolution variant="toggle" title="…" caption="Admin per week" unit="h" states={{ before: { label, summary, items }, after: { … } }} />

Source

Was es kostet

Das Problem als Monatsrechnung. Besucher haken ab, was auf sie zutrifft, die Summe und was nach deinem Preis übrig bleibt, folgen sofort.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/problem-solution

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<ProblemSolution variant="cost" title="…" costs={[{ problem, amount, detail }]} offer={{ name, price, text }} currency="EUR" cta={{ label, href }} />

Source

Gespräch

Jedes Problem in den Worten einer Kundin. Beim Hereinscrollen tippt die Antwort kurz und erscheint dann darunter, wie eine Antwort im Chat.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/problem-solution

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<ProblemSolution variant="conversation" title="…" answerName="Northwind" pairs={[{ problem, solution, person: { name, role } }]} />

Source

Details

Was Problem und Lösung mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/problem-solution.tsx
Bringt mit: utilskitbutton iconmotionrevealsectionnumber-ticker
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 10 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ProblemSolutionProps aus components/ui/problem-solution.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
ProblemSolutionVariant
splitstriketogglecostconversation
eyebrowoptional
React.ReactNode
titlePflicht
React.ReactNode
descriptionoptional
React.ReactNode
problemLabeloptional
string
Heading over the problems, default Today
solutionLabeloptional
string
Heading over the answers, e.g. With Northwind
pairsoptional
ProblemSolutionPair[]
split, strike, conversation
statesoptional
{ before: ProblemSolutionState; after: ProblemSolutionState }
toggle: the week before and after
unitoptional
string
toggle: unit after the values, e.g. h or Std.
captionoptional
string
toggle: heading of the card, e.g. Admin per week
costsoptional
{ problem: string; amount: number; detail?: string }[]
cost: what the problem costs per month
offeroptional
{ name: string; price: number; text?: string }
cost: the offer that replaces it
currencyoptional
string
cost: ISO currency, default EUR
answerNameoptional
string
conversation: name of the one who answers, e.g. your product
ctaoptional
{ label: string; href: string }

Eingebaute Texte

Diese Texte schreibt Problem und Lösung selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 10 Texte anzeigen

Schlüssel	Englisch	Deutsch
today	Englisch Today	Deutsch Heute
after	Englisch From now on	Deutsch Ab jetzt
lost	Englisch What it costs you each month	Deutsch Was dich das jeden Monat kostet
total	Englisch Together	Deutsch Zusammen
keep	Englisch You keep	Deutsch Dir bleiben
keepNote	Englisch every month, after {n} at {p}	Deutsch jeden Monat, nach {n} für {p}
applies	Englisch {x} applies to me	Deutsch {x} trifft auf mich zu
pick	Englisch Tick what applies to you	Deutsch Hake ab, was auf dich zutrifft
switch	Englisch Compare	Deutsch Vergleichen
typing	Englisch {n} is typing	Deutsch {n} schreibt

Aus dem Quellcode der Component abgeleitet.

Problem und Lösung reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-checked, aria-controls, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio und radiogroup.
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).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Problem und Lösung?

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

Welche Varianten hat Problem und Lösung?

5 Varianten, Nebeneinander, Durchgestrichen, Zwei Wochen, Was es kostet und Gespräch. Du wählst sie mit der Prop variant, zum Beispiel variant="strike".

Kann ich die Texte von Problem und Lösung übersetzen?

Ja. Problem und Lösung bringt 10 eigene Texte auf Deutsch und Englisch mit, etwa „Heute“, „Ab jetzt“ und „Was dich das jeden Monat kostet“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Problem und Lösung einbauen?

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

Kann ich Problem und Lösung ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Problem und Lösung stehen.