Fábrica de Sites

Sistema completo para criação e padronização de novos sites na plataforma multi-tenant.

Visão Geral

A Fábrica de Sites é o ecossistema responsável por definir como cada novo site (tenant) será criado. Ela reúne quatro pilares que trabalham juntos:

Templates

Templates definem a estrutura visual de cada site: header, body, footer, CSS e JavaScript. São globais (compartilhados entre todos os tenants) e podem ser associados a um Starter Kit.

Seleção do Starter

O primeiro passo ao criar um template é escolher um Starter (modelo base) — um conjunto de HTML/CSS pré-pronto que serve de ponto de partida:

• Institucional — Layout clássico com navbar fixa, hero e seções
• E-commerce — Topbar de contato, busca centralizada e mini-cart
• Magazine — Logo centralizado, data e redes sociais no topo
• Landing Page — Header transparente focado em conversão
• Minimalista — Clean, foco em espaço branco
• Com Topbar — Barra profissional superior + menu
• Dark Elegante — Tema escuro com acentos dourados
• Glassmorphism — Efeito vidro fosco moderno
• Gradient Hero — Header com gradientes vibrantes
• Sidebar Fixa — Sidebar lateral fixa à esquerda

Formulário de Criação

Após escolher o starter, o formulário de criação pede:

• Nome — Nome de identificação do template
• Starter Kit — Kit ao qual o template pertence (ou "Universal" para nenhum). Há um botão + para criar um kit rapidamente sem sair da tela
• Status — Ativo/Inativo
• Padrão — Se é o template padrão para novos sites
• Componentes do Site — Seleção dos componentes que serão inseridos automaticamente no HTML (veja seção abaixo)

Editor

O editor tem layout de três colunas:

• Esquerda — Configurações do template (nome, kit, status) — painel colapsável
• Centro — Editor de código com CodeMirror, dividido em abas:
  • Header — HTML do cabeçalho (navbar, logo, menus, busca)
  • Body — Estrutura do conteúdo (onde [[CONTENT]] será substituído pelo conteúdo da página)
  • Footer — HTML do rodapé (links, newsletter, redes sociais)
  • CSS — Estilos do template (aceita variáveis Blade como {{ $primaryColor }})
  • JS — Scripts do template
• Direita — Painéis de documentação:
  • Variáveis Disponíveis — Lista de variáveis Blade do tenant
  • Componentes do Site — Inserção, navegação e remoção de componentes (veja seção abaixo)

A barra de ações do editor inclui: badge do nome/kit, botão Preview (abre em nova janela), Reset (restaura ao HTML original do starter) e Salvar (ou Ctrl+S).

Variáveis Blade

O HTML do template é compilado pelo Blade com dados reais do tenant. Variáveis disponíveis:

{{ $siteName }}          — Nome do site
{{ $siteLogo }}          — URL do logo
{{ $sitePhone }}         — Telefone principal
{{ $siteWhatsapp }}      — Número do WhatsApp
{{ $siteWhatsappLink }}  — Link completo wa.me
{{ $siteEmail }}         — E-mail principal
{{ $siteFullAddress }}   — Endereço completo
{{ $primaryColor }}      — Cor primária (#hex)
{{ $secondaryColor }}    — Cor secundária
{{ $footerCopyright }}   — Texto do copyright
...e mais ~40 variáveis de identidade, contato, redes sociais, SEO

Componentes do Site

Componentes são blocos funcionais que definem quais links e elementos existirão no HTML do template. Cada componente é renderizado automaticamente pelo Laravel com dados reais do tenant.

Os componentes aparecem em dois momentos:

1. Na criação do template — como checkboxes para seleção inicial (inseridos automaticamente no HTML do starter)
2. No editor — no painel lateral "Componentes do Site", com controles para inserir, navegar e remover

Catálogo de Componentes

Todos os componentes disponíveis, organizados por grupo:

Inserção na Criação

Na tela de criação do template, os componentes aparecem como checkboxes organizados por grupo. Ao marcar um componente e criar o template, ele é inserido automaticamente no HTML do starter na posição adequada:

• Menus de Módulos, Links e Páginas — inseridos dentro dos <ul class="navbar-nav"> do header
• Utilitários — inseridos na área de ações do header
• Rodapé — inseridos antes do </footer>

Inserção no Editor

No painel lateral "Componentes do Site" do editor, cada componente mostra sua tag Blade e um botão "Inserir". O posicionamento é inteligente:

• Menus e Links — inseridos automaticamente dentro de todos os <ul class="navbar-nav"> encontrados no header (suporta múltiplos menus, como desktop e mobile)
• Rodapé — inserido antes do </footer>
• Utilitários — inseridos na posição do cursor no editor
• Modo cursor — se você clicou no editor nos últimos 10 segundos, qualquer componente é inserido na posição do cursor (ignorando o posicionamento automático)

Detecção e Navegação

O sistema detecta automaticamente quais componentes já estão presentes no HTML, escaneando o conteúdo de todas as abas (header, body, footer). O status de cada componente atualiza em tempo real conforme o HTML é editado.

• Componentes presentes aparecem com badge verde "Inserido"
• Se houver múltiplas ocorrências (ex: mesmo menu no header desktop e mobile), exibe a contagem: "2x Inserido"
• Clicar no badge navega até o componente no editor, com highlight verde na linha
• Se houver múltiplas ocorrências, cada clique cicla para a próxima

Remoção

O botão × ao lado do badge remove uma ocorrência por vez — a que está no ciclo de navegação atual. Ao remover:

1. Navega até a ocorrência no editor e ativa a aba correta
2. Destaca em vermelho as linhas que serão removidas
3. Remove o componente e o comentário Blade acima dele (se existir)
4. Atualiza a contagem automaticamente

Starter Kits

Starter Kits são pacotes pré-configurados que definem como um novo site será criado. Cada kit reúne:

• Template padrão — o template visual aplicado automaticamente
• Módulos — quais funcionalidades o site terá (blog, imóveis, veículos, etc.)
• Páginas Modelo — conteúdo pré-pronto importado para o novo site

Informações do Kit

Cada kit tem um nome, ícone (FontAwesome) e cor que formam sua identidade visual. Esses dados aparecem na seleção ao criar um novo site. O formulário inclui preview em tempo real do ícone com a cor selecionada.

Template Padrão

No formulário do kit, seleciona-se o template padrão — o template que será aplicado automaticamente quando um site for criado com este kit.

Ao selecionar um template, o sistema exibe um painel de componentes detectados mostrando todos os componentes presentes no HTML do template. Esse painel é a base da Validação Cruzada.

Templates Vinculados

Um kit pode ter múltiplos templates associados (cada template define seu segment_id no editor). O template padrão é o aplicado automaticamente; os demais ficam disponíveis para o tenant escolher depois. Na edição do kit, os templates vinculados aparecem como badges com link direto para o editor.

Módulos

A seção de módulos lista todos os módulos disponíveis, organizados por categoria (Conteúdo, Funcionalidades, E-commerce, etc.). Para cada módulo:

• Checkbox — ativa/desativa o módulo para sites deste kit
• Switch "Obrig." — marca como obrigatório (ativado automaticamente, o administrador do site não pode desativá-lo)

Módulos selecionados aparecem com borda azul. Ao desmarcar um módulo, o switch obrigatório é desabilitado automaticamente.

Páginas Modelo

Mesma lógica dos módulos: checkboxes + switch "Obrig." para cada página modelo disponível. Páginas selecionadas ficam com borda verde. Páginas que usam Page Builder exibem badge "PB".

Filtragem de Templates por Kit

Quando um tenant pertence a um Starter Kit, a tela de seleção de templates no painel do tenant exibe apenas:

• Templates vinculados ao kit do tenant
• Templates universais (sem kit associado)

Se o tenant não tiver kit, todos os templates ativos são exibidos.

Criação Rápida

É possível criar um Starter Kit sem sair do formulário de criação/edição de template. O botão + ao lado do seletor abre um modal para criar rapidamente um kit com nome, ícone e cor. Depois é possível editar o kit completo com módulos e páginas.

Validação Cruzada

A Fábrica de Sites possui um sistema de validação cruzada em tempo real que garante a consistência entre template, módulos e páginas modelo dentro de um Starter Kit.

Como Funciona

Ao editar um Starter Kit e selecionar (ou trocar) o template padrão, o sistema automaticamente:

1. Detecta quais componentes estão presentes no HTML do template
2. Lista cada componente com seu ícone, nome e grupo
3. Cruza os componentes com os módulos e páginas selecionados no kit
4. Exibe alertas para inconsistências

Alertas de Inconsistência

O painel de validação exibe avisos amarelos em dois cenários:

No final do painel, um resumo lista todas as pendências:

• "Módulos no template sem ativar:" — nomes dos módulos faltantes
• "Páginas no template sem incluir:" — nomes das páginas faltantes

Atualização em Tempo Real

A validação atualiza automaticamente quando:

• O template padrão é trocado
• Um módulo é marcado ou desmarcado
• Uma página modelo é marcada ou desmarcada

Páginas Modelo

Páginas Modelo (Starter Pages) são páginas pré-configuradas com conteúdo pronto, importadas automaticamente para cada novo site vinculado ao kit.

Tipos de Conteúdo

• WYSIWYG — conteúdo em HTML simples (editor visual)
• Page Builder — conteúdo em blocos configuráveis (hero, features, CTA, etc.). Exibidas com badge "PB" nas listagens

Campos da Página

• Nome Interno — identificação no painel (ex: "Página Sobre Padrão")
• Título da Página — título que aparece no site (ex: "Sobre Nós") — a URL é gerada automaticamente a partir deste campo
• Resumo — para listagens e cards
• Ícone — FontAwesome, com preview em tempo real
• Ordem — define a prioridade na importação

Vinculação a Kits

Cada página modelo pode estar vinculada a um ou mais kits (relação muitos-para-muitos). A vinculação pode ser feita em dois lugares:

• No formulário da página modelo — selecionando quais kits a incluem
• No formulário do Starter Kit — selecionando quais páginas modelo incluir

Páginas do Sistema

A plataforma já vem com 3 páginas modelo pré-configuradas (criadas automaticamente na instalação):

O que é Importado

Ao criar um site, para cada página modelo do kit:

• Cria uma Page no tenant com título, conteúdo, layout e configurações de SEO
• Gera o url_rewrite (URL amigável) automaticamente
• Se usa Page Builder, copia todos os blocos com suas configurações
• Configurações como featured_on_home e sort_order são preservadas

Preview

O sistema de preview renderiza o template completo com dados fictícios, permitindo visualizar o resultado antes de publicar.

Como Funciona

1. O HTML do template (header + body + footer) é concatenado
2. O placeholder [[CONTENT]] é substituído pelo conteúdo de uma página real do site modelo
3. Componentes Blade (<x-front.*>) são substituídos por mocks visuais estáticos
4. O Blade é compilado com variáveis mock (nome, telefone, cores, etc.)
5. O CSS é compilado separadamente com as mesmas variáveis

Mocks dos Componentes

Cada componente tem um mock visual específico no preview:

• category-menu — Gera categorias fictícias baseadas no tipo do módulo (ex: type="blog" mostra "Blog" com subcategorias "Notícias", "Dicas")
• search-box — Campo de busca desabilitado
• mini-cart — Ícone de carrinho com badge "0"
• newsletter-form — Formulário de e-mail desabilitado
• language-switcher — Botão "PT" com bandeira

Site Modelo

A plataforma possui um tenant especial chamado "Site Modelo" (is_model = true). Esse tenant faz parte da infraestrutura do sistema e é criado automaticamente na instalação.

Ele é usado como fonte padrão de dados para o preview de templates e páginas modelo. Ao abrir o preview:

• O sistema seleciona automaticamente o Site Modelo como tenant
• As páginas do Site Modelo ficam disponíveis para testar o [[CONTENT]]
• Você pode trocar para outro tenant no seletor do preview para testar diferentes cenários

Dados Iniciais

A plataforma vem com dados pré-configurados criados automaticamente na instalação (seeders). Esses dados formam a base para o funcionamento da Fábrica de Sites:

Site Modelo

Um tenant especial chamado "Site Modelo" é criado com domínio modelo.localhost. Este tenant serve como ambiente de referência para previews de templates e páginas modelo. Não pode ser excluído (veja Preview).

Módulos

14 módulos são cadastrados, divididos em categorias:

• Essenciais (sempre ativos) — Páginas, Configurações, Mídia, Templates
• Conteúdo — Blog, Portfólio, Depoimentos, FAQ, Equipe, Downloads
• Comércio — Produtos, Imóveis, Veículos
• Interação — Contato, Orçamento, Newsletter, Comentários
• Visual — Sliders, Anúncios

Starter Kits Padrão

5 kits pré-configurados, cada um com módulos obrigatórios e opcionais específicos:

Páginas Modelo do Sistema

3 páginas universais (Home, Sobre e Contato) — detalhadas na seção Páginas Modelo.

Fluxo Completo

Resumo do fluxo ponta a ponta: