Pages
Construis ton site comme tu produis ton contenu. Builder visuel, blocs typees, versioning par revision, variables prospect, sessions dediees.
Vue d'ensemble
Pages est le builder visuel de Kernel. Tu construis ton site (landing, presentation, blog) en composant des blocs typees. Chaque page est versionnee (revision git-like): tu peux revenir en arriere, comparer, publier une revision specifique.
Les variables {{prospect.first_name}}, {{prospect.company}}, {{audit.summary}} permettent de personnaliser une presentation pour un prospect specifique. Tu generes une session de presentation, le prospect ouvre un lien dedie qui affiche sa version.
Le rendu est servi par un Astro renderer DB-driven. Le SaaS theme engine (S1-S11) gere les variables design (couleurs, fonts, spacings) par workspace. Chaque workspace peut avoir un domaine custom et un branding propre.
Ce que le module fait
Editeur 3 modes
Le builder propose un toggle [Visuel | IA | Code] dans la toolbar. Visuel = drag-drop + inspecteur. IA = chat + textarea pour generer une page complete from prompt. Code = editeur Monaco sur les blocs HTML personnalises. Les 3 modes partagent le meme AST de blocs (un seul state, undo/redo continu).
Mode IA : generation from prompt
Decris la page que tu veux (ex: 'page de vente pour mon coaching 6 000€'), l'IA genere 6-12 blocs avec copy pret a editer. La sortie est structuree automatiquement. Disponible aussi via /pages/new path 'IA' pour creer une page de zero.
Mode Code : HTML custom
Bloc rawHtml accessible a tous les owners (avant : super_admin only). Editeur Monaco avec syntax highlight. Sanitize-html au save + au render : <script>, on* handlers et javascript: URLs strippes. Iframes whitelist YouTube/Vimeo/Spotify/Google Docs. Variables Liquid : {{ workspace.name }}, {{ page.title }}.
/pages/new : 3 chemins
Page picker avec 3 cartes : Vide (form classique), Template (5 templates curated : landing coaching, a propos, pricing 3 tiers, contact, blog post), IA (prompt -> page generee directement). Chaque chemin redirige direct dans l'editeur.
Blocs typees
47 types : hero, piliers, founder, ctaFinal, pricing, FAQ, testimonials, rawHtml, container, columns, etc. Chaque bloc a son schema Zod et son rendu Astro.
Versioning git-like
Chaque page a un historique de revisions. Tu publies une revision donnee. Tu peux revenir, comparer, brancher.
Variables prospect
Tu inseres {{var}} dans le content. Tu crees une session par prospect: a l'ouverture, les variables sont resolues. Parfait pour les presentations 1:1.
Sessions de presentation
/p/<session_token> sert une version unique de la page pour un prospect. Tracking de la visite, du temps, des sections vues.
SaaS theme engine + wizard
Tokens design (couleurs, fonts, radius, spacings) appliques par workspace. Le wizard /settings/brand/wizard les fixe en 5 etapes (voir module Theme). Override directement dans /pages/[id]/theme.
Per-workspace branding et SEO
Member app + Pages + Blog rendent le branding et le SEO du workspace en cours. Bucket page-assets, og_image_path par page.
Domaines custom
Vercel Domains API, ajout en quelques clics. Verification automatique, certificat managed.
Comment on l'utilise
- 01
Cree une page
/pages/new. Tu choisis un template (landing, presentation, blog post) ou tu pars vide.
- 02
Compose
Tu drag-drop des blocs. Tu remplis le contenu, tu vois la preview en live.
- 03
Theme
Tu ajustes les variables design dans /theme. Couleurs, fonts, spacings.
- 04
Variables
Tu inseres {{prospect.first_name}} la ou tu veux personnaliser.
- 05
Publie
Tu cliques Publier. La revision passe en live sur ton domaine.
- 06
Sessions
Pour une presentation 1:1, tu generes une session liee a un contact CRM.
Apercu
Routes dans Kernel
- /pages
- /pages/[id]
- /pages/[id]/revisions
- /p/[session]