diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,62 +1,63 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Form Builder with Layout</title>
+    <title>Site Builder Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .form-builder-container {
+        .builder-container {
             display: grid;
             grid-template-columns: 250px 1fr 300px;
             gap: 1rem;
             height: calc(100vh - 80px);
         }
-        .field-list {
+        .component-list {
             background-color: #f8fafc;
             border-right: 1px solid #e2e8f0;
             overflow-y: auto;
         }
-        .form-canvas {
+        .site-canvas {
             background-color: #ffffff;
             overflow-y: auto;
             padding: 1rem;
             min-height: 100%;
+            position: relative;
         }
-        .field-settings {
+        .component-settings {
             background-color: #f8fafc;
             border-left: 1px solid #e2e8f0;
             overflow-y: auto;
         }
-        .draggable-field {
+        .draggable-component {
             cursor: grab;
             transition: all 0.2s;
         }
-        .draggable-field:active {
+        .draggable-component:active {
             cursor: grabbing;
         }
-        .form-field {
+        .site-component {
             position: relative;
             transition: all 0.2s;
         }
-        .form-field:hover {
+        .site-component:hover {
             box-shadow: 0 0 0 2px #3b82f6;
         }
-        .form-field.selected {
+        .site-component.selected {
             box-shadow: 0 0 0 2px #3b82f6;
             background-color: #eff6ff;
         }
-        .field-actions {
+        .component-actions {
             position: absolute;
             right: 0;
             top: 0;
             display: none;
         }
-        .form-field:hover .field-actions {
+        .site-component:hover .component-actions {
             display: flex;
         }
-        .form-field.selected .field-actions {
+        .site-component.selected .component-actions {
             display: flex;
         }
         .empty-state {
@@ -66,11 +67,11 @@
             text-align: center;
             color: #64748b;
         }
-        #formPreviewModal {
+        #sitePreviewModal {
             transition: opacity 0.3s ease;
         }
-        .form-preview {
-            max-width: 600px;
+        .site-preview {
+            width: 100%;
             margin: 0 auto;
             background: white;
             border-radius: 0.5rem;
@@ -137,45 +138,88 @@
         .drop-zone.active {
             background-color: #dbeafe;
         }
+        .navbar-preview {
+            background-color: #ffffff;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .hero-preview {
+            background: linear-gradient(135deg, #6b7280, #1e40af);
+            color: white;
+        }
+        .section-preview {
+            background-color: #f9fafb;
+        }
+        .footer-preview {
+            background-color: #1f2937;
+            color: white;
+        }
+        .template-card {
+            transition: all 0.2s;
+        }
+        .template-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .color-option {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .color-option.selected {
+            border-color: #1e40af;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
     <header class="bg-white shadow-sm">
         <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
-            <h1 class="text-2xl font-bold text-gray-900">Form Builder Pro</h1>
+            <h1 class="text-2xl font-bold text-gray-900">Site Builder Pro</h1>
             <div class="flex space-x-3">
+                <button id="templatesBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    <i class="fas fa-th-large mr-2"></i> Templates
+                </button>
                 <button id="previewBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                     <i class="fas fa-eye mr-2"></i> Preview
                 </button>
-                <button id="saveBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                    <i class="fas fa-save mr-2"></i> Save Form
+                <button id="publishBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    <i class="fas fa-cloud-upload-alt mr-2"></i> Publicar
                 </button>
             </div>
         </div>
     </header>
 
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="form-builder-container">
-            <!-- Field Library -->
-            <div class="field-list p-4">
-                <h2 class="text-lg font-semibold mb-4 text-gray-800">Field Library</h2>
-                <div class="space-y-2">
-                    <div class="mb-4">
-                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Layout Elements</h3>
+        <div class="builder-container">
+            <!-- Component Library -->
+            <div class="component-list p-4">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold text-gray-800">Componentes</h2>
+                    <div class="relative">
+                        <button id="toggleComponents" class="p-1 rounded-md hover:bg-gray-200">
+                            <i class="fas fa-chevron-down"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="componentsAccordion" class="space-y-4">
+                    <div class="space-y-2">
+                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Layout</h3>
                         <div class="space-y-2">
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="container">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="container">
                                 <div class="flex items-center">
                                     <i class="fas fa-square-full text-indigo-500 mr-2"></i>
                                     <span>Container</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="row">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="row">
                                 <div class="flex items-center">
                                     <i class="fas fa-grip-lines text-indigo-500 mr-2"></i>
                                     <span>Row</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="column">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="column">
                                 <div class="flex items-center">
                                     <i class="fas fa-columns text-indigo-500 mr-2"></i>
                                     <span>Column</span>
@@ -184,67 +228,91 @@
                         </div>
                     </div>
                     
-                    <div>
-                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Form Fields</h3>
+                    <div class="space-y-2">
+                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Seções</h3>
                         <div class="space-y-2">
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="text">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="navbar">
                                 <div class="flex items-center">
-                                    <i class="fas fa-font text-blue-500 mr-2"></i>
-                                    <span>Text Input</span>
+                                    <i class="fas fa-bars text-blue-500 mr-2"></i>
+                                    <span>Navbar</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="email">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="hero">
                                 <div class="flex items-center">
-                                    <i class="fas fa-envelope text-blue-500 mr-2"></i>
-                                    <span>Email Input</span>
+                                    <i class="fas fa-star text-blue-500 mr-2"></i>
+                                    <span>Hero Section</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="number">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="section">
                                 <div class="flex items-center">
-                                    <i class="fas fa-hashtag text-blue-500 mr-2"></i>
-                                    <span>Number Input</span>
+                                    <i class="fas fa-square text-blue-500 mr-2"></i>
+                                    <span>Content Section</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="textarea">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="footer">
                                 <div class="flex items-center">
-                                    <i class="fas fa-align-left text-blue-500 mr-2"></i>
-                                    <span>Text Area</span>
+                                    <i class="fas fa-window-minimize text-blue-500 mr-2"></i>
+                                    <span>Footer</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="select">
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-2">
+                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Elementos</h3>
+                        <div class="space-y-2">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="heading">
                                 <div class="flex items-center">
-                                    <i class="fas fa-list-ul text-blue-500 mr-2"></i>
-                                    <span>Dropdown</span>
+                                    <i class="fas fa-heading text-blue-500 mr-2"></i>
+                                    <span>Heading</span>
+                                </div>
+                            </div>
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="paragraph">
+                                <div class="flex items-center">
+                                    <i class="fas fa-paragraph text-blue-500 mr-2"></i>
+                                    <span>Paragraph</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="checkbox">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="button">
                                 <div class="flex items-center">
-                                    <i class="fas fa-check-square text-blue-500 mr-2"></i>
-                                    <span>Checkbox</span>
+                                    <i class="fas fa-square text-blue-500 mr-2"></i>
+                                    <span>Button</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="radio">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="image">
+                                <div class="flex items-center">
+                                    <i class="fas fa-image text-blue-500 mr-2"></i>
+                                    <span>Image</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-2">
+                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Formulários</h3>
+                        <div class="space-y-2">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="text">
                                 <div class="flex items-center">
-                                    <i class="fas fa-dot-circle text-blue-500 mr-2"></i>
-                                    <span>Radio Buttons</span>
+                                    <i class="fas fa-font text-blue-500 mr-2"></i>
+                                    <span>Text Input</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="date">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="email">
                                 <div class="flex items-center">
-                                    <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
-                                    <span>Date Picker</span>
+                                    <i class="fas fa-envelope text-blue-500 mr-2"></i>
+                                    <span>Email Input</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="file">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="textarea">
                                 <div class="flex items-center">
-                                    <i class="fas fa-file-upload text-blue-500 mr-2"></i>
-                                    <span>File Upload</span>
+                                    <i class="fas fa-align-left text-blue-500 mr-2"></i>
+                                    <span>Text Area</span>
                                 </div>
                             </div>
-                            <div draggable="true" class="draggable-field p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="section">
+                            <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="select">
                                 <div class="flex items-center">
-                                    <i class="fas fa-square-full text-blue-500 mr-2"></i>
-                                    <span>Section Header</span>
+                                    <i class="fas fa-list-ul text-blue-500 mr-2"></i>
+                                    <span>Dropdown</span>
                                 </div>
                             </div>
                         </div>
@@ -252,60 +320,240 @@
                 </div>
             </div>
 
-            <!-- Form Canvas -->
-            <div class="form-canvas" id="formCanvas">
-                <div class="mb-6">
-                    <input type="text" id="formTitle" placeholder="Form Title" class="w-full text-2xl font-bold border-0 focus:ring-0 focus:border-blue-500 border-b-2 border-gray-200 pb-2 outline-none">
-                    <input type="text" id="formDescription" placeholder="Form Description" class="w-full text-gray-500 border-0 focus:ring-0 focus:border-blue-500 border-b border-gray-200 pb-1 outline-none mt-1">
-                </div>
-                
-                <div id="formFieldsContainer" class="drop-zone">
+            <!-- Site Canvas -->
+            <div class="site-canvas" id="siteCanvas">
+                <div id="siteContainer" class="drop-zone">
                     <div class="empty-state">
                         <i class="fas fa-mouse-pointer text-4xl mb-3 text-gray-400"></i>
-                        <h3 class="font-medium text-gray-500">Drag and drop fields here</h3>
-                        <p class="text-sm text-gray-400 mt-1">Start building your form by dragging fields from the left panel</p>
+                        <h3 class="font-medium text-gray-500">Arraste componentes aqui</h3>
+                        <p class="text-sm text-gray-400 mt-1">Comece construindo seu site arrastando componentes do painel esquerdo</p>
                     </div>
                 </div>
             </div>
 
-            <!-- Field Settings -->
-            <div class="field-settings p-4">
-                <h2 class="text-lg font-semibold mb-4 text-gray-800">Field Settings</h2>
-                <div id="fieldSettings" class="text-gray-500 italic">
-                    <p>Select a field to edit its properties</p>
+            <!-- Component Settings -->
+            <div class="component-settings p-4">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold text-gray-800">Configurações</h2>
+                    <div class="flex space-x-2">
+                        <button id="pageSettingsBtn" class="p-1 rounded-md hover:bg-gray-200" title="Configurações da Página">
+                            <i class="fas fa-cog"></i>
+                        </button>
+                        <button id="themeSettingsBtn" class="p-1 rounded-md hover:bg-gray-200" title="Configurações de Tema">
+                            <i class="fas fa-palette"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="componentSettings">
+                    <p class="text-gray-500 italic">Selecione um componente para editar suas propriedades</p>
+                </div>
+                
+                <div id="pageSettings" class="hidden">
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Título da Página</label>
+                            <input type="text" id="pageTitle" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" value="Meu Site">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Favicon</label>
+                            <div class="mt-1 flex items-center">
+                                <span class="inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100">
+                                    <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+                                    </svg>
+                                </span>
+                                <button type="button" class="ml-3 bg-white py-1 px-2 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                    Alterar
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Meta Description</label>
+                            <textarea class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" rows="3">Descrição do meu site para motores de busca</textarea>
+                        </div>
+                    </div>
+                </div>
+                
+                <div id="themeSettings" class="hidden">
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Cores do Tema</label>
+                            <div class="flex space-x-2">
+                                <div class="color-option bg-blue-600 selected" data-color="blue"></div>
+                                <div class="color-option bg-indigo-600" data-color="indigo"></div>
+                                <div class="color-option bg-purple-600" data-color="purple"></div>
+                                <div class="color-option bg-pink-600" data-color="pink"></div>
+                                <div class="color-option bg-red-600" data-color="red"></div>
+                                <div class="color-option bg-green-600" data-color="green"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Fonte Principal</label>
+                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                                <option>Inter (sans-serif)</option>
+                                <option>Roboto (sans-serif)</option>
+                                <option>Lora (serif)</option>
+                                <option>Montserrat (sans-serif)</option>
+                                <option>Open Sans (sans-serif)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Estilo de Botão</label>
+                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                                <option>Padrão</option>
+                                <option>Arredondado</option>
+                                <option>Outline</option>
+                                <option>Minimalista</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Form Preview Modal -->
-    <div id="formPreviewModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+    <!-- Templates Modal -->
+    <div id="templatesModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
         <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
             <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
             </div>
             <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
                 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div class="sm:flex sm:items-start">
                         <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Form Preview</h3>
-                            <div class="form-preview p-6">
-                                <h2 id="previewFormTitle" class="text-2xl font-bold mb-2">Form Title</h2>
-                                <p id="previewFormDescription" class="text-gray-500 mb-6">Form description goes here</p>
-                                <div id="previewFormFields"></div>
-                                <div class="mt-6">
-                                    <button type="button" class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                        Submit Form
-                                    </button>
+                            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Escolha um Template</h3>
+                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 1</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">Landing Page</h4>
+                                    <p class="text-sm text-gray-500">Página inicial simples</p>
+                                </div>
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 2</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">Portfolio</h4>
+                                    <p class="text-sm text-gray-500">Para mostrar seu trabalho</p>
+                                </div>
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 3</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">Blog</h4>
+                                    <p class="text-sm text-gray-500">Para publicar artigos</p>
+                                </div>
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 4</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">E-commerce</h4>
+                                    <p class="text-sm text-gray-500">Loja virtual simples</p>
                                 </div>
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 5</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">Serviços</h4>
+                                    <p class="text-sm text-gray-500">Para empresas de serviços</p>
+                                </div>
+                                <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer">
+                                    <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center">
+                                        <span class="text-gray-400">Template 6</span>
+                                    </div>
+                                    <h4 class="font-medium text-gray-900">Em branco</h4>
+                                    <p class="text-sm text-gray-500">Comece do zero</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button type="button" id="applyTemplate" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Aplicar Template
+                    </button>
+                    <button type="button" id="closeTemplates" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Cancelar
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Site Preview Modal -->
+    <div id="sitePreviewModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Visualização do Site</h3>
+                            <div class="site-preview">
+                                <div id="previewSiteContainer" class="w-full"></div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                     <button type="button" id="closePreview" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                        Close
+                        Fechar
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Publish Modal -->
+    <div id="publishModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                            <i class="fas fa-cloud-upload-alt text-blue-600"></i>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">Publicar Site</h3>
+                            <div class="mt-2">
+                                <div class="space-y-4">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">Domínio</label>
+                                        <div class="mt-1 flex rounded-md shadow-sm">
+                                            <input type="text" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300" placeholder="meusite">
+                                            <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">.meudominio.com</span>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">Plano</label>
+                                        <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+                                            <option>Básico (R$ 29/mês)</option>
+                                            <option>Profissional (R$ 59/mês)</option>
+                                            <option>Premium (R$ 99/mês)</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button type="button" id="confirmPublish" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Publicar Agora
+                    </button>
+                    <button type="button" id="cancelPublish" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Cancelar
                     </button>
                 </div>
             </div>
@@ -314,66 +562,88 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Form data structure
-            let formData = {
-                title: '',
-                description: '',
-                fields: []
+            // Site data structure
+            let siteData = {
+                title: 'Meu Site',
+                description: 'Descrição do meu site',
+                theme: {
+                    color: 'blue',
+                    font: 'Inter',
+                    buttonStyle: 'default'
+                },
+                pages: [
+                    {
+                        id: 'page-1',
+                        name: 'Home',
+                        components: []
+                    }
+                ],
+                currentPage: 'page-1'
             };
             
-            let selectedField = null;
-            let nextFieldId = 1;
+            let selectedComponent = null;
+            let nextComponentId = 1;
             let isResizing = false;
             let currentResizeColumn = null;
             let startX, startWidth;
             let draggedElement = null;
 
-            // Drag and drop functionality
-            const draggableFields = document.querySelectorAll('.draggable-field');
-            const formCanvas = document.getElementById('formCanvas');
-            const formFieldsContainer = document.getElementById('formFieldsContainer');
-            const fieldSettings = document.getElementById('fieldSettings');
-            const formTitle = document.getElementById('formTitle');
-            const formDescription = document.getElementById('formDescription');
-            const previewFormTitle = document.getElementById('previewFormTitle');
-            const previewFormDescription = document.getElementById('previewFormDescription');
-            const previewFormFields = document.getElementById('previewFormFields');
+            // DOM elements
+            const draggableComponents = document.querySelectorAll('.draggable-component');
+            const siteCanvas = document.getElementById('siteCanvas');
+            const siteContainer = document.getElementById('siteContainer');
+            const componentSettings = document.getElementById('componentSettings');
+            const pageSettings = document.getElementById('pageSettings');
+            const themeSettings = document.getElementById('themeSettings');
+            const previewSiteContainer = document.getElementById('previewSiteContainer');
+            const templatesBtn = document.getElementById('templatesBtn');
             const previewBtn = document.getElementById('previewBtn');
-            const saveBtn = document.getElementById('saveBtn');
-            const formPreviewModal = document.getElementById('formPreviewModal');
+            const publishBtn = document.getElementById('publishBtn');
+            const pageSettingsBtn = document.getElementById('pageSettingsBtn');
+            const themeSettingsBtn = document.getElementById('themeSettingsBtn');
+            const templatesModal = document.getElementById('templatesModal');
+            const sitePreviewModal = document.getElementById('sitePreviewModal');
+            const publishModal = document.getElementById('publishModal');
+            const closeTemplates = document.getElementById('closeTemplates');
+            const applyTemplate = document.getElementById('applyTemplate');
             const closePreview = document.getElementById('closePreview');
+            const confirmPublish = document.getElementById('confirmPublish');
+            const cancelPublish = document.getElementById('cancelPublish');
+            const colorOptions = document.querySelectorAll('.color-option');
+            const toggleComponents = document.getElementById('toggleComponents');
+            const componentsAccordion = document.getElementById('componentsAccordion');
 
-            // Set up drag events for all draggable fields
-            draggableFields.forEach(field => {
-                field.addEventListener('dragstart', function(e) {
-                    e.dataTransfer.setData('text/plain', field.dataset.type);
-                    draggedElement = field;
+            // Set up drag events for all draggable components
+            draggableComponents.forEach(component => {
+                component.addEventListener('dragstart', function(e) {
+                    e.dataTransfer.setData('text/plain', component.dataset.type);
+                    draggedElement = component;
                     e.dataTransfer.effectAllowed = 'copy';
                 });
             });
 
-            // Set up drop zones for different layout elements
+            // Set up drop zones
             function setupDropZones() {
                 // Main container drop zone
-                formFieldsContainer.addEventListener('dragover', function(e) {
+                siteContainer.addEventListener('dragover', function(e) {
                     e.preventDefault();
                     e.dataTransfer.dropEffect = 'copy';
                     this.classList.add('active');
                 });
 
-                formFieldsContainer.addEventListener('dragleave', function() {
+                siteContainer.addEventListener('dragleave', function() {
                     this.classList.remove('active');
                 });
 
-                formFieldsContainer.addEventListener('drop', function(e) {
+                siteContainer.addEventListener('drop', function(e) {
                     e.preventDefault();
                     this.classList.remove('active');
                     
-                    const fieldType = e.dataTransfer.getData('text/plain');
-                    addFieldToForm(fieldType, this);
+                    const componentType = e.dataTransfer.getData('text/plain');
+                    addComponentToSite(componentType, this);
                 });
 
-                // Container drop zones (can accept rows or fields)
+                // Container drop zones (can accept rows or components)
                 document.querySelectorAll('.layout-container').forEach(container => {
                     container.addEventListener('dragover', function(e) {
                         e.preventDefault();
@@ -389,12 +659,12 @@
                         e.preventDefault();
                         this.classList.remove('active');
                         
-                        const fieldType = e.dataTransfer.getData('text/plain');
-                        // Containers can accept rows or fields directly
-                        if (fieldType === 'row' || fieldType === 'container' || 
-                            ['text', 'email', 'number', 'textarea', 'select', 'checkbox', 
-                             'radio', 'date', 'file', 'section'].includes(fieldType)) {
-                            addFieldToForm(fieldType, this);
+                        const componentType = e.dataTransfer.getData('text/plain');
+                        // Containers can accept rows or components directly
+                        if (componentType === 'row' || componentType === 'container' || 
+                            ['navbar', 'hero', 'section', 'footer', 'heading', 'paragraph', 
+                             'button', 'image', 'text', 'email', 'textarea', 'select'].includes(componentType)) {
+                            addComponentToSite(componentType, this);
                         }
                     });
                 });
@@ -415,15 +685,15 @@
                         e.preventDefault();
                         this.classList.remove('active');
                         
-                        const fieldType = e.dataTransfer.getData('text/plain');
+                        const componentType = e.dataTransfer.getData('text/plain');
                         // Rows can only accept columns
-                        if (fieldType === 'column') {
-                            addFieldToForm(fieldType, this);
+                        if (componentType === 'column') {
+                            addComponentToSite(componentType, this);
                         }
                     });
                 });
 
-                // Column drop zones (can accept fields)
+                // Column drop zones (can accept components)
                 document.querySelectorAll('.layout-column').forEach(column => {
                     column.addEventListener('dragover', function(e) {
                         e.preventDefault();
@@ -439,60 +709,61 @@
                         e.preventDefault();
                         this.classList.remove('active');
                         
-                        const fieldType = e.dataTransfer.getData('text/plain');
-                        // Columns can accept fields but not layout elements
-                        if (['text', 'email', 'number', 'textarea', 'select', 'checkbox', 
-                            'radio', 'date', 'file', 'section'].includes(fieldType)) {
-                            addFieldToForm(fieldType, this);
+                        const componentType = e.dataTransfer.getData('text/plain');
+                        // Columns can accept components but not layout elements
+                        if (['navbar', 'hero', 'section', 'footer', 'heading', 'paragraph', 
+                            'button', 'image', 'text', 'email', 'textarea', 'select'].includes(componentType)) {
+                            addComponentToSite(componentType, this);
                         }
                     });
                 });
             }
 
-            // Add a new field to the form at a specific drop zone
-            function addFieldToForm(type, dropZone) {
+            // Add a new component to the site at a specific drop zone
+            function addComponentToSite(type, dropZone) {
                 // Remove empty state if it exists
                 const emptyState = dropZone.querySelector('.empty-state');
                 if (emptyState) {
                     emptyState.remove();
                 }
                 
-                const fieldId = `field-${nextFieldId++}`;
-                let fieldHtml = '';
+                const componentId = `component-${nextComponentId++}`;
+                let componentHtml = '';
                 let defaultSettings = {};
                 
                 switch(type) {
                     case 'container':
-                        fieldHtml = `
-                            <div class="form-field layout-container mb-4 relative drop-zone" data-id="${fieldId}" data-type="container">
+                        componentHtml = `
+                            <div class="site-component layout-container mb-4 relative drop-zone" data-id="${componentId}" data-type="container">
                                 <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
                                 <div class="layout-placeholder">
                                     <i class="fas fa-square-full text-indigo-300 text-xl mb-2"></i>
-                                    <p class="text-sm">Drop rows or fields here</p>
+                                    <p class="text-sm">Drop rows or components here</p>
                                 </div>
                             </div>
                         `;
                         defaultSettings = {
                             padding: '1rem',
-                            margin: '0 0 1rem 0'
+                            margin: '0 0 1rem 0',
+                            background: '#f8fafc'
                         };
                         break;
                         
                     case 'row':
-                        fieldHtml = `
-                            <div class="form-field layout-row mb-2 relative drop-zone" data-id="${fieldId}" data-type="row">
+                        componentHtml = `
+                            <div class="site-component layout-row mb-2 relative drop-zone" data-id="${componentId}" data-type="row">
                                 <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
@@ -509,13 +780,13 @@
                         break;
                         
                     case 'column':
-                        fieldHtml = `
-                            <div class="form-field layout-column relative drop-zone" data-id="${fieldId}" data-type="column">
+                        componentHtml = `
+                            <div class="site-component layout-column relative drop-zone" data-id="${componentId}" data-type="column">
                                 <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
@@ -526,7 +797,7 @@
                                 </div>
                                 <div class="layout-placeholder">
                                     <i class="fas fa-columns text-indigo-300 text-xl mb-2"></i>
-                                    <p class="text-sm">Drop fields here</p>
+                                    <p class="text-sm">Drop components here</p>
                                 </div>
                             </div>
                         `;
@@ -536,294 +807,417 @@
                         };
                         break;
                         
-                    case 'text':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="text">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'navbar':
+                        componentHtml = `
+                            <div class="site-component mb-4 relative" data-id="${componentId}" data-type="navbar">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Text Field</label>
-                                <input type="text" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text">
+                                <div class="navbar-preview py-4 px-6">
+                                    <div class="flex justify-between items-center">
+                                        <div class="text-xl font-bold">Logo</div>
+                                        <div class="hidden md:flex space-x-6">
+                                            <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
+                                            <a href="#" class="text-gray-700 hover:text-blue-600">Sobre</a>
+                                            <a href="#" class="text-gray-700 hover:text-blue-600">Serviços</a>
+                                            <a href="#" class="text-gray-700 hover:text-blue-600">Contato</a>
+                                        </div>
+                                        <button class="md:hidden text-gray-700">
+                                            <i class="fas fa-bars"></i>
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Text Field',
-                            placeholder: 'Enter text',
-                            required: false
+                            logoText: 'Logo',
+                            menuItems: ['Home', 'Sobre', 'Serviços', 'Contato'],
+                            backgroundColor: '#ffffff',
+                            textColor: '#374151'
                         };
                         break;
                         
-                    case 'email':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative, data-id="${fieldId}" data-type="email">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'hero':
+                        componentHtml = `
+                            <div class="site-component mb-4 relative" data-id="${componentId}" data-type="hero">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-blue-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Email Field</label>
-                                <input type="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter email">
+                                <div class="hero-preview py-16 px-6 text-center">
+                                    <h1 class="text-4xl font-bold mb-4">Título Principal</h1>
+                                    <p class="text-xl mb-8 max-w-2xl mx-auto">Uma frase impactante que resume seu negócio ou proposta de valor.</p>
+                                    <div class="flex justify-center space-x-4">
+                                        <button class="px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-sm hover:bg-gray-100">Botão Primário</button>
+                                        <button class="px-6 py-3 border border-white text-white font-medium rounded-md shadow-sm hover:bg-white hover:text-blue-600">Botão Secundário</button>
+                                    </div>
+                                </div>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Email Field',
-                            placeholder: 'Enter email',
-                            required: false
+                            title: 'Título Principal',
+                            subtitle: 'Uma frase impactante que resume seu negócio ou proposta de valor.',
+                            primaryButtonText: 'Botão Primário',
+                            secondaryButtonText: 'Botão Secundário',
+                            background: 'linear-gradient(135deg, #6b7280, #1e40af)',
+                            textColor: '#ffffff'
                         };
                         break;
                         
-                    case 'number':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="number">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'section':
+                        componentHtml = `
+                            <div class="site-component mb-4 relative" data-id="${componentId}" data-type="section">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Number Field</label>
-                                <input type="number" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter number">
+                                <div class="section-preview py-12 px-6">
+                                    <div class="max-w-4xl mx-auto text-center">
+                                        <h2 class="text-3xl font-bold mb-4">Título da Seção</h2>
+                                        <p class="text-lg text-gray-600 mb-8">Descrição da seção. Adicione conteúdo relevante aqui para informar seus visitantes.</p>
+                                        <div class="grid md:grid-cols-3 gap-8">
+                                            <div class="bg-white p-6 rounded-lg shadow-sm">
+                                                <div class="text-blue-600 text-3xl mb-4">
+                                                    <i class="fas fa-star"></i>
+                                                </div>
+                                                <h3 class="text-xl font-semibold mb-2">Recurso 1</h3>
+                                                <p class="text-gray-600">Descrição breve do recurso ou benefício.</p>
+                                            </div>
+                                            <div class="bg-white p-6 rounded-lg shadow-sm">
+                                                <div class="text-blue-600 text-3xl mb-4">
+                                                    <i class="fas fa-heart"></i>
+                                                </div>
+                                                <h3 class="text-xl font-semibold mb-2">Recurso 2</h3>
+                                                <p class="text-gray-600">Descrição breve do recurso ou benefício.</p>
+                                            </div>
+                                            <div class="bg-white p-6 rounded-lg shadow-sm">
+                                                <div class="text-blue-600 text-3xl mb-4">
+                                                    <i class="fas fa-flag"></i>
+                                                </div>
+                                                <h3 class="text-xl font-semibold mb-2">Recurso 3</h3>
+                                                <p class="text-gray-600">Descrição breve do recurso ou benefício.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Number Field',
-                            placeholder: 'Enter number',
-                            required: false
+                            title: 'Título da Seção',
+                            description: 'Descrição da seção. Adicione conteúdo relevante aqui para informar seus visitantes.',
+                            backgroundColor: '#f9fafb',
+                            textColor: '#111827',
+                            features: [
+                                { icon: 'star', title: 'Recurso 1', description: 'Descrição breve do recurso ou benefício.' },
+                                { icon: 'heart', title: 'Recurso 2', description: 'Descrição breve do recurso ou benefício.' },
+                                { icon: 'flag', title: 'Recurso 3', description: 'Descrição breve do recurso ou benefício.' }
+                            ]
                         };
                         break;
                         
-                    case 'textarea':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="textarea">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'footer':
+                        componentHtml = `
+                            <div class="site-component mb-4 relative" data-id="${componentId}" data-type="footer">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Text Area</label>
-                                <textarea rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text"></textarea>
+                                <div class="footer-preview py-12 px-6">
+                                    <div class="max-w-6xl mx-auto">
+                                        <div class="grid md:grid-cols-4 gap-8">
+                                            <div>
+                                                <h3 class="text-xl font-bold mb-4">Empresa</h3>
+                                                <p class="text-gray-400 mb-4">Uma breve descrição sobre sua empresa e o que você oferece.</p>
+                                                <div class="flex space-x-4">
+                                                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                                                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                                                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                                                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <h3 class="text-xl font-bold mb-4">Links</h3>
+                                                <ul class="space-y-2">
+                                                    <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
+                                                    <li><a href="#" class="text-gray-400 hover:text-white">Sobre</a></li>
+                                                    <li><a href="#" class="text-gray-400 hover:text-white">Serviços</a></li>
+                                                    <li><a href="#" class="text-gray-400 hover:text-white">Contato</a></li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <h3 class="text-xl font-bold mb-4">Contato</h3>
+                                                <ul class="space-y-2">
+                                                    <li class="text-gray-400">email@exemplo.com</li>
+                                                    <li class="text-gray-400">(11) 99999-9999</li>
+                                                    <li class="text-gray-400">Rua Exemplo, 123 - São Paulo, SP</li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <h3 class="text-xl font-bold mb-4">Newsletter</h3>
+                                                <p class="text-gray-400 mb-4">Assine nossa newsletter para receber atualizações.</p>
+                                                <div class="flex">
+                                                    <input type="email" placeholder="Seu email" class="px-4 py-2 w-full rounded-l-md focus:outline-none">
+                                                    <button class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700">Enviar</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+                                            <p>© 2023 Empresa. Todos os direitos reservados.</p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Text Area',
-                            placeholder: 'Enter text',
-                            required: false,
-                            rows: 3
+                            companyDescription: 'Uma breve descrição sobre sua empresa e o que você oferece.',
+                            links: ['Home', 'Sobre', 'Serviços', 'Contato'],
+                            contactInfo: {
+                                email: 'email@exemplo.com',
+                                phone: '(11) 99999-9999',
+                                address: 'Rua Exemplo, 123 - São Paulo, SP'
+                            },
+                            socialLinks: ['facebook-f', 'twitter', 'instagram', 'linkedin-in'],
+                            copyrightText: '© 2023 Empresa. Todos os direitos reservados.',
+                            backgroundColor: '#1f2937',
+                            textColor: '#ffffff'
                         };
                         break;
                         
-                    case 'select':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="select">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'heading':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="heading">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Dropdown</label>
-                                <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
-                                    <option>Option 1</option>
-                                    <option>Option 2</option>
-                                    <option>Option 3</option>
-                                </select>
+                                <h2 class="text-2xl font-bold">Título</h2>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Dropdown',
-                            options: ['Option 1', 'Option 2', 'Option 3'],
-                            required: false
+                            text: 'Título',
+                            level: 'h2',
+                            alignment: 'left',
+                            color: '#111827'
                         };
                         break;
                         
-                    case 'checkbox':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="checkbox">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'paragraph':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="paragraph">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <div class="flex items-start">
-                                    <div class="flex items-center h-5">
-                                        <input type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
-                                    </div>
-                                    <div class="ml-3 text-sm">
-                                        <label class="font-medium text-gray-700">Checkbox</label>
-                                        <p class="text-gray-500">Checkbox description</p>
-                                    </div>
+                                <p class="text-gray-700">Este é um parágrafo de texto. Você pode editar o conteúdo, tamanho, cor e alinhamento nas configurações.</p>
+                            </div>
+                        `;
+                        defaultSettings = {
+                            text: 'Este é um parágrafo de texto. Você pode editar o conteúdo, tamanho, cor e alinhamento nas configurações.',
+                            size: 'base',
+                            alignment: 'left',
+                            color: '#374151'
+                        };
+                        break;
+                        
+                    case 'button':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="button">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                                        <i class="fas fa-pencil-alt text-xs"></i>
+                                    </button>
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                        <i class="fas fa-trash-alt text-xs"></i>
+                                    </button>
                                 </div>
+                                <button class="px-4 py-2 bg-blue-600 text-white rounded-md shadow-sm hover:bg-blue-700">Botão</button>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Checkbox',
-                            description: 'Checkbox description',
-                            required: false
+                            text: 'Botão',
+                            link: '#',
+                            style: 'primary',
+                            size: 'medium',
+                            color: '#2563eb'
                         };
                         break;
                         
-                    case 'radio':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="radio">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'image':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="image">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Radio Buttons</label>
-                                <div class="mt-2 space-y-2">
-                                    <div class="flex items-center">
-                                        <input type="radio" name="radio-group" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
-                                        <label class="ml-3 block text-sm font-medium text-gray-700">Option 1</label>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <input type="radio" name="radio-group" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
-                                        <label class="ml-3 block text-sm font-medium text-gray-700">Option 2</label>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <input type="radio, name="radio-group" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
-                                        <label class="ml-3 block text-sm font-medium text-gray-700">Option 3</label>
-                                    </div>
+                                <div class="bg-gray-100 h-40 rounded-md flex items-center justify-center">
+                                    <span class="text-gray-400">Imagem</span>
                                 </div>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Radio Buttons',
-                            options: ['Option 1', 'Option 2', 'Option 3'],
-                            required: false
+                            src: '',
+                            alt: 'Imagem',
+                            width: '100%',
+                            height: 'auto',
+                            alignment: 'center'
                         };
                         break;
                         
-                    case 'date':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="date">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'text':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="text">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Date Picker</label>
-                                <input type="date" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Text Input</label>
+                                <input type="text" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text">
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'Date Picker',
+                            label: 'Text Input',
+                            placeholder: 'Enter text',
                             required: false
                         };
                         break;
                         
-                    case 'file':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="file">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'email':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="email">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">File Upload</label>
-                                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
-                                    <div class="space-y-1 text-center">
-                                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-                                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                                        </svg>
-                                        <div class="flex text-sm text-gray-600">
-                                            <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
-                                                <span>Upload a file</span>
-                                                <input type="file" class="sr-only">
-                                            </label>
-                                            <p class="pl-1">or drag and drop</p>
-                                        </div>
-                                        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
-                                    </div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Email Input</label>
+                                <input type="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter email">
+                            </div>
+                        `;
+                        defaultSettings = {
+                            label: 'Email Input',
+                            placeholder: 'Enter email',
+                            required: false
+                        };
+                        break;
+                        
+                    case 'textarea':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="textarea">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                                        <i class="fas fa-pencil-alt text-xs"></i>
+                                    </button>
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                        <i class="fas fa-trash-alt text-xs"></i>
+                                    </button>
                                 </div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Text Area</label>
+                                <textarea rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text"></textarea>
                             </div>
                         `;
                         defaultSettings = {
-                            label: 'File Upload',
+                            label: 'Text Area',
+                            placeholder: 'Enter text',
                             required: false,
-                            fileTypes: 'PNG, JPG, GIF',
-                            maxSize: '10MB'
+                            rows: 3
                         };
                         break;
                         
-                    case 'section':
-                        fieldHtml = `
-                            <div class="form-field mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${fieldId}" data-type="section">
-                                <div class="field-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
-                                    <button class="edit-field p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
+                    case 'select':
+                        componentHtml = `
+                            <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="select">
+                                <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1">
+                                    <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50">
                                         <i class="fas fa-pencil-alt text-xs"></i>
                                     </button>
-                                    <button class="delete-field p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
+                                    <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50">
                                         <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                 </div>
-                                <h3 class="text-lg font-medium text-gray-900">Section Title</h3>
-                                <p class="mt-1 text-sm text-gray-500">Section description goes here</p>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Dropdown</label>
+                                <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+                                    <option>Option 1</option>
+                                    <option>Option 2</option>
+                                    <option>Option 3</option>
+                                </select>
                             </div>
                         `;
                         defaultSettings = {
-                            title: 'Section Title',
-                            description: 'Section description goes here'
+                            label: 'Dropdown',
+                            options: ['Option 1', 'Option 2', 'Option 3'],
+                            required: false
                         };
                         break;
                 }
                 
                 // Create a temporary element to parse the HTML
                 const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = fieldHtml.trim();
-                const newField = tempDiv.firstChild;
+                tempDiv.innerHTML = componentHtml.trim();
+                const newComponent = tempDiv.firstChild;
                 
-                // Add to form
-                if (dropZone === formFieldsContainer) {
+                // Add to site
+                if (dropZone === siteContainer) {
                     // Adding to main container
-                    dropZone.appendChild(newField);
+                    dropZone.appendChild(newComponent);
                 } else {
                     // Adding to a layout element (container, row, or column)
                     const placeholder = dropZone.querySelector('.layout-placeholder');
                     if (placeholder) {
-                        dropZone.insertBefore(newField, placeholder);
+                        dropZone.insertBefore(newComponent, placeholder);
                     } else {
-                        dropZone.appendChild(newField);
+                        dropZone.appendChild(newComponent);
                     }
                 }
                 
-                // Add to form data
-                formData.fields.push({
-                    id: fieldId,
-                    type: type,
-                    settings: defaultSettings,
-                    parentId: dropZone !== formFieldsContainer ? dropZone.dataset.id : null
-                });
+                // Add to site data
+                const currentPage = siteData.pages.find(page => page.id === siteData.currentPage);
+                if (currentPage) {
+                    currentPage.components.push({
+                        id: componentId,
+                        type: type,
+                        settings: defaultSettings,
+                        parentId: dropZone !== siteContainer ? dropZone.dataset.id : null
+                    });
+                }
                 
-                // Set up field interactions
-                setupFieldInteractions(newField);
+                // Set up component interactions
+                setupComponentInteractions(newComponent);
                 
                 // Set up drop zones for the new element if it's a layout element
                 if (['container', 'row', 'column'].includes(type)) {
@@ -832,11 +1226,11 @@
                 
                 // If it's a column, set up resize handle
                 if (type === 'column') {
-                    setupColumnResize(newField);
+                    setupColumnResize(newComponent);
                 }
                 
-                // Select the new field
-                selectField(newField);
+                // Select the new component
+                selectComponent(newComponent);
             }
             
             // Set up column resize functionality
@@ -862,12 +1256,15 @@
                     currentResizeColumn.style.width = `${width}px`;
                     currentResizeColumn.style.minWidth = `${width}px`;
                     
-                    // Update form data
-                    const fieldId = currentResizeColumn.dataset.id;
-                    const fieldData = formData.fields.find(field => field.id === fieldId);
-                    if (fieldData) {
-                        fieldData.settings.width = `${width}px`;
-                        fieldData.settings.minWidth = `${width}px`;
+                    // Update site data
+                    const componentId = currentResizeColumn.dataset.id;
+                    const currentPage = siteData.pages.find(page => page.id === siteData.currentPage);
+                    if (currentPage) {
+                        const componentData = currentPage.components.find(comp => comp.id === componentId);
+                        if (componentData) {
+                            componentData.settings.width = `${width}px`;
+                            componentData.settings.minWidth = `${width}px`;
+                        }
                     }
                 }
                 
@@ -880,470 +1277,136 @@
                 }
             }
             
-            // Set up field interactions (click, delete, etc.)
-            function setupFieldInteractions(fieldElement) {
-                // Select field on click
-                fieldElement.addEventListener('click', function(e) {
-                    if (!e.target.closest('.field-actions') && !e.target.closest('.layout-actions')) {
-                        selectField(fieldElement);
+            // Set up component interactions (click, delete, etc.)
+            function setupComponentInteractions(componentElement) {
+                // Select component on click
+                componentElement.addEventListener('click', function(e) {
+                    if (!e.target.closest('.component-actions') && !e.target.closest('.layout-actions')) {
+                        selectComponent(componentElement);
                     }
                 });
                 
-                // Delete field
-                const deleteBtn = fieldElement.querySelector('.delete-field');
+                // Delete component
+                const deleteBtn = componentElement.querySelector('.delete-component');
                 if (deleteBtn) {
                     deleteBtn.addEventListener('click', function() {
-                        const fieldId = fieldElement.dataset.id;
+                        const componentId = componentElement.dataset.id;
                         
                         // Remove from DOM
-                        fieldElement.remove();
+                        componentElement.remove();
                         
-                        // Remove from form data
-                        formData.fields = formData.fields.filter(field => field.id !== fieldId);
+                        // Remove from site data
+                        const currentPage = siteData.pages.find(page => page.id === siteData.currentPage);
+                        if (currentPage) {
+                            currentPage.components = currentPage.components.filter(comp => comp.id !== componentId);
+                        }
                         
                         // Clear selection
-                        selectedField = null;
-                        renderFieldSettings(null);
+                        selectedComponent = null;
+                        renderComponentSettings(null);
                         
-                        // Show empty state if no fields left in container
+                        // Show empty state if no components left in container
                         const containers = document.querySelectorAll('.layout-container, .layout-row, .layout-column');
                         containers.forEach(container => {
                             if (container.children.length === 1 && container.querySelector('.layout-placeholder')) {
                                 container.innerHTML = `
                                     <div class="layout-placeholder">
                                         <i class="fas fa-square-full text-indigo-300 text-xl mb-2"></i>
-                                        <p class="text-sm">Drop ${container.classList.contains('layout-container') ? 'rows or fields' : 
-                                          container.classList.contains('layout-row') ? 'columns' : 'fields'} here</p>
+                                        <p class="text-sm">Drop ${container.classList.contains('layout-container') ? 'rows or components' : 
+                                          container.classList.contains('layout-row') ? 'columns' : 'components'} here</p>
                                     </div>
                                 `;
                             }
                         });
                         
-                        // Show empty state if no fields left in main container
-                        if (formFieldsContainer.children.length === 0) {
-                            formFieldsContainer.innerHTML = `
+                        // Show empty state if no components left in main container
+                        if (siteContainer.children.length === 0) {
+                            siteContainer.innerHTML = `
                                 <div class="empty-state">
                                     <i class="fas fa-mouse-pointer text-4xl mb-3 text-gray-400"></i>
-                                    <h3 class="font-medium text-gray-500">Drag and drop fields here</h3>
-                                    <p class="text-sm text-gray-400 mt-1">Start building your form by dragging fields from the left panel</p>
+                                    <h3 class="font-medium text-gray-500">Arraste componentes aqui</h3>
+                                    <p class="text-sm text-gray-400 mt-1">Comece construindo seu site arrastando componentes do painel esquerdo</p>
                                 </div>
                             `;
                         }
                     });
                 }
                 
-                // Edit field (same as select for now)
-                const editBtn = fieldElement.querySelector('.edit-field');
+                // Edit component (same as select for now)
+                const editBtn = componentElement.querySelector('.edit-component');
                 if (editBtn) {
                     editBtn.addEventListener('click', function() {
-                        selectField(fieldElement);
+                        selectComponent(componentElement);
                     });
                 }
             }
             
-            // Select a field and show its settings
-            function selectField(fieldElement) {
-                // Deselect previously selected field
-                if (selectedField) {
-                    selectedField.classList.remove('selected');
+            // Select a component and show its settings
+            function selectComponent(componentElement) {
+                // Deselect previously selected component
+                if (selectedComponent) {
+                    selectedComponent.classList.remove('selected');
                 }
                 
-                // Select new field
-                selectedField = fieldElement;
-                if (selectedField) {
-                    selectedField.classList.add('selected');
+                // Select new component
+                selectedComponent = componentElement;
+                if (selectedComponent) {
+                    selectedComponent.classList.add('selected');
                     
-                    // Scroll to show the selected field
-                    selectedField.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    // Scroll to show the selected component
+                    selectedComponent.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                     
-                    // Find the field in form data
-                    const fieldId = selectedField.dataset.id;
-                    const fieldData = formData.fields.find(field => field.id === fieldId);
+                    // Find the component in site data
+                    const componentId = selectedComponent.dataset.id;
+                    const currentPage = siteData.pages.find(page => page.id === siteData.currentPage);
+                    const componentData = currentPage ? currentPage.components.find(comp => comp.id === componentId) : null;
                     
-                    // Render field settings
-                    renderFieldSettings(fieldData);
+                    // Show component settings
+                    renderComponentSettings(componentData);
                 } else {
-                    renderFieldSettings(null);
+                    renderComponentSettings(null);
                 }
             }
             
-            // Render field settings panel
-            function renderFieldSettings(fieldData) {
-                if (!fieldData) {
-                    fieldSettings.innerHTML = '<p class="text-gray-500 italic">Select a field to edit its properties</p>';
+            // Render component settings panel
+            function renderComponentSettings(componentData) {
+                // Hide page and theme settings
+                pageSettings.classList.add('hidden');
+                themeSettings.classList.add('hidden');
+                componentSettings.classList.remove('hidden');
+                
+                if (!componentData) {
+                    componentSettings.innerHTML = '<p class="text-gray-500 italic">Selecione um componente para editar suas propriedades</p>';
                     return;
                 }
                 
                 let settingsHtml = '';
                 
-                switch(fieldData.type) {
+                switch(componentData.type) {
                     case 'container':
                         settingsHtml = `
                             <div class="space-y-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Padding</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="padding" value="${fieldData.settings.padding}">
+                                    <input type="text" class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="padding" value="${componentData.settings.padding}">
                                 </div>
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Margin</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="margin" value="${fieldData.settings.margin}">
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'row':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Number of Columns</label>
-                                    <select class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="columns">
-                                        <option value="1" ${fieldData.settings.columns === 1 ? 'selected' : ''}>1 Column</option>
-                                        <option value="2" ${fieldData.settings.columns === 2 ? 'selected' : ''}>2 Columns</option>
-                                        <option value="3" ${fieldData.settings.columns === 3 ? 'selected' : ''}>3 Columns</option>
-                                        <option value="4" ${fieldData.settings.columns === 4 ? 'selected' : ''}>4 Columns</option>
-                                    </select>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Gap Between Columns</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="gap" value="${fieldData.settings.gap}">
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'column':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Width</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="width, value="${fieldData.settings.width}">
+                                    <input type="text" class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="margin" value="${componentData.settings.margin}">
                                 </div>
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Width</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="minWidth" value="${fieldData.settings.minWidth}">
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Background Color</label>
+                                    <input type="color" class="component-setting w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-setting="background" value="${componentData.settings.background}">
                                 </div>
                             </div>
                         `;
                         break;
                         
-                    case 'text':
-                    case 'email':
-                    case 'number':
-                    case 'date':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="label" value="${fieldData.settings.label}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Placeholder</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="placeholder" value="${fieldData.settings.placeholder || ''}">
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" class="field-setting h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-setting="required" ${fieldData.settings.required ? 'checked' : ''}>
-                                    <label class="ml-2 block text-sm text-gray-700">Required</label>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'textarea':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="label" value="${fieldData.settings.label}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Placeholder</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="placeholder" value="${fieldData.settings.placeholder || ''}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Rows</label>
-                                    <input type="number" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="rows" value="${fieldData.settings.rows || 3}">
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" class="field-setting h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-setting="required" ${fieldData.settings.required ? 'checked' : ''}>
-                                    <label class="ml-2 block text-sm text-gray-700">Required</label>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'select':
-                    case 'radio':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="label" value="${fieldData.settings.label}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Options (one per line)</label>
-                                    <textarea class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="options" rows="4">${fieldData.settings.options.join('\n')}</textarea>
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" class="field-setting h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-setting="required" ${fieldData.settings.required ? 'checked' : ''}>
-                                    <label class="ml-2 block text-sm text-gray-700">Required</label>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'checkbox':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="label" value="${fieldData.settings.label}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                                    <input type="text, class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="description" value="${fieldData.settings.description || ''}">
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" class="field-setting h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-setting="required" ${fieldData.settings.required ? 'checked' : ''}>
-                                    <label class="ml-2 block text-sm text-gray-700">Required</label>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'file':
-                        settingsHtml = `
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Label</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="label" value="${fieldData.settings.label}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Accepted File Types</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="fileTypes" value="${fieldData.settings.fileTypes || ''}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Maximum File Size</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="maxSize" value="${fieldData.settings.maxSize || ''}">
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" class="field-setting h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-setting="required" ${fieldData.settings.required ? 'checked' : ''}>
-                                    <label class="ml-2 block text-sm text-gray-700">Required</label>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'section':
+                    case 'row':
                         settingsHtml = `
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
-                                    <input type="text" class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="title" value="${fieldData.settings.title}">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                                    <textarea class="field-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="description">${fieldData.settings.description || ''}</textarea>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                }
-                
-                fieldSettings.innerHTML = settingsHtml;
-                
-                // Set up event listeners for settings changes
-                const settingInputs = fieldSettings.querySelectorAll('.field-setting');
-                settingInputs.forEach(input => {
-                    if (input.type === 'checkbox') {
-                        input.addEventListener('change', function() {
-                            updateFieldSetting(fieldData.id, input.dataset.setting, input.checked);
-                        });
-                    } else {
-                        input.addEventListener('change', function() {
-                            updateFieldSetting(fieldData.id, input.dataset.setting, input.value);
-                        });
-                        
-                        input.addEventListener('keyup', function() {
-                            updateFieldSetting(fieldData.id, input.dataset.setting, input.value);
-                        });
-                    }
-                });
-            }
-            
-            // Update a field setting and refresh the field display
-            function updateFieldSetting(fieldId, settingName, settingValue) {
-                // Find the field in form data
-                const fieldData = formData.fields.find(field => field.id === fieldId);
-                if (!fieldData) return;
-                
-                // Update the setting
-                if (settingName === 'options') {
-                    // For options, split by newline
-                    fieldData.settings[settingName] = settingValue.split('\n').filter(opt => opt.trim() !== '');
-                } else if (settingName === 'required' || settingName === 'rows' || settingName === 'columns') {
-                    // For checkboxes and numbers, convert to boolean/number
-                    fieldData.settings[settingName] = settingName === 'required' 
-                        ? settingValue
-                        : parseInt(settingValue);
-                } else {
-                    // For everything else, just set the value
-                    fieldData.settings[settingName] = settingValue;
-                }
-                
-                // Refresh the field display
-                refreshFieldDisplay(fieldId);
-            }
-            
-            // Refresh the display of a field based on its current settings
-            function refreshFieldDisplay(fieldId) {
-                const fieldElement = document.querySelector(`.form-field[data-id="${fieldId}"]`);
-                if (!fieldElement) return;
-                
-                const fieldData = formData.fields.find(field => field.id === fieldId);
-                if (!fieldData) return;
-                
-                switch(fieldData.type) {
-                    case 'container':
-                        fieldElement.style.padding = fieldData.settings.padding;
-                        fieldElement.style.margin = fieldData.settings.margin;
-                        break;
-                        
-                    case 'row':
-                        // Update row columns if needed
-                        if (fieldData.settings.columns) {
-                            // In a real implementation, you would adjust the columns here
-                        }
-                        break;
-                        
-                    case 'column':
-                        fieldElement.style.width = fieldData.settings.width;
-                        fieldElement.style.minWidth = fieldData.settings.minWidth;
-                        break;
-                        
-                    case 'text':
-                    case 'email':
-                    case 'number':
-                    case 'date':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        fieldElement.querySelector('input').placeholder = fieldData.settings.placeholder || '';
-                        if (fieldData.settings.required) {
-                            fieldElement.querySelector('label').innerHTML += ' <span class="text-red-500">*</span>';
-                        }
-                        break;
-                        
-                    case 'textarea':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        fieldElement.querySelector('textarea').placeholder = fieldData.settings.placeholder || '';
-                        fieldElement.querySelector('textarea').rows = fieldData.settings.rows || 3;
-                        if (fieldData.settings.required) {
-                            fieldElement.querySelector('label').innerHTML += ' <span class="text-red-500">*</span>';
-                        }
-                        break;
-                        
-                    case 'select':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        if (fieldData.settings.required) {
-                            fieldElement.querySelector('label').innerHTML += ' <span class="text-red-500">*</span>';
-                        }
-                        
-                        const select = fieldElement.querySelector('select');
-                        select.innerHTML = '';
-                        fieldData.settings.options.forEach(option => {
-                            const optionElement = document.createElement('option');
-                            optionElement.textContent = option;
-                            select.appendChild(optionElement);
-                        });
-                        break;
-                        
-                    case 'checkbox':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        const description = fieldElement.querySelector('p.text-gray-500');
-                        if (description) {
-                            description.textContent = fieldData.settings.description || '';
-                        }
-                        break;
-                        
-                    case 'radio':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        if (fieldData.settings.required) {
-                            fieldElement.querySelector('label').innerHTML += ' <span class="text-red-500">*</span>';
-                        }
-                        
-                        const radioContainer = fieldElement.querySelector('.space-y-2');
-                        radioContainer.innerHTML = '';
-                        fieldData.settings.options.forEach((option, index) => {
-                            const radioDiv = document.createElement('div');
-                            radioDiv.className = 'flex items-center';
-                            radioDiv.innerHTML = `
-                                <input type="radio" name="radio-group" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
-                                <label class="ml-3 block text-sm font-medium text-gray-700">${option}</label>
-                            `;
-                            radioContainer.appendChild(radioDiv);
-                        });
-                        break;
-                        
-                    case 'file':
-                        fieldElement.querySelector('label').textContent = fieldData.settings.label;
-                        const fileDesc = fieldElement.querySelector('p.text-xs.text-gray-500');
-                        if (fileDesc) {
-                            fileDesc.textContent = `${fieldData.settings.fileTypes || 'Any file'} up to ${fieldData.settings.maxSize || '10MB'}`;
-                        }
-                        break;
-                        
-                    case 'section':
-                        fieldElement.querySelector('h3').textContent = fieldData.settings.title;
-                        fieldElement.querySelector('p').textContent = fieldData.settings.description || '';
-                        break;
-                }
-            }
-            
-            // Form title and description updates
-            formTitle.addEventListener('input', function() {
-                formData.title = this.value;
-            });
-            
-            formDescription.addEventListener('input', function() {
-                formData.description = this.value;
-            });
-            
-            // Preview button
-            previewBtn.addEventListener('click', function() {
-                previewFormTitle.textContent = formData.title || 'Form Title';
-                previewFormDescription.textContent = formData.description || 'Form description goes here';
-                
-                // Generate preview fields
-                previewFormFields.innerHTML = '';
-                
-                // Helper function to recursively render fields with their hierarchy
-                function renderFields(fields, parentId = null) {
-                    fields.filter(field => field.parentId === parentId).forEach(field => {
-                        let fieldHtml = '';
-                        
-                        switch(field.type) {
-                            case 'container':
-                                fieldHtml = `<div class="mb-4 p-4 bg-gray-50 rounded" style="padding: ${field.settings.padding}; margin: ${field.settings.margin}">`;
-                                fieldHtml += renderFields(formData.fields, field.id);
-                                fieldHtml += `</div>`;
-                                break;
-                                
-                            case 'row':
-                                fieldHtml = `<div class="grid grid-cols-${field.settings.columns || 1} gap-${field.settings.gap || '0.5rem'} mb-4">`;
-                                fieldHtml += renderFields(formData.fields, field.id);
-                                fieldHtml += `</div>`;
-                                break;
-                                
-                            case 'column':
-                                fieldHtml = `<div style="width: ${field.settings.width || '100%'}; min-width: ${field.settings.minWidth || '200px'}">`;
-                                fieldHtml += renderFields(formData.fields, field.id);
-                                fieldHtml += `</div>`;
-                                break;
-                                
-                            case 'text':
-                            case 'email':
-                            case 'number':
-                            case 'date':
-                                fieldHtml = `
-                                    <div class="mb-4">
-                                        <label class="block text-sm font-medium text-gray-700 mb-1">${field.settings.label}
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Number of Columns</label>
+                                    <select class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="columns">
+                                        <option value="1" ${componentData.settings.columns === 1 ? 'selected' : ''}>1 Column</
 </html>
\ No newline at end of file
