EscuteDentro/claude-skills

O que claude-skills faz?

Guia de Construção da Página de Vendas — Template universal com Design System e arquitetura de tracking (Meta Pixel + CAPI)

Este repositório oferece um template universal para construção de páginas de vendas, acompanhado de um Design System e uma arquitetura de tracking completa. Ideal para quem deseja criar landing pages otimizadas para conversão, com rastreamento preciso de eventos (frontend e servidor).

Funcionalidades

• Design System modular: Cores, tipografia, botões e espaçamentos predefinidos.
• Componentes reutilizáveis: Hero, seção de benefícios, depoimentos, garantia, FAQ, etc.
• Meta Pixel (frontend): Script de rastreamento de eventos padrão (PageView, ViewContent, AddToCart, Purchase).
• Conversion API (CAPI): Rastreamento no servidor para maior precisão e conformidade.
• Estrutura otimizada para SEO: Meta tags, Open Graph e schema.org.

Estrutura do Projeto

page/
├── index.html
├── style.css
├── script.js
├── tracking/
│   ├── pixel.js
│   └── capi.js
└── components/
    ├── header.html
    ├── hero.html
    ├── benefits.html
    ├── testimonials.html
    ├── guarantee.html
    ├── faq.html
    └── footer.html

Como Usar

1. Clone o repositório.
2. Edite o arquivo tracking/pixel.js com seu Pixel ID.
3. Configure a rota da CAPI em tracking/capi.js com a URL do seu webhook ou servidor.
4. Personalize os componentes HTML conforme necessário.
5. Faça o deploy da página.

Design System

• Primary Color: #007BFF
• Secondary Color: #6C757D
• Font: Inter, sans-serif
• Button: Arredondado, sombra sutil

Tracking (Meta Pixel + CAPI)

A arquitetura de tracking garante que todos os eventos importantes sejam enviados tanto pelo navegador (Pixel) quanto pelo servidor (CAPI), para redundância e maior precisão.

Events

Evento	Disparo	Pixel	CAPI
PageView	Carregamento	Sim	Sim
ViewContent	Visualização	Sim	Sim
AddToCart	Clique no CTA	Sim	Sim
Purchase	Confirmação	Sim	Sim

Licença

MIT