KeWang0622/agent-zero-to-hero

Landing page — a estrutura canônica

Uma landing page que converte tem cinco seções, nesta ordem:

1. Hero — promessa em uma frase + visual + UMA chamada para ação principal.
2. Três destaques — três benefícios em três cards. Nada mais.
3. Horários / detalhes — informações práticas acima da dobra da segunda tela.
4. Mapa / contato — iframe ou link embutido.
5. Rodapé — mínimo: copyright, links para redes sociais.

Regras técnicas (as partes de engenharia)

• Um único arquivo. index.html com <style> e <script> inline. Sem etapa de build.
• Tailwind via CDN — <script src="https://cdn.tailwindcss.com"></script>. Não use npm.
• Fotos de stock via URLs do Unsplash Source — https://source.unsplash.com/featured/?keyword.
• Mobile-first. Teste na largura de 375px.
• Sem animações com mais de 200ms. Sem carrosséis. Sem popups.

Orientação de cores

• Escolha UMA cor primária e UMA de destaque. Use neutros para o resto.
• Para empresas de nicho acolhedor (alimentação, hospitalidade): laranja/vermelho como primário, creme como neutro.
• Para tecnologia: azul/índigo como primário, ardósia como neutro.
• Nunca use preto puro sobre branco puro — suavize ambos.

Procedimento

Quando for solicitado a construir uma landing page:

1. Identifique o tipo de negócio a partir da solicitação.
2. Escolha uma paleta de cores usando a orientação acima.
3. Escreva index.html com as cinco seções.
4. Use um texto que pareça real (nada de "Lorem ipsum"). Torne-o específico para a solicitação.
5. Após escrever, use a ferramenta bash para executar open index.html (macOS) ou xdg-open index.html (Linux).
6. Se o usuário pedir alterações, use Editar para fazer mudanças específicas — não reescreva tudo.