Converta Requisitos em Instruções de Build

**ANÁLISE DAS RESPOSTAS DO CLIENTE E GERAÇÃO DE INSTRUÇÕES DE CONSTRUÇÃO LOVABLE** --- ### 1. PLANO DE ESTRUTURA DO SITE **Layout de Página (Página Única com Seções):** - **Hero** - Título principal, subtítulo, CTA primário ("Solicitar Orçamento") - **Sobre** - Breve história da empresa, foto do fundador (se disponível) - **Serviços** - Grid de 3-4 cards com ícones e descrições curtas - **Portfólio/Projetos** - Galeria com 4-6 imagens clicáveis (lightbox) - **Depoimentos** - Carrossel ou grid com 3 citações de clientes - **Contato** - Formulário simples (nome, email, mensagem) + WhatsApp/telefone **Navegação:** - Menu fixo no topo (sticky) com âncoras para cada seção - Botão "WhatsApp" flutuante no canto inferior direito (prioridade mobile) **Prioridades Mobile (ordem de importância):** 1. Carregamento rápido (imagens otimizadas, lazy loading) 2. CTA visível sem rolagem (hero com botão grande) 3. Menu hambúrguer funcional 4. Formulário de contato com campos grandes (facilidade de toque) 5. Botão WhatsApp sempre acessível --- ### 2. SEQUÊNCIA DE PROMPTS LOVABLE (5 FASES) **Fase 1 - Estrutura Base (Prompt 1):** "Crie um site de página única para [NOME DA EMPRESA], segmento [SEGMENTO]. Layout mobile-first com seções: Hero com título '[TÍTULO PRINCIPAL]' e subtítulo '[SUBTÍTULO]', Sobre, Serviços (4 cards), Portfólio (galeria 6 imagens), Depoimentos (3 itens), Contato (formulário). Use paleta de cores [CORES], tipografia [FONTES]. Menu sticky com âncoras. Adicione botão flutuante de WhatsApp." **Fase 2 - Hero e Identidade (Prompt 2):** "Refine a seção Hero: adicione imagem de fundo [DESCRIÇÃO DA IMAGEM], sobreposição com gradiente [CORES], botão CTA primário 'Solicitar Orçamento' em [COR DESTAQUE], texto secundário '[TEXTO DE APOIO]'. Garanta que o título tenha no máximo 8 palavras e o subtítulo 15 palavras. Adicione animação sutil de entrada." **Fase 3 - Serviços e Portfólio (Prompt 3):** "Na seção Serviços, use ícones [ÍCONES] para cada card. Cada card deve ter título, descrição de 2 linhas e link 'Saiba mais' que abre modal com detalhes. No Portfólio, configure lightbox para as 6 imagens com legenda e categoria. Adicione filtro por categoria se houver mais de 3 categorias." **Fase 4 - Prova Social e Contato (Prompt 4):** "Na seção Depoimentos, use carrossel automático com setas manuais. Cada depoimento deve ter nome, cargo/empresa e foto (use avatares placeholder). No Contato, crie formulário com campos: Nome, Email, Telefone (opcional), Mensagem. Configure para enviar para [EMAIL DO CLIENTE] via integração nativa. Adicione link direto para WhatsApp com mensagem pré-preenchida." **Fase 5 - Polimento e SEO (Prompt 5):** "Otimize o site: adicione meta title '[TÍTULO SEO]', meta description '[DESCRIÇÃO SEO]', tags Open Graph. Garanta que todas as imagens tenham alt text descritivo. Adicione footer com redes sociais [LINKS], copyright e link para política de privacidade. Verifique se todas as seções têm âncoras funcionais e se o menu mobile fecha ao clicar em um link. Teste a velocidade de carregamento e otimize imagens se necessário." --- ### 3. GUIA DE INTEGRAÇÃO DE RECURSOS (COMPATÍVEL COM LOVABLE) | Recurso | Implementação Lovable | Prioridade | |---------|----------------------|------------| | Formulário de Contato | Componente nativo "Form" com notificação por email | Alta | | WhatsApp | Link direto `https://wa.me/[NÚMERO]?text=[MENSAGEM]` | Alta | | Google Maps | Embed via iframe na seção de contato | Média | | Redes Sociais | Ícones com links externos no footer | Média | | Galeria Lightbox | Componente "Gallery" com modal integrado | Alta | | Carrossel | Componente "Carousel" nativo | Média | | Animações | Animações CSS nativas (fade, slide) | Baixa | | Analytics | Código de rastreamento via "Custom Code" | Baixa | **Limitações Lovable a considerar:** - Sem backend próprio - usar Formspree ou integração nativa para formulários - Sem e-commerce complexo - apenas links externos para pagamento - Sem login/área restrita - manter tudo público - SEO básico - meta tags e estrutura semântica apenas --- ### 4. LISTA DE VERIFICAÇÃO DE CONTEÚDO (O QUE PEDIR AO CLIENTE) **Antes de começar (obrigatório):** - [ ] Nome da empresa e logo (PNG com fundo transparente) - [ ] Paleta de cores (hex codes) ou referência visual - [ ] Texto do hero (título + subtítulo) - [ ] 4 serviços com descrições (2-3 frases cada) - [ ] 6 imagens de portfólio (mínimo 800px de largura) - [ ] 3 depoimentos com nome e cargo - [ ] Número de WhatsApp com DDI/DDD - [ ] Email para receber formulários **Durante o processo (ideal):** - [ ] Foto do fundador ou equipe (para seção Sobre) - [ ] Link do Google Maps da localização - [ ] URLs das redes sociais - [ ] Logotipo em versão branca (para footer escuro) - [ ] Certificações ou prêmios (se houver) **Opcional (se disponível):** - [ ] Vídeo de apresentação (embed YouTube/Vimeo) - [ ] Blog ou artigos para linkar - [ ] PDF de portfólio completo - [ ] FAQ com 5-10 perguntas comuns --- **Tempo estimado de execução: 45 minutos** (30 min construção + 15 min revisão e ajustes)