Angebot

Ein Angebot, dessen Wert sofort klar ist. Eine Quittung mit allem, was drin ist, Boni, die sich beim Scrollen freischalten, der Preis neben den üblichen Wegen, ein Extra zum Dazunehmen und Zahlung in Raten.

5 Variants

Kategorie wechseln

Wertaufstellung

Eine Quittung mit allem, was drin ist, und dem Einzelwert. Der Gesamtwert wird beim Hereinscrollen durchgestrichen, dann zählt der Preis bis zum heutigen Betrag herunter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/offer-stack

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

Usage

<OfferStack variant="value-stack" title="…" name="…" price={249} items={[{ title, text, value, icon }]} guarantee="…" cta={{ label, href }} />

Source

Boni

Das Kernangebot bleibt links stehen. Rechts schalten sich die Bonuskarten beim Scrollen nacheinander frei, das Schloss wird zum Geschenk, der Rand leuchtet auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/offer-stack

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

Usage

<OfferStack variant="bonuses" title="…" name="…" price={249} items={[…]} bonuses={[{ title, text, value, icon }]} />

Source

Preisanker

Die üblichen Wege zum selben Ergebnis als Balken, von der Agentur bis zur Freelancerin. Die Balken wachsen nacheinander, das Angebot kommt zuletzt mit dem kürzesten Balken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/offer-stack

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

Usage

<OfferStack variant="price-anchor" title="…" name="…" price={249} anchors={[{ label, price, note }]} />

Source

Extra zur Bestellung

Links, was drin ist, rechts die Bestellung mit einem Extra zum Ankreuzen in einer gestrichelten Box. Das Häkchen lässt die Summe zum neuen Betrag zählen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/offer-stack

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

Usage

<OfferStack variant="order-bump" title="…" name="…" price={249} items={[…]} bump={{ title, text, price, was }} />

Source

Ratenzahlung

Einmal zahlen oder in Raten, mit gleitendem Schalter. Betrag, Zahlungsplan und Knopf wechseln gemeinsam.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/offer-stack

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

Usage

<OfferStack variant="payment-plan" title="…" name="…" price={249} plan={{ count: 3, amount: 89, dates: ["In one month", "In two months"] }} />

Source

Details

Was Angebot mitbringt, aus Registry und Quellcode gelesen.

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

Props

Die Schnittstelle OfferStackProps aus components/ui/offer-stack.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
OfferStackVariant
value-stackbonusesprice-anchororder-bumppayment-plan
eyebrowoptional
React.ReactNode
titlePflicht
React.ReactNode
descriptionoptional
React.ReactNode
namePflicht
string
The name of the offer, e.g. Website course
pricePflicht
number
The price today
itemsoptional
OfferItem[]
value-stack, bonuses, order-bump: what is in it
bonusesoptional
OfferItem[]
bonuses: extras on top
anchorsoptional
{ label: string; price: number; note?: string }[]
price-anchor: other ways to the same result
bumpoptional
{ title: string; text: string; price: number; was?: number }
order-bump: the one extra to add
planoptional
{ count: number; amount: number; /** Labels of the later payments, e.g. In one month */ dates?: string[] }
payment-plan: the instalment option
guaranteeoptional
string
Short promise under the action, e.g. 30 days money back
currencyoptional
string
ctaoptional
{ label: string; href: string }

Eingebaute Texte

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

Alle 21 Texte anzeigen

Schlüssel	Englisch	Deutsch
value	Englisch Value	Deutsch Wert
total	Englisch Total value	Deutsch Gesamtwert
today	Englisch Your price today	Deutsch Dein Preis heute
youSave	Englisch You save {a}	Deutsch Du sparst {a}
bonus	Englisch Bonus {n}	Deutsch Bonus {n}
worth	Englisch worth {a}	Deutsch im Wert von {a}
free	Englisch Free	Deutsch Gratis
core	Englisch The course	Deutsch Der Kurs
order	Englisch Your order	Deutsch Deine Bestellung
add	Englisch Yes, add {t} for {a}	Deutsch Ja, {t} für {a} dazunehmen
sum	Englisch Total	Deutsch Gesamt
once	Englisch Pay once	Deutsch Einmal zahlen
split	Englisch {n} payments	Deutsch {n} Raten
payment	Englisch Payment	Deutsch Zahlung
instalment	Englisch Payment {n}	Deutsch {n}. Rate
now	Englisch Today	Deutsch Heute
payNow	Englisch Pay {a} now	Deutsch Jetzt {a} zahlen
payFirst	Englisch Pay {a} now, then {n} more	Deutsch Jetzt {a}, dann {n} weitere
sameTotal	Englisch Same total, no interest	Deutsch Gleicher Gesamtbetrag, ohne Zinsen
saveOnce	Englisch Save {a} when you pay at once	Deutsch Spare {a} bei Einmalzahlung
savedOnce	Englisch {a} less than in instalments	Deutsch {a} weniger als in Raten

Aus dem Quellcode der Component abgeleitet.

Angebot reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-checked, 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).
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Angebot?

Mit aiw add @ai-website/offer-stack. Der Befehl legt die Datei components/ui/offer-stack.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 Angebot?

5 Varianten, Wertaufstellung, Boni, Preisanker, Extra zur Bestellung und Ratenzahlung. Du wählst sie mit der Prop variant, zum Beispiel variant="bonuses".

Kann ich die Texte von Angebot übersetzen?

Ja. Angebot bringt 21 eigene Texte auf Deutsch und Englisch mit, etwa „Wert“, „Gesamtwert“ und „Dein Preis heute“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Angebot einbauen?

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

Kann ich Angebot ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Angebot stehen.

Angebot

Wertaufstellung

Boni

Preisanker

Extra zur Bestellung

Ratenzahlung

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit