Zum Hauptinhalt springen

Landing Page Builder

[landing-page] [admin] [branding]

Eigene Landing-Page für dein Tenant-Portal — direkt in licensio gebaut, kein externes CMS nötig. Drag & Drop Sektionen, Branding aus deinem Tenant, Live-Vorschau.

Für wen​

Admins, die eine öffentliche Marketing-/Verkaufsseite für ihr Lizenz-Portal bereitstellen wollen. Erscheint unter <tenant>.licensio.io/ als Default-Startseite.

Schritt für Schritt​

1. Builder öffnen​

Einstellungen → Landing Page.

2. Sektionen hinzufügen​

Vorhandene Sektion-Typen:

  • Hero — großes Headline-Banner mit Call-to-Action
  • Features — Feature-Grid (3–4 Spalten)
  • Pakete — automatisch alle Pakete mit show_in_join_preview=true als Pricing-Tabelle
  • Testimonials — Kundenzitate
  • FAQ — Akkordeon
  • Carousel — Bilder-Slider mit Auto-Play (siehe Hinweise unten)
  • Footer-CTA — abschließender Call-to-Action

3. Drag & Drop​

Sektionen mit Maus umsortieren. Reihenfolge wird live gespeichert.

4. Branding​

Sektionen erben automatisch dein Tenant-Branding (Farben, Schrift, Logo). Über separate Branding-Optionen pro Sektion lassen sich Hintergrundtypen ändern (Solid, Gradient, Bild).

5. Live-Vorschau​

Mobile/Desktop-Toggle zeigt wie die Page auf verschiedenen Geräten aussieht. Auch Portal-Preview-Pfeile zum Durchblättern der Sektionen.

6. Veröffentlichen​

Speichern klicken → Page ist sofort live unter <tenant>.licensio.io/. Kein separater Deploy-Schritt.

Sektionen im Detail​

Hero​

  • Headline (groß)
  • Subheadline (klein)
  • Primary-Button (Text + Link)
  • Hintergrund-Typ: Farbe / Verlauf / Bild

Pakete​

Zeigt automatisch alle aktiven Pakete deines Tenants, bei denen show_in_join_preview=true gesetzt ist (Toggle in Paket-Einstellungen). Jede Paket-Card zeigt:

  • Name + Beschreibung
  • Preis (monatlich + ggf. Setup-Fee)
  • Feature-Liste (✓ "Unbegrenzte Downloads", "Bis zu 3 Drucker", "CRM Anbindung", abhängig von den Feature-Flags)
  • Call-to-Action zur Registrierung

Carousel​

Bilder hochladen + Reihenfolge festlegen + Auto-Play-Intervall. Pfeile + Punkt-Indikatoren zum manuellen Navigieren.

Achtung: Bei Carousel-Komponenten mit funktionalen State-Updates ist die Logik gegen Endless-Loop-Render abgesichert (siehe Commit 63ca931). Die Pfeile triggern Carousel-Step inkremental.

Footer-CTA​

Letzter Block mit Headline + Button (z.B. "Jetzt Lizenz sichern → /join").

Häufige Fragen​

Wie ändere ich was im Header / Logo / Footer? Branding-Tab in Einstellungen → Logo, Schrift, Farben. Wirkt auf Landing-Page und Portal gleichzeitig.

Kann ich eigenes HTML einfügen? Aktuell nur über die vorhandenen Sektion-Typen. Custom-HTML-Block kommt in Phase 2.

Wie verlinke ich zur Registrierung? Direkt-Link: /join (zeigt Self-Service-Pakete). Falls eines deiner Pakete auto_activate=true hat, geht der Kunde direkt durch ohne Wartezeit.

Wirkt sich Branding sofort aus? Ja. Branding-Speichern triggert Re-Render auf der Landing-Page — kein zusätzlicher Schritt.

Gibt es Vorlagen? Aktuell startest du mit leerer Page. Vorlagen-Library kommt in Phase 2.

Scroll-Animationen (Fade-In)​

Seit 2026-04-29 wird jede Sektion beim Scrollen sanft eingeblendet (opacity 0 → 1 + translateY 28px → 0, Übergang 0.6s). Die erste Sektion (üblicherweise Hero) ist bereits beim Seitenaufruf sichtbar — die folgenden 5 bekommen ein gestaffeltes Delay (0.05s pro Position) für einen ruhigen, kaskadierten Effekt.

Implementierungsdetails (für Entwickler):

  • Intersection-Observer (threshold: 0.1) in apps/portal/app/components/LandingPage.tsx
  • Sektionen sind direkte Kinder eines lp-sections-container-Divs, dadurch funktionieren nth-child-Cascading-Delays sauber
  • Header und Footer animieren bewusst nicht — sie bleiben statisch
  • Die Vorschau-Buttons im Builder (🖥 Desktop / 📱 Mobile) öffnen die echte Portal-Page mit Token; die Animationen sind dort identisch sichtbar

Mehrsprachige Landing Page (develop)​

Die Landing Page kann zusätzlich zur Original-Sprache (Deutsch) eine englische Variante haben — manuell gepflegt oder per Knopfdruck automatisch übersetzt. Der Endkunde sieht die Page in der Sprache, die er im Portal eingestellt hat (i18n).

Sprach-Tab im Builder​

Oben im Editor-Bereich ein Umschalter DE / EN:

  • DE-Modus — du pflegst das Original, genau wie bisher.
  • EN-Modus — pro Textfeld erscheint eine read-only Referenz-Box mit dem deutschen Original (🇩🇪 …, kursiv, beiger Hintergrund) und darunter ein leeres Eingabefeld für die englische Fassung.

Auto-Translate​

Der Button „🔄 Automatisch auf EN übersetzen" (sichtbar im DE-Tab) füllt alle EN-Felder auf einmal:

  1. Klick → Sicherheitsabfrage (Dialog).
  2. Bestätigen → licensio schickt die Texte an Claude (Sonnet) zur Übersetzung. Dauert ein paar Sekunden, Kosten pro Lauf ~$0.05 (trägt licensio).
  3. Erfolg → alle EN-Felder sind befüllt, der Tab schaltet automatisch auf EN um. Du kannst jeden Text manuell nachschärfen und musst danach noch Speichern klicken.

Rate Limit: Maximal 3 Auto-Translate-Läufe pro 72 Stunden und Tenant. Ist das Limit erreicht, ist der Button deaktiviert mit Hinweis, wann er wieder verfügbar ist — du kannst in der Zwischenzeit jederzeit manuell übersetzen.

„Nicht übersetzt"-Hinweis (NotTranslatedBadge)​

Hat ein sichtbares Feld (z.B. die Hero-Headline) im EN-Modus noch keine Übersetzung, zeigt der Builder direkt daneben ein kleines „Nicht übersetzt" / „Not translated"-Badge. So siehst du auf einen Blick, wo noch Lücken sind — gerade wenn du nach einem Auto-Translate-Lauf einzelne Felder ergänzt hast oder neue Sektionen hinzukamst.

Wichtig: Das Badge erscheint nur in der Admin-Preview (Builder + Vorschau-Tab mit Token-URL). Endkunden auf der Live-Page sehen es nie — dort wird stillschweigend auf das Original (default_locale) zurückgefallen, damit die Page aufgeräumt wirkt. So bekommst du als Tenant den Hinweis, ohne dass deine Kunden Übersetzungslücken sehen.

Was passiert bei fehlender Übersetzung?​

Der Endkunde sieht nie eine leere Stelle: Fehlt die EN-Fassung eines Feldes, fällt die Anzeige automatisch auf das deutsche Original zurück. Die Übersetzung ist also additiv — du kannst sie Stück für Stück nachziehen, ohne dass die Page kaputtgeht.

Was ist abgedeckt?​

  • Phase 1 (Foundation): Datenmodell für übersetzte Felder, Fallback-Logik, kein Migrations-Bedarf — englische Texte liegen als Suffix-Schlüssel im bestehenden tenants.landing_page-JSONB (headline = DE-Original, headline_en = englische Fassung).
  • Phase 2 (Builder-UI + Auto-Translate): Sprach-Tab, Side-by-Side-Editoren, Auto-Translate-Button mit Rate-Limit, NotTranslatedBadge. Erfasst die Top-Level-Texte (Headline / Subline / Fließtext / Button-Text) in allen Section-Editoren: Hero, About, Pakete, Features, CTA, Screenshots, Carousel, Portal-Vorschau.

Noch offen (Phase 3 / 4)​

  • Side-by-Side auch für Listen-Elemente (einzelne Feature-Cards, Carousel-Items: Titel + Beschreibung) und für mehrere Buttons im Hero.
  • Weitere Sprachen (ES, FR) im LanguageProvider + Dictionary.

Für Entwickler​

  • Translate-Route: POST /api/landing-page/translate (Admin-App), nutzt ANTHROPIC_API_KEY. Ohne Key → 503 { code: 'API_KEY_MISSING' }. ENV muss in apps/admin/.env.local (lokal) und im Vercel-Admin-Projekt für Production + Preview gesetzt sein.
  • Portal-Render: getLocalizedField(data, field, locale, defaultLocale) — liest data[field_<locale>] wenn locale != defaultLocale, sonst data[field], sonst Original.

Verwandt​

  • Branding — Farben, Logo, Schrift
  • Pakete — show_in_join_preview für Pricing-Sektion
  • Custom Domain — Landing-Page unter eigener Domain
  • i18n — Plattform-i18n-Setup