---
name: "figma-lp-greatpages"
description: "Transforma uma LP do Figma em seções HTML separadas (uma por arquivo), responsivas e animadas, que preenchem a box do elemento HTML do Greatpages."
---

# Figma -> seções HTML para Greatpages

Use quando o Vinicius mandar um link do Figma (frame inteiro ou vários nós) pedindo para separar em seções/HTMLs, "fiel ao Figma", responsivo e com animações para colar no Greatpages. Responder em PT-BR, direto e informal. Entregar os HTMLs (ele pediu código HTML explicitamente, mesmo preferindo PDF para outros arquivos).

## Fluxo
1. Task list: mapear seções -> puxar design/assets -> montar HTMLs -> conferir e entregar.
2. Carregar a skill figma-design-to-code, depois `get_metadata` do frame e `get_screenshot` para mapear as seções (cada `Section` de 1º nível = um HTML). Nós sem filhos no metadata ainda têm conteúdo: use `get_design_context` neles. Chamadas em paralelo.
3. `get_design_context` de cada seção (screenshot incluso) = alvo visual. Anote larguras/alturas do frame para conferir depois.
4. **Formulário**: nunca gerar. Deixar o espaço livre no layout (ex.: hero só com a coluna da esquerda) e avisar.
5. **SVGs** (logo, ícones, setas, círculos, números): exportar com `use_figma` + `exportAsync({format:'SVG_STRING'})` (skill figma-use), ~20 KB por chamada; ficam inline. Prefixe ids de gradientes/filtros (`dxi_x_f`) para não colidir. SVG com blur/sombra: `overflow:visible` no svg, senão o efeito aparece cortado numa caixa.
6. **Imagens raster**: placeholder `src="COLE-O-LINK-IMGUR-NOME"` com `img[src^="COLE"]{visibility:hidden}` (sem cor de fundo atrás! ele reclamou de fundo cinza). Depois use a skill figma-imgbb-upload para subir e trocar. O ambiente cloud não baixa do figma.com nem alcança imgbb/imgur: avise isso logo.
7. Gerar com um script Python (strings f) que escreve um HTML por seção (`01-hero.html`, `02-problema.html`...). Reaproveite componentes já feitos na conversa.
8. Testar (abaixo) e entregar com SendUserFile (todos os HTMLs), com resumo curto: o que cada arquivo faz, o que ele precisa trocar (imagens, hrefs `#`), diferenças em relação ao Figma, e que não foi testado dentro do Greatpages.

## Padrão de cada HTML (fragmento, sem <html>/<body>)
Ordem: comentário de uso -> `<link>` Inter (Google Fonts) -> `<style>` -> markup -> `<script>`.

### Preencher a box e ser responsivo
- Duas camadas: `<div class="lp-xw"><section class="lp-x">…</section></div>`. O **wrapper** tem `container-type:inline-size;width:100%`. **Container query NÃO estiliza o próprio container**, e `cqw` no próprio container resolve contra o ancestral; por isso `@container` e `cqw` só nos filhos do wrapper (a seção é filha).
- Desktop proporcional ao Figma 1920: `valor_px / 1920 * 100 cqw`, com piso para não ficar minúsculo: `font-size:max(15px,1.25cqw)`. Paddings, gaps, larguras de colunas também em cqw. Resultado: na box de 1920 fica idêntico ao Figma e em boxes menores escala junto.
- Larguras 100%, nada de `width` fixo que estoure; `overflow:hidden` na seção quando houver decoração; testar `scrollWidth <= largura`.
- Mobile por `@container (max-width:900px)` (ou 1000/640 conforme a seção): empilha em coluna, `max-width:640px; margin:auto`, texto centralizado, fontes por `clamp()`/`max()`, botões menores (altura 64px, `white-space:normal`).
- Elementos com tamanho fixo em px (timeline 1104px, orbe 976px) usam `width:min(1104px,100% - 48px)`/ `--u:calc(100cqw/976)` e viram layout vertical em container estreito.
- Fundo: por padrão `background:transparent` nas seções (ele removeu os fundos das seções; só cards, painéis e rodapé mantêm o próprio fundo). Pergunte/mencione se a seção tem texto escuro (precisa de fundo claro na página).

### Tipografia padrão (Inter)
- Títulos: peso/caixa do Figma (muitos são `text-transform:uppercase`, 300 + destaque 700/800), `line-height` 1.1-1.15, `letter-spacing` do Figma em em (-0.0375em para -1.5px/40px).
- Destaques com degradê: `background-clip:text` com `-webkit-text-fill-color:transparent`, animação `background-position` 4s alternate.
- Corpo 15-18px mínimo (mobile 16px), `line-height` 1.4-1.6 no mobile. Mobile centralizado; desktop alinhado como no Figma.
- Cores/tokens vêm do `get_design_context` (ex.: #e7ebef, #8b0030, #a50034, #FFF6FA, #EA729A). Se o usuário trocar cores, aplique.

### Animações
- Entrada por scroll: `[data-lp-reveal]` (`left|right|zoom` opcional) com `opacity`+`translate`/`scale` (propriedades individuais, não `transform`, para não brigar com outras animações) e `--d` para atraso escalonado. JS com IntersectionObserver, idempotente (`data-lp-ok`), classe `lp--js` no root para só esconder se o JS rodar; fallback sem IO mostra tudo.
- `@media (prefers-reduced-motion:reduce)` desliga tudo.
- Cards: brilho que segue o cursor (`--x/--y` via pointermove + `radial-gradient` em `::after`), fallback `@media (hover:none)`.
- Flutuar: `translate` em keyframes com durações/atrasos diferentes. Glow pulsando, imagens com zoom lento, brilho passando em selos.
- Botões: pulso redondo (`box-shadow` animada **no próprio botão**, não na caixa do Greatpages, senão fica quadrado), hover com brilho passando + `translateY(-3px) scale(1.03)`. Forçar cor do texto com `!important` em link/visited/hover/focus/active (o tema do Greatpages pinta de rosa).
- Timeline com scroll: linha central com `--p` (0..1) calculado em rAF a partir de `getBoundingClientRect`, `scaleY(var(--p))`; linhas ganham `is-in`, números ganham `is-active` quando a linha passa. No fim da página deve chegar a `--p = 1`.
- Orbe/ícone com cards: entrada em sequência (ícone/brilho -> cards -> setas com `clip-path` wipe), depois setas em ciclo e cards flutuando.
- Âncora/scroll suave para `#e_...` do Greatpages: `scrollIntoView({behavior:'smooth'})` no click, fallback link normal.

## Teste obrigatório (Playwright Chromium)
- Fonte Inter embutida em base64 (`@fontsource/inter` via npm) e bloquear requisições externas (`fonts.googleapis`, imgur).
- Renderizar cada arquivo em 320, 375, 414, 768, 1024, 1440, 1920; viewport alto (3000px) para o IO disparar; esperar ~2,5s.
- Checar: sem overflow horizontal, sem erro de JS (`pageerror`), altura em 1920 próxima da altura do frame no Figma (±3%), olhar contact sheet desktop+mobile e comparar com o screenshot do Figma. Hover/cursor: mover o mouse e ver o brilho.
- Placeholders de imagem ficam invisíveis no teste: aspect-ratio da caixa mantém a altura.

## Armadilhas já vividas
- Container query no próprio container não funciona -> wrapper.
- SVG com filtro cortado -> `overflow:visible`.
- Animar `transform` e usar `transform` no hover/reveal na mesma coisa quebra; use `translate`/`scale`.
- Medir heights: se divergir muito do Figma, conferir paddings do frame (o Figma pode ter conteúdo transbordando).
- Hero com formulário: coluna de texto ~38% da largura, resto livre; no mobile o texto vem centralizado.
- Não assumir que o usuário quer fundo: confirmar no resumo o que ficou transparente.