For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /de/docs/web/marketing-site.md (or send Accept: text/markdown).

Marketing-Seiten

Landing-Sektionen, Legal-Seiten, FAQ, Changelog und die Site-Konfiguration.

Zu dieser Anleitung fragen

Schritt-für-Schritt für Einsteiger

Voraussetzungen: Lesen Sie die beiden folgenden Einsteigerhandbücher, schließen Sie die lokale Web-Einrichtung ab und öffnen Sie dieses Monorepo im Stammverzeichnis in Ihrem Editor. Webeinstellungen gehören in apps/web/.env.local; Next.js liest das Stammverzeichnis .env nicht. /dashboard im Standard-Fake-Modus ist eine Demo ohne Datenbank; /auth benötigt eine migrierte Datenbank.

Kurze Begriffe: Ein Arbeitsbereich umfasst die einzelnen Benutzer, Daten und Einstellungen eines Teams. Der Server ist das vertrauenswürdige Backend; Halten Sie Anbieterschlüssel aus Browser- und Telefoncodes fern. Eine Migration ist eine versionierte Datenbankänderung, die Tabellen erstellt oder aktualisiert. Ein KI-Modell ist der Motor, der antwortet; Der Modellkatalog ist die Liste der verfügbaren Modell-IDs und Preise des Servers. Ein Anbieter ist ein externer Dienst wie ein KI-, E-Mail- oder Abrechnungsdienst. Eine Berechtigung ist eine Bewilligung, die einem Arbeitsbereich die Nutzung einer Funktion ermöglicht. Ein Webhook ist eine Nachricht, die ein Dienst an den URL eines anderen Dienstes sendet.

1. Öffnen Sie apps/web/src/marketing/site-config.ts und ändern Sie den Produktnamen, den Slogan, die Navigationsbezeichnungen/URLs und die Support-Adresse in Werte, die Ihnen gehören.

2. Ersetzen Sie apps/web/public/og.png und aktualisieren Sie den Alternativtext und die Abmessungen in apps/web/src/marketing/seo.tsx als eine Änderung.

3. Aktualisieren Sie die Startseite, den FAQ, die Fußzeile und die soziale Vorschau. Wenn noch alter Text vorhanden ist, durchsuchen Sie dieses Repo vor der Veröffentlichung nach dem alten Namen.

Beginnen Sie für benutzerdefinierten Code mit dem bereitgestellten prompts/README.md und kopieren Sie die nächstgelegene Eingabeaufforderung: prompts/new-app-screen.md für einen App-Bildschirm oder prompts/new-landing-page.md für eine öffentliche Seite. Geben Sie Ihrem Programmieragenten für Server-, Datenbank- oder Anbieterarbeiten die Aufgabe dieses Handbuchs und bitten Sie ihn, AGENTS.md, .ai/PROJECT_CONTEXT.md und passende .ai/-Spiegel zu lesen; Überprüfen Sie die hier genannten genauen Quelldateien. Listen Sie Dateien auf und prüfen Sie sie vor der Bearbeitung. Bewahren Sie den Arbeitsbereichseigentum und die Nur-Server-Geheimnisse. und zeige dir den Unterschied. Teilen Sie ihm das gewünschte Verhalten, Eingabe- und Ausgabefelder, zulässige Rollen, erwartete Erfolge und Fehler sowie das Testkonto, den Anbieter oder das Gerät mit. Beispielwerte verwenden; Fügen Sie niemals ein echtes Geheimnis ein.

Website-Konfiguration aktualisieren

apps/web/src/marketing/site-config.ts verwaltet Markentexte, Navigations- und Fußzeilenlinks, FAQ sowie optionale Ziele für Repository und Dokumentation. Aktualisiere diese Datei, bevor du Produktnamen über Komponenten verteilst. Das Chrome des Kits verwendet diese Konfiguration; die kopierbaren Chrome-Blöcke erhalten Produktdaten über Props.

Die Asset-Familie gemeinsam ersetzen

Die gemeinsame Marke besteht aus vier Kacheln: oben links und unten rechts weiß, oben rechts und unten links grau, jeweils mit feiner Kontur. Logos in der Kopfzeile bleiben transparent; App-Symbole und Favicon behalten den abgerundeten schwarzen Hintergrund. Abgeleitete Produkte können die Marke und die zugehörigen App- und Desktop-Assets gemeinsam ersetzen.

Die gemeinsame Social Card für öffentliche Seiten heißt /og.png. Aktualisiere ihren Eintrag in marketing/seo.tsx zusammen mit Abmessungen und Alt-Text. Blogartikel verwenden eine separate Next-Bildroute.

Jede öffentliche Oberfläche prüfen

Prüfe Kopf- und Fußzeile, Kontakt, FAQ, rechtliche Seiten, lokalisierte Startseiten-Texte, Titel und Social Cards. Wähle den Marketing-Theme-Modus deines Produkts und veröffentliche nur Kontakt- und Support-Links, die funktionieren.

Einrichtung und Konfiguration

Die Marketing-Oberfläche ist an typisierte Daten gebunden statt an hartcodiertes JSX — Hero, Feature-Sektionen, Pricing, FAQ, Changelog, Showcase, Kontakt und Legal-Seiten lesen Copy und Struktur aus der Site-Konfiguration und den Content-Dateien.

MARKETING_THEME_MODE (src/theme/marketing-theme.ts) entscheidet, ob Marketing auf der gesperrten Dark-Brand des Kits bleibt, das Theme-Pack des Besuchers erbt oder ein bestimmtes Pack pinnt. Abgeleitete Produkte wählen ihren eigenen Modus.

src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"

Implementierungsablauf

Komponiere Seiten zuerst aus der Block-Bibliothek; fehlt ein Muster, schreibe einen neuen Block im selben Token-only-Stil und registriere ihn in src/kit/blocks.ts. Halte Marketing-Komponenten aus Produktflächen heraus — die beiden Chrome-Systeme bleiben getrennt.

Lokalisierte Copy fließt über die Dictionary- und Site-Content-Overlays; ergänze dort Keys, statt Komponenten pro Sprache zu forken.

Überprüfung und Fehlerbehebung

Prüfe eine Marketing-Seite bei 320px und Desktop, mit sichtbarem Tastaturfokus, unter mindestens einem hellen und einem dunklen Pack sowie mit Reduced Motion. Wenn ein Marketing-Claim eine Fähigkeit nennt, muss die verlinkte Docs-Seite existieren.