Hugging Face's logo

Spaces:
MLMPBR
/
lead_civico
Running

App Files Community
lead_civico / index.html
MLMPBR's picture
MLMPBR
Update index.html
e35d2a5 verified
Raw History Blame Contribute Delete
21.8 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plano de Mobilização Digital e Captação de Leads Cívicos para campanhas políticas.">
<meta property="og:title" content="Relatório Executivo: Estratégia de Leads Cívicos">
<meta property="og:description" content="Arquitetura e projeções para a estratégia de mobilização digital baseada em Inbound Marketing Político.">
<meta property="og:image" content="https://static.vecteezy.com/ti/vetor-gratis/p1/2464076-digital-inclusao-para-participacao-civica-rgb-color-icon-vetor.jpg">
<meta property="og:url" content="https://hf.civico.space">
<meta property="og:type" content="website">
<title>Relatório Executivo - Leads Cívicos</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600&display=swap');
:root {
--primary: #0A2540;
--secondary: #20609C;
--accent: #F9A826;
--light: #F4F7FA;
--dark: #2B2D42;
--text: #333333;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #e0e5ec;
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
}
/* Configuração de Página para Impressão/PDF */
.page {
background-color: white;
width: 210mm;
min-height: 297mm;
margin: 20px auto;
padding: 40px 50px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
position: relative;
display: flex;
flex-direction: column;
page-break-after: always;
overflow: hidden;
}
@media print {
@page {
size: A4;
margin: 0;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.page {
margin: 0;
box-shadow: none;
page-break-after: always;
page-break-inside: avoid;
width: 210mm;
height: 297mm; /* Trava a altura exata do A4 */
overflow: hidden; /* Impede que o conteúdo vaze para a próxima página */
}
.print-btn {
display: none !important; /* Esconde o botão na hora de imprimir */
}
}
/* Tipografia */
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
color: var(--primary);
}
h1 {
font-size: 32px;
font-weight: 800;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: -1px;
}
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
border-bottom: 3px solid var(--accent);
display: inline-block;
padding-bottom: 5px;
}
p, li {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
color: #4a4a4a;
}
/* Elementos Visuais */
.header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--light);
padding-bottom: 15px;
margin-bottom: 30px;
}
.header .page-num {
font-weight: bold;
color: var(--secondary);
font-size: 18px;
}
.highlight-box {
background-color: var(--primary);
color: white;
padding: 25px;
border-radius: 8px;
margin: 20px 0;
border-left: 6px solid var(--accent);
}
.highlight-box h3 {
color: white;
margin-bottom: 10px;
}
.highlight-box p {
color: #e0e0e0;
margin-bottom: 0;
}
/* Grid Layouts */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.card {
background-color: var(--light);
padding: 20px;
border-radius: 8px;
border-top: 4px solid var(--secondary);
}
.card h4 {
margin-bottom: 10px;
color: var(--secondary);
}
/* Imagens */
.hero-icon {
width: 150px;
height: auto;
margin: 0 0 20px 0;
display: block;
align-self: flex-start;
}
.img-container {
width: 100%;
text-align: center;
margin: 15px 0;
}
.img-container img {
max-width: 100%;
max-height: 190px; /* Reduzido levemente para garantir que não quebre a página 3 */
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 1px solid #ddd;
object-fit: contain;
}
/* Tabela de Métricas */
.metrics-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.metrics-table th, .metrics-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.metrics-table th {
background-color: var(--primary);
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.metrics-table tr:nth-child(even) {
background-color: var(--light);
}
.footer-note {
margin-top: auto;
text-align: center;
font-size: 11px;
color: #888;
border-top: 1px solid #eee;
padding-top: 10px;
}
/* Estilo do Botão de Imprimir */
.print-btn {
position: fixed;
top: 20px;
right: 20px;
background-color: var(--accent);
color: var(--primary);
border: none;
padding: 12px 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 14px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 9999;
transition: all 0.3s ease;
text-transform: uppercase;
}
.print-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
background-color: #ffb84d;
}
ul {
padding-left: 20px;
}
.step-list {
list-style: none;
padding-left: 0;
}
.step-list li {
position: relative;
padding-left: 45px;
margin-bottom: 25px;
}
.step-list li::before {
content: attr(data-step);
position: absolute;
left: 0;
top: -2px;
background: var(--secondary);
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}
.step-list h4 {
margin-bottom: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<!-- BOTÃO DE EXPORTAR PDF -->
<button onclick="window.print()" class="print-btn">⬇ Baixar em PDF</button>
<!-- PÁGINA 1: INÍCIO -->
<div class="page">
<div class="header">
<div>
<strong style="color: var(--primary); text-transform: uppercase; font-family: 'Montserrat'">Plano de Mobilização Digital</strong>
</div>
<div class="page-num">01</div>
</div>
<div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
<img src="./assets/icone-civico.jpg" onerror="this.onerror=null; this.src='https://static.vecteezy.com/ti/vetor-gratis/p1/2464076-digital-inclusao-para-participacao-civica-rgb-color-icon-vetor.jpg'" alt="Ícone de Participação Cívica" class="hero-icon">
<h1>Estratégia de Captação:<br><span style="color: var(--secondary);">Leads Cívicos</span></h1>
<p>Este relatório executivo apresenta a arquitetura e as projeções para a estratégia de mobilização digital baseada em <strong>Inbound Marketing Político</strong>. O objetivo é estabelecer uma máquina de captação de apoiadores qualificados utilizando o ecossistema da Meta (Facebook/Instagram).</p>
<div class="highlight-box">
<h3>O que é o "Lead Cívico"?</h3>
<p>No marketing digital convencional, "Lead" é o termo usado para indicar a captura de um contato para fins de negócios. Na política, o <strong>LEAD CÍVICO</strong> significa a identificação e captação de um cidadão que se identifica com um plano de governo ou proposta, decidindo aderir ativamente àquele movimento.</p>
</div>
<h2>A Ferramenta de Tração</h2>
<p>Existem vários tipos de anúncios na plataforma do Facebook (para atrair mensagens, engajamento, tráfego). Para esta estratégia, um formato é particularmente decisivo: o <strong>Facebook Lead Ads</strong> (Anúncios de Cadastro).</p>
<p>Este formato permite que o cidadão demonstre apoio e envie seus dados de forma rápida, sem sair da rede social, garantindo altas taxas de conversão e estabelecendo o primeiro passo para a construção de um exército de formadores de opinião na mesorregião alvo.</p>
</div>
<div class="footer-note">Confidencial - Estratégia de Captação e Mobilização Cívica</div>
</div>
<!-- PÁGINA 2: PROCESSO DE CAPTURA -->
<div class="page">
<div class="header">
<div>
<strong style="color: var(--primary); text-transform: uppercase; font-family: 'Montserrat'">Metodologia Inbound</strong>
</div>
<div class="page-num">02</div>
</div>
<h2>O Processo de Captura</h2>
<p>A estratégia de Inbound Marketing atua sob a lógica da atração voluntária. É um processo inteligente de "pescaria", estruturado em quatro pilares fundamentais:</p>
<div class="grid-2">
<div class="card">
<h4>🎯 1. O Peixe (A Persona/Público)</h4>
<p>É preciso saber exatamente qual espécie queremos pescar para não perder tempo ou recursos. O alvo não é qualquer eleitor, mas o cidadão interessado em gestão, propostas e no futuro da mesorregião.</p>
</div>
<div class="card">
<h4>🪝 2. A Isca (O Criativo)</h4>
<p>No Inbound, não corremos atrás com um arpão. Entendemos a dor do cidadão e colocamos a isca perfeita: <strong>um vídeo de alta retenção</strong> e uma pauta cívica de forte apelo na água.</p>
</div>
<div class="card">
<h4>🌊 3. O Lago (Os Canais)</h4>
<p>Escolhemos o local certo (Facebook e Instagram) e jogamos a linha na profundidade exata: a mesorregião definida para a campanha, com segmentação inteligente.</p>
</div>
<div class="card">
<h4>🎣 4. A Fisgada (A Conversão)</h4>
<p>O eleitor vem por vontade própria. Ele "morde o anzol", que será um <strong>Plano de Governo Resumido (PDF)</strong>. Em troca, preenche o formulário com Nome, WhatsApp e Município, e é puxado para o nosso barco (o canal do WhatsApp).</p>
</div>
</div>
<div class="highlight-box" style="background-color: var(--secondary); border-left-color: var(--primary);">
<h3>O Princípio da Nutrição</h3>
<p>O preenchimento do formulário indica que o objetivo primário foi atingido: essa pessoa é um ponto de apoio da campanha. A partir desse momento, inicia-se a "Nutrição do Lead Cívico", mantendo esse cidadão abastecido de informações e engajado com atividades até o dia da eleição.</p>
</div>
<div class="footer-note">Confidencial - Estratégia de Captação e Mobilização Cívica</div>
</div>
<!-- PÁGINA 3: PASSO A PASSO -->
<div class="page">
<div class="header">
<div>
<strong style="color: var(--primary); text-transform: uppercase; font-family: 'Montserrat'">Arquitetura da Campanha</strong>
</div>
<div class="page-num">03</div>
</div>
<h2>O Passo a Passo da Construção</h2>
<div class="img-container">
<img src="./assets/meta-leads.png" onerror="this.onerror=null; this.src='https://www.privyr.com/blog/wp-content/uploads/2023/11/Screenshot-2023-11-15-at-09.56.28-247x300@2x.png'" alt="Meta Ads Objective: Leads - Seleção do objetivo de Cadastros no Gerenciador de Anúncios">
<p style="font-size: 11px; text-align: center; color: #666; margin-top: 5px;"><em>Seleção do Objetivo de Cadastros (Leads) no ambiente do Meta Business.</em></p>
</div>
<ul class="step-list">
<li data-step="1">
<h4>Configuração da Campanha</h4>
<p>No Gerenciador de Anúncios, seleciona-se o objetivo de <strong>Cadastros (Leads)</strong>. O modo manual é escolhido para garantir controle total. É obrigatória a ativação da "Categoria de Anúncio Especial" (Temas sociais, eleições ou política) para validar o selo "Pago por..." e evitar bloqueios.</p>
</li>
<li data-step="2">
<h4>Conjunto de Anúncios (Onde a pesca acontece)</h4>
<p>Configura-se a conversão para <strong>Formulários Instantâneos</strong>. Define-se a localização restrita aos 27 municípios da mesorregião. A segmentação permanece aberta, pois o algoritmo e o vídeo farão o filtro. Posicionamentos: Feeds e Reels.</p>
</li>
<li data-step="3">
<h4>Criação do Criativo (O vídeo e a promessa)</h4>
<p>Upload do vídeo de alta retenção. O copy reforça a dor cívica e aplica o <em>Call to Action</em>: "Baixe o resumo do Plano de Governo e entenda como resolveremos isso". Botão selecionado: "Cadastre-se".</p>
</li>
</ul>
<div class="footer-note">Confidencial - Estratégia de Captação e Mobilização Cívica</div>
</div>
<!-- PÁGINA 3 PARTE 2: CONTINUAÇÃO DO PASSO A PASSO -->
<div class="page">
<div class="header">
<div>
<strong style="color: var(--primary); text-transform: uppercase; font-family: 'Montserrat'">Arquitetura da Campanha (Cont.)</strong>
</div>
<div class="page-num">04</div>
</div>
<ul class="step-list">
<li data-step="4">
<h4>Estruturação do Formulário (O anzol digital)</h4>
<p>Cria-se um formulário de "Maior Intenção" (para elevar a qualificação) ou "Mais Volume". Após uma introdução de 2 linhas sobre o PDF, solicitamos dados essenciais já pré-preenchidos pela Meta (Nome e Telefone) + uma múltipla escolha para o Município.</p>
</li>
<li data-step="5">
<h4>A Tela de Conclusão (Fisgada para o WhatsApp)</h4>
<p>O momento crítico do funil. O botão final é alterado para "Ver Site", com o texto <strong>"Receber o PDF no WhatsApp agora"</strong>. O link de destino é uma URL direta (`wa.me`) contendo uma mensagem padrão pré-programada.</p>
</li>
<li data-step="6">
<h4>Entrega e Automação (O Fechamento)</h4>
<p>Ao clicar, o WhatsApp do cidadão abre com o texto pronto. Ele apenas envia. Ferramentas como "Respostas Rápidas" do WA Business ou automações de servidor disparam imediatamente o PDF com o Plano de Governo, consolidando o cidadão na nossa base.</p>
</li>
</ul>
<h2 style="margin-top: 30px;">Expectativas de Retorno</h2>
<p>Iniciaremos com um <strong>Anúncio Semanal Inicial</strong> — um projeto piloto voltado para uma mesorregião do Estado — com um <strong>custo estimado de R$ 1.000,00</strong>. O objetivo é validar a aceitação da "Isca Digital" e aquecer a inteligência do algoritmo.</p>
<p>Para a execução integral do projeto, seria interessante <strong>reservar um montante de R$ 25.000,00 exclusivamente para anúncios</strong> dentro desse roteiro proposto, garantindo a escalabilidade e manutenção da comunidade cívica.</p>
<table class="metrics-table">
<thead>
<tr>
<th>Métrica do Teste Piloto</th>
<th>Valor Estimado (Base: R$ 1.000,00)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>CPM (Custo por Mil)</strong></td>
<td>~ R$ 13,00 (Otimizado por alta performance do criativo)</td>
</tr>
<tr>
<td><strong>Impressões e Cliques</strong></td>
<td>~ 76.900 visualizações / ~ 2.150 cliques (CTR: 2,8%)</td>
</tr>
<tr>
<td><strong>Conversão do Formulário</strong></td>
<td>22% a 25%</td>
</tr>
<tr>
<td><strong>Total de Cadastros (Leads)</strong></td>
<td><strong>470 a 530 cadastros brutos</strong></td>
</tr>
<tr>
<td><strong>CPL (Custo Por Lead)</strong></td>
<td><strong>R$ 1,88 a R$ 2,12</strong></td>
</tr>
</tbody>
</table>
<div class="footer-note">Confidencial - Estratégia de Captação e Mobilização Cívica</div>
</div>
<!-- PÁGINA 5: CONCLUSÃO E ROI -->
<div class="page">
<div class="header">
<div>
<strong style="color: var(--primary); text-transform: uppercase; font-family: 'Montserrat'">Validação e Conclusão</strong>
</div>
<div class="page-num">05</div>
</div>
<h2>Expectativa de ROI Cívico (Ativação)</h2>
<p>O verdadeiro Retorno sobre o Investimento na política não é a lista de contatos frios, mas a <strong>quantidade de cidadãos que entram no canal e interagem (Apoiadores Engajados)</strong>.</p>
<div class="grid-2">
<div class="card" style="border-top-color: var(--accent);">
<h4>Transição para WhatsApp</h4>
<p>Estimada em <strong>35%</strong> devido ao alto valor agregado do PDF oferecido.</p>
</div>
<div class="card" style="border-top-color: var(--accent);">
<h4>Resultado do Piloto (R$ 1.000)</h4>
<p>Formação de um núcleo ativo de <strong>160 a 185 cidadãos</strong> (CPAe: ~R$ 5,70).</p>
</div>
</div>
<p><strong>Critérios para Escalada Financeira:</strong> O teste será considerado um sucesso técnico após 7 a 10 dias se: (1) O Custo por Lead estabilizar abaixo de R$ 2,50; (2) O Índice de Qualidade na Meta for "Acima da Média"; (3) Os contatos capturados forem reais e pertencentes à mesorregião.</p>
<h2 style="margin-top: 20px;">Conclusão: A Vantagem Assimétrica</h2>
<div class="highlight-box">
<h3>A Falência do "Outbound Analógico"</h3>
<p>Atualmente, 99% dos candidatos nas mesorregiões operam na "pesca de arrastão": gastam fortunas com carros de som, outdoors, santinhos e impulsionamento vazio. Isso gera apenas <strong>ruído</strong>, não engajamento.</p>
</div>
<p>Ao adotar o Inbound Marketing com Iscas Digitais de alto valor (como o Plano de Governo), o projeto executa duas quebras de paradigma fundamentais:</p>
<ul>
<li><strong>Inteligência Cívica:</strong> Abandona-se a panfletagem digital para tratar o eleitor como um cidadão inteligente, capturando sua atenção imediatamente.</li>
<li><strong>Escalabilidade:</strong> Com R$ 1.000,00 cria-se um exército de quase 200 multiplicadores engajados nos 27 municípios, transformando investimento financeiro em pauta de debate orgânico nas ruas.</li>
</ul>
<div style="text-align: center; margin-top: 40px;">
<p style="font-size: 16px; font-weight: bold; color: var(--secondary);">O futuro da campanha não é sobre quem grita mais alto, <br>mas sobre quem engaja com mais precisão.</p>
</div>
<div class="footer-note">Confidencial - Estratégia de Captação e Mobilização Cívica</div>
</div>
</body>
</html>