JourneyGuide

Inhalt

Eine Leitfigur (Emoji, Logo, beliebiger ReactNode) wandert beim Scrollen entlang eines geschwungenen Pfads von Station zu Station durch die Customer Journey. Der Pfad zeichnet sich mit, die aktive Station leuchtet auf, der Guide spricht in einer Sprechblase. Inspiriert von process-academy.org.

Live Demo

IHRE WEBSITE IN 5 SCHRITTEN

Scrollen Sie — der Astronaut begleitet Sie von Station zu Station

STATION 01

Erstgespräch

Wir lernen Ihr Geschäft kennen — kostenlos und unverbindlich. Sie erzählen, wir hören zu.

STATION 02

Design-Entwurf

Innerhalb einer Woche sehen Sie den ersten Entwurf Ihrer neuen Website — mit echten Inhalten.

STATION 03

Entwicklung

Wir setzen den Entwurf um: blitzschnell, responsive und DSGVO-konform gehostet in Deutschland.

STATION 04

Launch

Ihre Website geht live — inklusive Domain, SSL und Suchmaschinen-Anmeldung.

STATION 05

Betreuung

Wir bleiben an Ihrer Seite: Updates, Inhaltspflege und persönlicher Support per Anruf.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`stations`	`JourneyStation[]`	Ja	—	Stationen {icon?, title, text} (3–6 empfohlen)
`guide`	`ReactNode`	Nein	`'🧑‍🚀'`	Die Leitfigur
`stationHeight`	`number`	Nein	`300`	Höhe pro Station in Pixeln
`accentColor`	`string`	Nein	`'#fbbf24'`	Pfad- und Akzentfarbe
`theme`	`'light' \| 'dark'`	Nein	`'dark'`	Farbschema
`speechBubble`	`boolean`	Nein	`true`	Sprechblase mit Stationstitel
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<JourneyGuide
  guide="🧑‍🚀"
  stations={[
    { icon: '☎️', title: 'Erstgespräch', text: 'Wir lernen Ihr Geschäft kennen.' },
    { icon: '🎨', title: 'Design-Entwurf', text: 'Der erste Entwurf in einer Woche.' },
    { icon: '⚙️', title: 'Entwicklung', text: 'Blitzschnell und DSGVO-konform.' },
    { icon: '🚀', title: 'Launch', text: 'Ihre Website geht live.' },
  ]}
/>