AndrewTaras/profpak-landing

Geração de Módulo HTML

Quando usar

O usuário solicita a criação de um novo módulo da landing page: Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer ou ChatWidget.

Processo

1. Receba do usuário o contrato do módulo (bloco 'Data In → HTML Out').
2. Verifique se todas as classes Tailwind do contrato existem no design system (consulte AGENTS.md).
3. Se o contrato fizer referência a cores — use apenas as classes do design system:
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • Nada de bg-blue-500, bg-orange-500 ou outras paletas padrão do Tailwind.
4. Gere o código HTML seguindo rigorosamente o contrato.
5. Retorne apenas o HTML — sem envolvimentos Markdown, sem explicações.

Regras de geração

Imagens placeholder

Se o contrato especificar 'Imagem de fundo — placeholder', use:

• Para fundo do hero: https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• Para cards de produtos: https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• Para galeria 'Sobre o fabricante': https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

Ícones

Todos os ícones via Lucide:

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

Ícones populares para o projeto: shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

Botões CTA (principais)

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  Texto <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

Botões secundários

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  Texto
</a>

Cards de produtos

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATEGORY</p>
    <h3 class="text-xl font-extrabold text-slate-900">Nome</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">Descrição</p>
  </div>
</article>

Seções (envoltórios)

<section id="nome" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- conteúdo -->
  </div>
</section>

Grades

• Produtos: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• Estatísticas: grid grid-cols-2 md:grid-cols-4 gap-6
• Processo: grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ: grid grid-cols-1 md:grid-cols-2 gap-4
• Problemas: grid grid-cols-1 md:grid-cols-3 gap-8

Checklist antes da saída

• Todas as classes do contrato foram usadas
• Apenas classes do design system foram usadas (nada de bg-blue-500)
• Prefixos responsivos estão presentes (sm:, md:, lg:)
• Imagens com alt e loading="lazy"
• Elementos interativos com aria-label ou texto significativo
• Nenhum estilo inline
• Nenhum envoltório Markdown ao redor do HTML
• Nenhuma explicação antes ou depois do código

Exemplo de chamada

Usuário:

Gere o componente Hero conforme o contrato: bgImage — placeholder, headline — 'Filme stretch — proteção confiável para sua carga', bullets — [shield: Fixação confiável, droplet: Proteção contra umidade, zap: Alta resistência, package: Consumo econômico], ctaPrimary — 'Calcular lote' → https://wa.me/79064680377

Você:

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

(apenas HTML, sem explicações)