Empfehlung und Partner

Kunden, die Kunden bringen, Partner, die weiterverkaufen.

2 Components · 10 Variants

Kategorie wechseln

partner-program

Partnerprogramm

Für Agenturen, Freelancer und Wiederverkäufer. Partnerstufen, wiederkehrende Provision über ein Jahr, die Bewerbung mit den nächsten Schritten, ein Verzeichnis zertifizierter Partner und was Partner bekommen.

Partnerstufen
Wiederkehrende Provision
Bewerbung
Partnerverzeichnis
Partnervorteile

Props und Details

Partnerstufen

Stufen nebeneinander mit Provision, Voraussetzung und Vorteilen. Die häufigste trägt ein umlaufendes Licht, eine kleine Skala zeigt die Stufe, Licht folgt dem Zeiger.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/partner-program

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

Usage

<PartnerProgram variant="tiers" title="…" tiers={[{ name, commission, requirement, benefits, highlight, icon }]} cta={{ label, href }} />

Source

Wiederkehrende Provision

Neue Kunden pro Monat und ihr Tarif als Regler. Jeder Monat baut auf dem letzten auf, zwölf Balken steigen nacheinander, Hover nennt den Betrag.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/partner-program

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

Usage

<PartnerProgram variant="earnings" title="…" earnings={{ clients, value, rate: 0.2 }} currency="EUR" />

Source

Bewerbung

Die Partnerart als Karten, dann vier Felder mit klaren Fehlern. Nach dem Senden steigen die nächsten Schritte auf, der erste ist abgehakt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/partner-program

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

Usage

<PartnerProgram variant="apply" title="…" types={[{ id, title, text, icon }]} next={[{ title, text }]} onApply={(data) => …} />

Source

Partnerverzeichnis

Zertifizierte Partner, gefiltert nach Region und Schwerpunkt. Karten steigen nach jedem Filter neu auf, ein leeres Ergebnis bietet an, alle zu zeigen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/partner-program

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

Usage

<PartnerProgram variant="directory" title="…" partners={[{ name, city, region, focus, level, projects, href }]} />

Source

Partnervorteile

Die Provision groß und zählend, was Partner bekommen in einem lückenlosen Raster, ein Partner mit eigenen Worten. Die linke Seite bleibt beim Scrollen stehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/partner-program

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

Usage

<PartnerProgram variant="benefits" title="…" highlight={{ value: 25, suffix: "%", label }} benefits={[{ title, text, icon }]} quote={{ text, name, role }} />

Source

referral

Freunde werben

Kunden bringen Kunden. Geben und bekommen mit persönlichem Link, Prämien auf einer Spur, drei Schritte mit einer reisenden Einladung, ein Einladeformular mit Nachrichtenvorschau und ein Überblick mit Freunden und ihrem Stand.

Geben und bekommen
Prämienspur
So funktioniert es
Per E-Mail einladen
Deine Einladungen

Props und Details

Geben und bekommen

Was die Freundin bekommt und was du bekommst, nebeneinander, sie gleiten beim Hereinscrollen zusammen. Darunter der persönliche Link mit Kopieren, Mail und dem Teilen des Geräts.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/referral

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

Usage

<Referral variant="share-link" title="…" link="https://…" give={{ value, label }} get={{ value, label }} terms={[…]} />

Source

Prämienspur

Prämien nach Zahl der Freunde auf einer Spur, die sich beim Hereinscrollen füllt. Erreichte Stufen bekommen ihren Haken, die nächste pulsiert und steht oben.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/referral

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

Usage

<Referral variant="milestones" title="…" joined={3} milestones={[{ count, reward, icon }]} link="…" />

Source

So funktioniert es

Drei Schritte auf einer gezeichneten Route. Beim Hereinscrollen zeichnet sich die Route, eine Einladung reist vom ersten zum letzten Schritt, die Schritte leuchten beim Vorbeiflug auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/referral

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

Usage

<Referral variant="how-it-works" title="…" steps={[{ title, text, icon }]} give={…} get={…} cta={{ label, href }} />

Source

Per E-Mail einladen

Adressen werden mit Komma oder Enter zu Chips, falsche werden benannt. Daneben die Nachricht, die Freunde bekommen, mit dem Geschenk. Der Knopf zählt die Einladungen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/referral

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

Usage

<Referral variant="invite-form" title="…" sender="Lena" message="…" give={…} onInvite={(emails) => …} />

Source

Deine Einladungen

Zahlen zählen hoch, Freunde steigen mit ihrem Stand auf, von eingeladen bis Prämie gezahlt. Der Link steht daneben, auf dem Telefon darunter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/referral

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

Usage

<Referral variant="dashboard" title="…" stats={[{ label, value, currency }]} friends={[{ name, date, status, reward }]} link="…" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Empfehlung und Partner stehen.

Partnerstufen

Wiederkehrende Provision

Bewerbung

Partnerverzeichnis

Partnervorteile

Geben und bekommen

Prämienspur

So funktioniert es

Per E-Mail einladen

Deine Einladungen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit