Add Craft.js site builder (v2) - complete rebuild from GrapesJS
Rebuilt the visual site builder from scratch using Craft.js, React 18, and TypeScript. The new editor renders directly in the DOM (no iframe), supports 40+ components, multi-page with shared header/footer, 16 templates, full-spectrum color/gradient controls, custom head code injection, save/publish workflow, and auto-save. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
86
craft/src/constants/presets.ts
Normal file
86
craft/src/constants/presets.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
export const TEXT_COLORS = [
|
||||
{ label: 'Dark', value: '#1f2937' },
|
||||
{ label: 'Medium', value: '#374151' },
|
||||
{ label: 'Light', value: '#6b7280' },
|
||||
{ label: 'White', value: '#ffffff' },
|
||||
{ label: 'Blue', value: '#3b82f6' },
|
||||
{ label: 'Green', value: '#10b981' },
|
||||
{ label: 'Red', value: '#ef4444' },
|
||||
{ label: 'Orange', value: '#f59e0b' },
|
||||
];
|
||||
|
||||
export const BG_COLORS = [
|
||||
{ label: 'White', value: '#ffffff' },
|
||||
{ label: 'Off-white', value: '#f9fafb' },
|
||||
{ label: 'Dark', value: '#1f2937' },
|
||||
{ label: 'Darker', value: '#111827' },
|
||||
{ label: 'Blue', value: '#3b82f6' },
|
||||
{ label: 'Green', value: '#10b981' },
|
||||
{ label: 'Purple', value: '#8b5cf6' },
|
||||
{ label: 'Pink', value: '#ec4899' },
|
||||
];
|
||||
|
||||
export const FONT_FAMILIES = [
|
||||
{ label: 'Inter', value: 'Inter, sans-serif' },
|
||||
{ label: 'Roboto', value: 'Roboto, sans-serif' },
|
||||
{ label: 'Open Sans', value: 'Open Sans, sans-serif' },
|
||||
{ label: 'Poppins', value: 'Poppins, sans-serif' },
|
||||
{ label: 'Montserrat', value: 'Montserrat, sans-serif' },
|
||||
{ label: 'Playfair', value: 'Playfair Display, serif' },
|
||||
{ label: 'Merriweather', value: 'Merriweather, serif' },
|
||||
{ label: 'Source Code', value: 'Source Code Pro, monospace' },
|
||||
];
|
||||
|
||||
export const TEXT_SIZES = [
|
||||
{ label: 'XS', value: '12px' },
|
||||
{ label: 'S', value: '14px' },
|
||||
{ label: 'M', value: '16px' },
|
||||
{ label: 'L', value: '20px' },
|
||||
{ label: 'XL', value: '24px' },
|
||||
{ label: '2XL', value: '32px' },
|
||||
];
|
||||
|
||||
export const FONT_WEIGHTS = [
|
||||
{ label: 'Light', value: '300' },
|
||||
{ label: 'Normal', value: '400' },
|
||||
{ label: 'Medium', value: '500' },
|
||||
{ label: 'Semi', value: '600' },
|
||||
{ label: 'Bold', value: '700' },
|
||||
];
|
||||
|
||||
export const SPACING_PRESETS = [
|
||||
{ label: 'None', value: '0' },
|
||||
{ label: 'S', value: '8px' },
|
||||
{ label: 'M', value: '16px' },
|
||||
{ label: 'L', value: '24px' },
|
||||
{ label: 'XL', value: '32px' },
|
||||
];
|
||||
|
||||
export const RADIUS_PRESETS = [
|
||||
{ label: 'None', value: '0' },
|
||||
{ label: 'S', value: '4px' },
|
||||
{ label: 'M', value: '8px' },
|
||||
{ label: 'L', value: '16px' },
|
||||
{ label: 'Full', value: '9999px' },
|
||||
];
|
||||
|
||||
export const GRADIENTS = [
|
||||
{ label: 'Purple Dream', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ label: 'Pink Sunset', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
||||
{ label: 'Ocean Blue', value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||||
{ label: 'Green Teal', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||
{ label: 'Warm Sunrise', value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
||||
{ label: 'Soft Pastel', value: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' },
|
||||
{ label: 'Peach', value: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
|
||||
{ label: 'Warm Sand', value: 'linear-gradient(135deg, #f5af19 0%, #f12711 100%)' },
|
||||
{ label: 'Dark Purple', value: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' },
|
||||
{ label: 'Dark Blue', value: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' },
|
||||
{ label: 'Dark Gray', value: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)' },
|
||||
{ label: 'None', value: 'none' },
|
||||
];
|
||||
|
||||
export const DEVICE_WIDTHS: Record<string, string> = {
|
||||
desktop: '100%',
|
||||
tablet: '768px',
|
||||
mobile: '375px',
|
||||
};
|
||||
Reference in New Issue
Block a user