Recipes · Bit System

Mission Card

features · serviços · pilares · como funciona

01

Mídia Paga

Google, Meta, TikTok e LinkedIn gerenciados como um ecossistema. Sem silos, sem campanha esquecida no ar.

Ver detalhes →

02

Criativo

Copies que convertem, criativos que param o scroll. Toda peça nasce de dado — não de achismo.

Ver detalhes →

03

Analytics

Dashboard ao vivo, relatório semanal, retro mensal. Você vê o que está acontecendo antes de precisar perguntar.

Ver detalhes →

Hover: translate(-4px, -4px) + shadow neon. Número com prefixo "LV" automático via CSS.

<div class="recipe-mission">
  <span class="recipe-mission__num">01</span>
  <h3 class="recipe-mission__title">Nome do Serviço</h3>
  <p class="recipe-mission__body">Descrição do serviço.</p>
  <a class="recipe-mission__link" href="#">Ver detalhes →</a>
</div>

Boss Stats

métricas · resultados · números de impacto

ROAS Médio

+320%

↑ vs agência anterior

Queda de CPA

-42%

↓ em 90 dias

Clientes ativos

38

↑ +12 YTD

Melhor resultado

900%

★ HIGH SCORE

Use border-top accent para o "high score" card. Delta vermelho para métricas que sobem quando deveriam descer (ex: CAC).

<div class="recipe-boss-stats">
  <div class="recipe-boss-stats__label">ROAS Médio</div>
  <div class="recipe-boss-stats__value">+320%</div>
  <div class="recipe-boss-stats__delta">↑ vs agência anterior</div>
</div>

/* Delta negativo (custo subindo = ruim): */
<div class="recipe-boss-stats__delta recipe-boss-stats__delta--down">↑ CAC subiu</div>

Save Point

CTA principal · seção de conversão · banner de promessa

PRONTO PRA JOGAR?

Você chegou até aqui. O próximo nível é uma conversa de 20 minutos. Sem proposta genérica, sem enrolação — só diagnóstico direto.

INSERT COIN →

Fundo neon, texto preto. Estrelas decorativas via ::before/::after. Botão deve ter background escuro para contrastar.

<section class="recipe-save-point">
  <h2>PRONTO PRA JOGAR?</h2>
  <p>Descrição do CTA.</p>
  <a class="btn btn-xl" href="#"
     style="background: var(--neutral-950); color: var(--brand-primary);">
    INSERT COIN →
  </a>
</section>

Player Card

depoimentos · testimonials · cases de clientes

★★★★★

"Trocamos a última agência pela 2P e, em 90 dias, nosso CPA caiu 42%. A diferença é que eles pensam junto com a gente — não só entregam relatório."

MR

Marcelo Ribas

CMO · Acme Logística

★★★★★

"Em 6 meses, saímos de R$30k pra R$200k de faturamento mensal. A 2P praticamente jogou co-op com a gente o tempo todo."

JL

Juliana Lima

Fundadora · Studio JL

★★★★★

"Pela primeira vez eu entendo o que está sendo feito com meu budget. Dashboard ao vivo, reunião semanal objetiva. Nunca mais agência que some."

RP

Rafael Pinto

CEO · Distribuidora Pinto

Avatar usa iniciais do nome. Stars em VT323 via token --color-warning. Usar bs-grid-3 para grade de 3 depoimentos.

<div class="recipe-player">
  <div class="recipe-player__stars">★★★★★</div>
  <p class="recipe-player__quote">"Depoimento aqui."</p>
  <div class="recipe-player__who">
    <div class="recipe-player__avatar">AB</div>
    <div>
      <div class="recipe-player__name">Nome Sobrenome</div>
      <div class="recipe-player__role">Cargo · Empresa</div>
    </div>
  </div>
</div>

Console

hero visual · dados ao vivo · elemento de marca tech

> 2p-lab --status

$ clientes_ativos = 38

$ roas_medio = +320%

$ cpa_medio = -42%

$ modo = HARDCORE

> ready_

O Console é o elemento visual que mais representa a identidade tech-retrô da 2P. Use no lado direito de heroes, em seções de dados e como visual de preview de dashboard.

As três bolinhas ● ● ● no topo são automáticas via ::before.

Cursor piscante via .fx-cursor. Valores em var(--brand-accent). Prompt em var(--brand-primary).

<div class="recipe-console">
  <div class="recipe-console__line">
    <span class="recipe-console__prompt">></span> 2p-lab --status
  </div>
  <div class="recipe-console__line">
    <span class="recipe-console__prompt">$</span> roas =
    <span class="recipe-console__value">+320%</span>
  </div>
  <div class="recipe-console__line">
    <span class="recipe-console__prompt">></span> ready_<span class="fx-cursor"></span>
  </div>
</div>

Ticker

faixa rolante · avisos · social proof em movimento