feat: add visual page builder to God Mode

- ContentLibrary component with blocks/avatars/fragments tabs
- EnhancedPageBuilder wrapper integrating visual editor
- Template library with funnel templates
- Avatar variable injection utility
- Builder route at /admin/pages/builder/[id]

Ready for page creation with visual editing.
This commit is contained in:
cawcenter
2025-12-15 13:20:26 -05:00
parent dfec95e82e
commit f658f76941
6 changed files with 494 additions and 0 deletions

View File

@@ -0,0 +1,70 @@
// Funnel page templates with pre-configured blocks
export interface BlockConfig {
type: string;
config: Record<string, any>;
}
export interface PageTemplate {
id: string;
name: string;
description: string;
category: 'funnel' | 'general' | 'ecommerce';
blocks: BlockConfig[];
}
export const FUNNEL_TEMPLATES: Record<string, PageTemplate> = {
landing_page: {
id: 'landing_page',
name: 'Landing Page',
description: 'Classic landing page with hero, features, and CTA',
category: 'funnel',
blocks: [
{
type: 'hero',
config: {
headline: 'Transform Your Business Today',
subheadline: 'Join thousands of successful entrepreneurs',
ctaText: 'Get Started Free',
ctaUrl: '#signup',
}
},
{
type: 'features',
config: {
title: 'Why Choose Us',
features: [
{ title: 'Fast Results', description: 'See results in days, not months', icon: '⚡' },
{ title: 'Expert Support', description: '24/7 dedicated support team', icon: '🎯' },
{ title: 'Proven System', description: 'Tested with 10,000+ users', icon: '✅' },
]
}
},
]
},
squeeze_page: {
id: 'squeeze_page',
name: 'Squeeze Page',
description: 'High-converting lead capture page',
category: 'funnel',
blocks: [
{
type: 'hero',
config: {
headline: 'Get Our Free Guide',
subheadline: 'Download the complete blueprint to success',
ctaText: 'Download Now',
}
},
]
},
};
export function getTemplateById(id: string): PageTemplate | undefined {
return FUNNEL_TEMPLATES[id];
}
export function getAllTemplates(): PageTemplate[] {
return Object.values(FUNNEL_TEMPLATES);
}

View File

@@ -0,0 +1,16 @@
// Avatar variable injection system
interface Avatar {
id: string;
persona_name: string;
pain_points?: string;
desires?: string;
[key: string]: any;
}
export function injectAvatarVariables(content: string, avatar: Avatar | null): string {
if (!avatar || !content) return content;
return content.replace(/\{\{avatar\.(\w+)\}\}/g, (match, fieldName) => {
return avatar[fieldName] || match;
});
}