AndrewTaras/profpak-landing

Refatoração de Componente HTML

Quando usar

• O usuário envia um HTML pronto e pede para melhorá-lo.
• O usuário pede para verificar o componente quanto a responsividade, acessibilidade e desempenho.
• O usuário pede para adicionar animações, alterar a tipografia ou melhorar o visual.

Processo

1. Obtenha o HTML atual do componente.
2. Obtenha a lista de melhorias do usuário. Se a lista não for fornecida, trabalhe de acordo com as prioridades abaixo.
3. Mantenha a estrutura existente — não reescreva do zero.
4. Retorne o HTML atualizado + o CSS/JS necessário (se houver).

Prioridades de melhoria (por importância)

1. Tipografia

• Títulos: font-heading font-black tracking-tight, tamanhos text-4xl md:text-6xl
• Texto: leading-relaxed text-slate-600
• Evite linhas 'órfãs' — use text-balance quando necessário
• Verifique o contraste: texto escuro sobre fundo claro, texto claro sobre fundo escuro

2. Microanimações

• Aparecimento ao rolar: classe section-reveal (já existe no template)
• Hover em cards: hover:-translate-y-1 hover:shadow-xl transition-all
• Hover em botões: hover:-translate-y-0.5 transition
• Ícones em hover: group-hover:scale-110 transition-transform

3. Responsividade

• Verificação em 360px: sem rolagem horizontal, todos os elementos cabem
• Verificação em 768px: grids se reorganizam em 2 colunas
• Verificação em 1440px: conteúdo não estica além de max-w-7xl
• Se necessário, use clamp() para tamanhos de fonte

4. Acessibilidade (a11y)

• Tags semânticas em vez de <div>
• aria-label em botões com ícones
• Estilos de foco: focus:ring-2 focus:ring-industrial-orange focus:outline-none
• alt em todas as imagens, aria-hidden="true" em ícones decorativos

5. Desempenho

• Remover classes Tailwind não utilizadas
• Garantir que todas as imagens tenham loading="lazy"
• Adicionar width e height às imagens (previne CLS)
• Não duplicar CSS — use utilitários Tailwind

Formato da resposta

Retorne na seguinte ordem:

1. Bloco HTML — código atualizado do componente (dentro de ```html para facilitar cópia)
2. Lista de alterações — breve, 3 a 5 itens, do que foi melhorado
3. CSS/JS adicional — se adicionado, em bloco separado com indicação de onde colocá-lo

Exemplo de chamada

Usuário:

Melhore o componente Hero: tipografia mais forte, animação de aparecimento dos bullets, responsivo em 360px. Aqui está o código: [HTML]

Você:

<section>...código atualizado...</section>

Alterações:

• Título: reforçado para text-5xl md:text-7xl font-black tracking-tight
• Adicionado section-reveal nos bullets com delay via style="animation-delay: Xms"
• Reformulado grid dos bullets para grid-cols-1 sm:grid-cols-2 md:grid-cols-4
• Verificado em 360px — sem rolagem
• Adicionado aria-label nos botões CTA

CSS adicional (em src/styles/custom.css):

.hero-bullet { animation: reveal .8s ease-out both; }