mukulmunda41-criar/nova-seção

Nova seção

Uma rotina curta para uma seção em um site que já possui suas regras. É a etapa de seção da skill futuristic-web-design, empacotada para funcionar sozinha.

Se ../futuristic-web-design/ estiver ao lado desta skill, seus arquivos de referência contêm os detalhes. Leia o que a tarefa precisa: references/design-system.md para o vocabulário de layout e a auditoria de site genérico, references/ship.md para o formulário de contato e o passe de telefone.

Se o projeto não tiver um arquivo de regras ou sistema de design ainda, pare e use futuristic-web-design desde sua primeira fase. Uma seção construída sem um sistema de design é de onde vem a aparência genérica.

A rotina

1. Leia as regras. Abra o arquivo de regras do projeto (AGENTS.md, CLAUDE.md ou GEMINI.md) e os tokens de tema. Use apenas as tipografias e a paleta definidas ali, e a pilha que o projeto já utiliza.
2. Confirme o conteúdo. Quando fatos importam (preços, alegações, nomes, citações), pergunte. Nunca invente clientes, avaliações ou estatísticas para um negócio real. Em outros casos, escreva texto real e sinalize as linhas que você inventou. Sem texto de preenchimento.
3. Escolha um layout com propósito. Dividido, centralizado, sangrado, grade, bento ou assimétrico. Diga qual e por que em uma linha. Evite o padrão de um título centralizado sobre três cartões idênticos: destaque um item e desloque os outros.
4. Construa um componente em seu próprio arquivo em components/, ou no equivalente do projeto.
5. Verifique em 390px, 768px e 1440px em um navegador e corrija o que você vê. Um layout pode satisfazer todas as regras e ainda assim parecer estranho.
6. Combine o espaçamento acima e abaixo com as seções vizinhas.
7. Relate em três linhas: o que foi construído, o caminho do arquivo e o que precisa dos olhos do usuário (cópia inventada, botões sem fio, qualquer coisa que você não pôde verificar).

Altere apenas a seção que foi solicitada. Um diff mais amplo que a solicitação esconde qual edição ajudou.

Opções de layout

Quando o usuário pedir opções, ou não conseguir descrever o que deseja, construa duas ou três variantes a partir do mesmo conteúdo. Coloque cada uma em sua própria rota de pré-visualização (/preview-1, /preview-2, ou /before e /after para uma reformulação) com uma descrição de uma linha. As pessoas escolhem mais facilmente do que especificam.

Deixe a página real intocada até que elas escolham. Depois, exclua as outras variantes e suas rotas, porque rotas de pré-visualização residuais são enviadas junto com o site.

O que torna uma seção com aparência de design

• Tipografia. A tipografia de título grande com tracking apertado, a tipografia de leitura para todo o resto. Apenas duas tipografias; padrões de framework como font-mono em um rótulo contam como uma terceira. Um título hero tem cerca de oito palavras no máximo.
• Um botão principal. Preenchido, na cor de botão da paleta, vinculado à ação no briefing. Uma segunda ação é um link de texto com uma seta ou um contorno discreto. Dois botões de peso igual sinalizam que nenhuma decisão foi tomada.
• Cada botão leva a algum lugar real. Se o destino for desconhecido, use o alvo honesto mais próximo e liste o botão como sem fio no relatório.
• Superfície e espaço. Espaço em branco generoso, preenchimentos planos, bordas finas, granulado ou vidro opcionais. Sem gradientes substituindo uma paleta. Sombra apenas ao passar o mouse.
• Imagens. Servidas no tamanho de exibição, carregadas preguiçosamente abaixo da primeira tela, com texto alternativo que descreve a imagem ("frasco de soro âmbar sobre pedra clara", nunca "imagem 1").
• Movimento. Um fade curto e alguns pixels de deslocamento para cima, abaixo de 500ms, uma vez. Sob prefers-reduced-motion, nada se move, incluindo rolagem suave e transições de hover.

A verificação em 390px

Celulares representam a maioria das visitas, então esta é a largura que decide se a seção está pronta.

• O texto do corpo é legível, e nenhum título se estende por cinco ou mais linhas.
• Nada está pressionado contra a borda da tela.
• Os alvos de toque têm cerca de 44px ou maiores.
• Não há rolagem horizontal.
• A navegação recolhe atrás de um alternador de menu que abre e fecha.
• Cartões em uma linha mantêm preços e botões na mesma linha, independentemente do comprimento do texto acima deles. Verifique isso nas três larguras.

Seção de contato

Um formulário sem destino causa dano, porque as pessoas presumem que sua mensagem chegou. O modelo é uma caixa de correio: aberta para postagem para todos, trancada para leitura para todos, exceto o proprietário.

• Campos name, email, message, salvos em uma tabela leads no Supabase, ou no backend que o projeto já utiliza.
• Segurança em nível de linha ativada: inserção anônima permitida, nenhuma leitura pública. Não encadeie .select() na inserção; sem acesso de leitura, isso faz a chamada falhar.
• O código do site usa apenas a chave pública, carregada de .env.local, que permanece ignorada pelo git.
• Valide antes de enviar (formato de e-mail plausível, mensagem não vazia) e explique qualquer rejeição. Dê mensagens distintas para sucesso e para falha.
• Defesa contra spam: um campo honeypot oculto que deve permanecer em branco, além de rejeitar envios que chegam mais rápido do que uma pessoa poderia digitar.
• Teste como um visitante faria: uma mensagem em branco, um e-mail malformado, um envio válido. Apenas uma nova linha na tabela prova que funciona; uma confirmação na tela não.
• Quando uma salvamento falha, leia o erro e corrija a política. Nunca desligue a segurança em nível de linha, porque esta tabela contém nomes e endereços de pessoas.