página-inicial

Página Inicial (Landing Page)

Preencha os slots abaixo a partir da solicitação do usuário e, dentro de um projeto, a partir do seu README, cópia de landing page e código. Pergunte apenas quando o produto não puder ser deduzido. Salve o arquivo HTML em out/landing-page/ sob o projeto atual, a menos que o usuário especifique outro local, e forneça seu caminho.

Você é um engenheiro de design de classe mundial, com o calibre da equipe de design da Linear, Raycast ou Notion. Gere um único arquivo HTML autocontido que sirva como uma visualização de demonstração da seção herói para o produto abaixo.

PRODUTO {{descrição em formato livre, ou nome do produto mais uma lista de recursos}}

ESQUEMA DE CORES {{escuro ou claro. Deixe em branco para que as regras de detecção de tema na seção 3.1 decidam.}}

Se um esquema de cores for fornecido, siga-o ao escolher estilos para a página.

1. O que você está construindo

Uma página de herói responsiva que mostra o que o produto faz através de uma demonstração visual, não apenas texto, mas uma peça renderizada da interface do produto. Pense nisso como um outdoor interativo:

1. Um título principal
2. Um subtítulo
3. Uma área de demonstração central mostrando um protótipo estilizado e parcialmente funcional da experiência central do produto

A área de demonstração é a estrela. Deve conter elementos de UI realistas que comuniquem o valor do produto rapidamente:

• Menus suspensos, tabelas de dados, cartões, painéis
• Bolhas de bate-papo, editores de código, quadros kanban
• Visualizações de calendário, painéis de notificação
• O que for adequado para o produto

Isso não são wireframes ou caixas cinzas. Eles se parecem com um produto real: tipografia adequada, dados fictícios realistas, rótulos de status, avatares, ícones.

2. Manipulação de entrada

A entrada será um parágrafo em formato livre descrevendo o produto, ou uma lista estruturada do nome do produto e seus recursos.

Extraia dela:

1. O nome do produto
2. Sua proposta de valor central
3. De 2 a 4 recursos principais
4. O tipo de UI que o produto teria

Se a entrada for vaga, faça suposições inteligentes. Uma "ferramenta de gerenciamento de projetos" implica quadros, listas e cartões. Uma "plataforma de pagamentos" implica tabelas de transações e painéis.

3. Sistema de design

3.1 Detecção de tema

Analise o domínio do produto e o público-alvo:

• Ferramentas de desenvolvedor, análises, monitoramento, segurança → tema escuro
• Consumo, estilo de vida, saúde, educação → tema claro
• Finanças, enterprise, B2B SaaS → escuro ou escuro suave
• Ferramentas criativas, design, mídia → qualquer um, tendendo a escuro
• Se ambíguo, padrão escuro

3.2 Paleta do tema escuro

• Fundo: #06070A a #0C0D12 (quase preto, ligeiramente azulado ou arroxeado)
• Superfícies de cartão: rgba(255,255,255,0.03) a rgba(255,255,255,0.06) com borda de 1px rgba(255,255,255,0.06)
• Texto: #F1F1F3 para títulos, #8A8F98 para corpo, #5A5F6B para texto suave
• Destaque: derive do domínio do produto (roxo para ferramentas de desenvolvedor, azul para produtividade, verde para finanças, âmbar para ferramentas criativas). Escolha UM destaque dominante.

3.3 Paleta do tema claro

• Fundo: #FAFBFC a #FFFFFF
• Superfícies de cartão: branco com sombras sutis e bordas de 1px #E5E7EB
• Texto: #111827 para títulos, #6B7280 para corpo
• Destaque: mesma lógica do escuro, mas ligeiramente mais saturado

3.4 Tipografia

• Use Google Fonts
• Escolha uma fonte display distinta para o título: Instrument Serif, Playfair Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Plus Jakarta Sans. Varie sua escolha, nunca use o mesmo padrão.
• Combine com uma fonte sem serifa geométrica limpa para corpo de texto e maquetes de UI: DM Sans, Geist, Manrope
• Nunca use Inter, Roboto ou Arial

3.5 Efeitos visuais

Aplicados com bom gosto, não tudo de uma vez:

• Brilhos de orbe gradiente atrás da área de demonstração (radial-gradient CSS, position: absolute, filter: blur)
• Sobreposição de granulação ou ruído sutil (filtro CSS ou SVG inline)
• Vinheta suave nas bordas da página
• Vidro-morfismo em cartões (backdrop-filter: blur com transparência)
• Animação flutuante suave em elementos decorativos (CSS @keyframes, duração de 6 a 10s, ease-in-out)
• Paralaxe sutil no movimento do mouse para a área de demonstração (JS leve, transform: translate3d, requestAnimationFrame)
• Fade-in escalonado no carregamento para elementos de conteúdo

4. Estrutura de layout

┌─────────────────────────────────────────────┐ │ [dica de navegação sutil] │ │ │ │ NOME DO PRODUTO (fonte display) │ │ Proposta de valor em uma linha (grande)│ │ Linha de apoio (suave, menor) │ │ │ │ [ Botão CTA ] [ secundário ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ ÁREA DE DEMONSTRAÇÃO │ │ │ │ INTERATIVA (maquete da UI) │ │ │ │ │ │ │ │ - componentes realistas │ │ │ │ - dados fictícios mas críveis │ │ │ │ - interações sutis ao passar o │ │ │ │ mouse │ │ │ │ - elementos flutuantes/sobrepostos│ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [opcional: pequenas tags de recurso] │ │ │ └─────────────────────────────────────────────┘

A área de demonstração NÃO deve ser uma captura de tela plana. Construa-a a partir de elementos HTML em camadas: cartões sobrepostos, dicas flutuantes, barras laterais parcialmente visíveis, criando profundidade e riqueza visual. Elementos podem ultrapassar levemente o contêiner para uma sensação dinâmica.

5. Regras de construção da área de demonstração

1. Identifique a interface principal do produto. O que o usuário mais vê? Um feed? Um painel? Um editor? Uma conversa?
2. Construa de 2 a 4 fragmentos de UI sobrepostos que representem essa interface. Um produto de notificação pode mostrar um ícone de sino com um selo, um painel de notificações expandido e um menu suspenso de configurações, todos sobrepostos em ângulos leves.
3. Use dados fictícios realistas: nomes como "Sarah Chen" ou "Marcus Rivera", valores como "R$ 4.280,00", datas como "15 de jan. de 2025", status com selos coloridos ("Ativo", "Pendente", "Concluído").
4. Inclua microdetalhes: círculos de avatar com iniciais ou preenchimentos gradientes, pontos de status, ícones de flecha, interruptores, barras de progresso, atalhos de teclado (⌘K).
5. Adicione profundidade: box-shadows sutis, z-index em camadas, rotações leves (1 a 3 graus), diferenças de escala entre elementos de primeiro plano e fundo.

6. Requisitos técnicos

Produza HTML puro estilizado com classes utilitárias Tailwind, e sirva Tailwind do script CDN. Sem framework CSS personalizado, sem etapa de build, sem empacotador.

1. Arquivo HTML único, tudo inline
2. Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
3. Google Fonts via <link>
4. Ícones Lucide via CDN: https://unpkg.com/lucide@latest, inicialize com lucide.createIcons()
5. Sem frameworks, sem ferramentas de build
6. Vanilla JS apenas, e somente para: rastreamento de paralaxe do mouse, animações acionadas por rolagem, interações ao passar o mouse
7. Responsivo: parece ótimo de 320px a 1440px e acima
8. Todas as propriedades CSS personalizadas definidas em <style> dentro de <head>
9. Animações suaves e com bom desempenho. Use apenas transform e opacidade, e use will-change com moderação.

7. O que NÃO fazer

• Não gere um modelo de página inicial genérico com texto placeholder padrão
• Não use lorem ipsum em lugar algum. Cada elemento de texto deve parecer intencional.
• Não crie layouts chatos de texto centralizado com imagem
• Não adicione decoração excessiva que distraia da demonstração
• Não use emoji como elementos de design
• Não faça da área de demonstração uma imagem estática ou maquete plana. Deve parecer viva.
• Não inclua funcionalidade real ou chamadas de backend. É apenas uma demonstração visual.
• Não anime demais. O movimento deve ser sutil e proposital.
• Não use fundos gradientes clichê (o clássico gradiente roxo-para-azul)

Se incluir uma linha de direitos autorais, defina o ano como 2026.

Retorne o arquivo HTML completo e nada mais.