hebats01/flash-landing-page-skill

Gerador de Flash Landing Page

Produz um ÚNICO arquivo .html autossuficiente para o lançamento de um único produto. O proprietário irá colá-lo em sua própria hospedagem / construtor de páginas, portanto a saída deve funcionar sem etapa de build e sem assets locais necessários.

O que o proprietário quer (padrões — não pergunte novamente)

• Saída: apenas código HTML. Sem frameworks, ferramentas de build ou arquivos extras.
• Idioma: indonésio primeiro, com frases leves em inglês onde tornam as coisas mais claras ("Early Bird", "What You Will Get", "Register now").
• Objetivo: compra direta. Cada CTA aponta para UMA URL de checkout (lynk.id ou um gateway de pagamento).
• Aparência: simples, mas com classe. Contida, editorial, bastante espaço em branco. Não é um template, não é uma "página de IA" com gradiente e emoji.
• Estilo fresco por produto. Paleta, tipografia e composição do hero são escolhidas a partir do próprio produto. Nunca reutilize o visual do produto anterior.
• Simples por padrão. Sem contagem regressiva, depoimentos, FAQ, popups ou widgets de prova social, a menos que o proprietário peça explicitamente.

Entradas a coletar

Pergunte apenas o que estiver faltando, em UMA mensagem curta. Qualquer item não respondido vira um placeholder claramente marcado, nunca uma invenção.

Necessidade	Notas
Nome do produto + promessa em uma linha	Vira H1 e meta description
Público-alvo (principal / secundário)	Orienta o texto da seção "Para Quem"
Principais benefícios ou resultados	3–6 itens
O que está incluído (entregáveis / módulos / bônus)	Vira a grade "O Que Você Vai Receber"
Preço, preço riscado, prazo/período	Bloco de preço
Detalhes do evento (data, hora, formato) se for um produto ao vivo	Barra de informações
URL de checkout	Vai em CHECKOUT_URL
Flyer / imagem de referência / cores da marca / fotos	Usado para paleta + clima; se uma foto não puder ser usada, não a incorpore
Palavras de clima ou referência	Opcional; caso contrário, inferir a partir do produto

Nunca invente: depoimentos, contagens de alunos, avaliações, "como visto em", garantias, credenciais de mentores, alegações de renda ou prazos que o proprietário não declarou. Se a fonte disser "praticante experiente", escreva exatamente isso.

Processo

1. Leia o briefing e qualquer flyer/referência. Extraia fatos textualmente (nomes, datas, preços, títulos de itens). Eles são a fonte única da verdade.
2. Escolha uma direção de design (2–3 linhas, diga ao usuário antes de construir):
   • Paleta: 1 tinta, 1 fundo, 1 destaque, 1 superfície suave. Derive do flyer/marca se fornecido, senão do universo do produto.
   • Tipografia: uma fonte display + uma fonte de corpo do Google Fonts; opcionalmente, uma única fonte manuscrita de destaque usada com moderação.
   • Hero: o movimento distintivo para este produto (título serifado enorme, painel dividido, prova numérica, etc.).
3. Construa a partir da estrutura abaixo, usando reference/example-workshop.html apenas como referência estrutural e de qualidade. Reteme e recomponha; não copie suas cores ou fontes.
4. Verifique (veja a lista de verificação) em um navegador para desktop e largura de 375px.
5. Entregue o caminho do arquivo mais uma lista curta do que o proprietário ainda precisa preencher.

Estrutura da página (adapte, não force)

1. Hero — subtítulo, H1, promessa em uma linha, CTA principal, pequeno visual/painel de suporte
2. Barra de informações — data/hora/formato (produtos ao vivo) ou fatos-chave (produtos digitais)
3. Para Quem — público-alvo principal + secundário
4. O Que Você Vai Receber — 3 ou 6 itens em uma grade com bordas, numerados
5. Bloco de preço — preço normal riscado, preço destacado, nota curta, CTA
6. Linha de confiança — 2–3 pontos factuais curtos extraídos do briefing
7. Rodapé — nota de marca/marca registrada se um produto de terceiros for nomeado
8. Barra de CTA fixa no celular — preço + botão, oculta no desktop

Remova seções que o produto não precisa. Uma página curta que é verdadeira vence uma página longa que é preenchida.

Regras de engenharia

• Arquivo único; CSS em <style>, JS em um <script> pequeno; fontes via <link> do Google Fonts apenas.
• Tokens de design como variáveis CSS em :root com um comentário "EDIT BAGIAN INI SAJA UNTUK PRODUK BARU".
• Um const CHECKOUT_URL = "https://lynk.id/USERNAME/PRODUK"; no topo do script; cada âncora [data-cta] lê dele. Deixe um comentário TODO para o proprietário.
• Ícones SVG inline (estilo traço, currentColor). Sem emoji como ícones.
• Responsivo mobile-first; sem scroll horizontal em 375px; clamp() para tamanhos de título.
• Revelação ao rolar com IntersectionObserver, com fallback prefers-reduced-motion e fallback sem IO.
• Acessível: landmarks semânticas (header, section, footer), estilos focus-visible, contraste de texto ≥ 4.5:1, alt/aria em visuais significativos, lang="id".
• <title>, meta description e viewport meta presentes.
• Texto de destaque manuscrito/script deve permanecer decorativo e nunca conter informações obrigatórias.
• Anotações decorativas não devem se sobrepor ou transbordar no celular (posicione-as absolutamente apenas em ≥ 820px).

Lista de verificação

• Cada preço, data, nome e título de item corresponde exatamente à fonte
• Todos os CTAs resolvem para CHECKOUT_URL (ou #daftar para a rolagem do hero)
• document.documentElement.scrollWidth <= innerWidth em 375px e 1024px
• Nenhuma sobreposição de texto em 375px; a barra fixa não cobre o conteúdo do rodapé (o body tem padding inferior)
• Nenhuma alegação, número ou credencial inventados
• Apenas as seções que o proprietário solicitou estão presentes

Mensagem de entrega (mantenha curta, em indonésio, casual)

Indique: caminho do arquivo, direção de design em uma linha e uma lista "yang perlu lu isi" (link de checkout, foto, nome do mentor, qualquer coisa deixada como placeholder). Ofereça um próximo ajuste concreto, não um menu.