curiositech/windags-skills

Design de Vendas Web

A arte de construir sites que vendem. Não é estratégia de marketing, nem copywriting, nem infraestrutura de teste A/B — são os padrões de design, sistemas visuais e técnicas interativas que transformam visitantes em clientes.

Princípio central: O melhor design de vendas é invisível. Os visitantes não pensam "isso está me vendendo algo." Eles pensam "isso é exatamente o que eu preciso." Cada pixel, cada revelação de scroll, cada colocação de prova social ou constrói confiança e desejo ou os corrói. Não existe neutralidade.

---

Quando Usar

Use para:

• Projetar landing pages que precisam converter visitantes em inscrições/compras
• Construir páginas de preços com arquitetura de tiers eficaz
• Posicionar e projetar prova social (depoimentos, logotipos, estudos de caso)
• Criar botões de CTA que são clicados (tamanho, cor, texto, posicionamento)
• Estruturar páginas de vendas de formato longo (sequências de scroll problema-agitação-solução)
• Adicionar sinais de confiança (selos de segurança, garantias, rostos humanos)
• Criar demonstrações interativas de produtos e tours de funcionalidades
• Construir "momentos uau" — revelações acionadas por scroll, comparações antes/depois
• Auditar páginas existentes em busca de fraquezas no design de conversão

NÃO use para:

• Copywriting e estratégia de mensagens → use product-appeal-analyzer ou skills de copywriting
• Implementação de teste A/B → use frontend-developer
• Criação de anúncios pagos → use skills de marketing
• Auditorias de atrito de UX → use ux-friction-analyzer (complementar — execute ambos)
• Design web geral → use web-design-expert
• Implementação de pagamento/assinatura → use webapp-paywall-implementation

---

O Blueprint de Página de Vendas Baseada em Scroll

A página de vendas moderna de formato longo segue um arco psicológico. Cada seção tem um trabalho. Pule uma seção e a página perde visitantes.

A Estrutura de 8 Seções

┌─────────────────────────────────────────────┐
│  1. HERO — Promessa + Sinal de Identidade   │  ← 0-5 segundos
│     "Isso é para pessoas como eu"           │
├─────────────────────────────────────────────┤
│  2. BARRA DE LOGOS — Atalho de Prova Social │  ← 5-10 segundos
│     "Confiança de nomes que reconheço"       │
├─────────────────────────────────────────────┤
│  3. PROBLEMA — Dor Reconhecida              │  ← 10-30 segundos
│     "Eles entendem minha situação"          │
├─────────────────────────────────────────────┤
│  4. AGITAÇÃO — Consequências da Inação      │  ← 30-60 segundos
│     "Isso é pior do que eu pensava"         │
├─────────────────────────────────────────────┤
│  5. SOLUÇÃO — Produto como Resolução        │  ← 1-2 minutos
│     "Aqui está como funciona + demonstração" │
├─────────────────────────────────────────────┤
│  6. PROVA — Prova Social Profunda           │  ← 2-3 minutos
│     "Pessoas reais, resultados reais"       │
├─────────────────────────────────────────────┤
│  7. PREÇOS — Arquitetura de Oferta         │  ← 3-4 minutos
│     "Valor claro, escolha óbvia"           │
├─────────────────────────────────────────────┤
│  8. CTA FINAL — Urgência + Garantia         │  ← Ponto de decisão
│     "Sem risco, aja agora"                   │
└─────────────────────────────────────────────┘

Implementação Seção por Seção

Seção 1: Hero (O Veredito de 5 Segundos)

O hero decide se os visitantes ficam ou saem. Cada elemento deve merecer seu pixel.

Padrão de layout — o hero convergente:

function HeroSection() {
  return (
    <section className="hero">
      {/* Eyebrow — credibilidade em um sussurro */}
      <p className="hero-eyebrow">Confiado por mais de 2.400 equipes de engenharia</p>

      {/* Headline — uma promessa, orientada a benefícios */}
      <h1 className="hero-headline">
        Entregue recursos em horas,<br />não em sprints
      </h1>

      {/* Subheadline — como, em uma frase */}
      <p className="hero-subheadline">
        Automação de fluxo de trabalho com IA que transforma seu backlog
        em código implantado — revisado, testado e pronto.
      </p>

      {/* Cluster de CTA — primário + secundário de baixo compromisso */}
      <div className="hero-cta-cluster">
        <a href="/signup" className="cta-primary">
          Comece a construir grátis
        </a>
        <a href="/demo" className="cta-secondary">
          Assista demo de 2 min
        </a>
      </div>

      {/* Prova visual — produto em ação, não uma captura de tela */}
      <div className="hero-visual">
        <video autoPlay muted loop playsInline>
          <source src="/demo-clip.mp4" type="video/mp4" />
        </video>
      </div>
    </section>
  );
}

.hero {
  padding: 5rem 2rem 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.hero-headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.hero-subheadline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-cta-cluster {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

O que os melhores fazem de diferente (Stripe, Linear, Vercel, Notion):

• Stripe: Fundos com gradiente animado que parecem vivos, não decorativos. A capacidade do produto é revelada por microinterações — você rola e o produto se demonstra.
• Linear: Modo escuro que sinaliza "ferramenta poderosa para construtores sérios." Zero desperdício visual. O design É a promessa do produto — velocidade e precisão.
• Vercel: Hero focado em tipografia com uma linha que emoldura todo o produto. O CTA é "Start Deploying" não "Sign Up" — orientado à ação.
• Notion: Mostra o produto funcionando, não uma captura de tela. O hero É uma minidemonstração.

Seção 2: Barra de Logos (O Atalho de Confiança)

4 a 6 logotipos reconhecíveis. Não 20. Quantidade dilui; qualidade valida.

function LogoBar() {
  return (
    <section className="logo-bar">
      <p className="logo-bar-label">
        Confiado por equipes de
      </p>
      <div className="logo-bar-logos">
        {logos.map(logo => (
          <img
            key={logo.name}
            src={logo.src}
            alt={logo.name}
            className="logo-bar-logo"
          />
        ))}
      </div>
    </section>
  );
}

.logo-bar {
  padding: 2rem 2rem;
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.logo-bar-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: 1.25rem;
}

.logo-bar-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.logo-bar-logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}

.logo-bar-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

Regras de design:

• Logotipos em escala de cinza por padrão (menos ruído visual, paradoxalmente mais credibilidade)
• Todos os logotipos com a mesma altura visual (28-32px) independentemente das proporções originais
• 5 logotipos é o ponto ideal — menos parece escasso, mais parece desordenado
• Rótulo acima ("Confiado por," "Usado por equipes de") não abaixo
• Se você não tem logotipos reconhecíveis, use métricas: "Mais de 2.400 equipes", "Mais de 10M implantações"

Seção 3: Problema (Dor Reconhecida)

O visitante deve se sentir visto. Esta seção valida sua luta.

Padrão: A grade de três dores

function ProblemSection() {
  return (
    <section className="problem-section">
      <h2 className="section-eyebrow">Soa familiar?</h2>
      <div className="pain-grid">
        <PainCard
          icon={<ClockIcon />}
          title="Semanas perdidas em ciclos de revisão"
          description="PRs ficam parados por dias. O contexto se perde. Engenheiros alternam
            entre recursos enquanto esperam aprovações."
        />
        <PainCard
          icon={<AlertTriangleIcon />}
          title="Bugs escapam de qualquer maneira"
          description="A revisão manual pega problemas de estilo, não bugs de lógica.
            As coisas que quebram em produção ainda quebram em produção."
        />
        <PainCard
          icon={<TrendingDownIcon />}
          title="Velocidade de entrega estagna"
          description="Mais engenheiros, mesma produção. A sobrecarga de processos cresce
            mais rápido que a equipe."
        />
      </div>
    </section>
  );
}

Regras de design:

• Use as palavras do visitante, não o jargão do seu produto
• Máximo de 3 pontos de dor (mais dilui o impacto)
• Ícones devem reforçar a emoção, não decorar
• A seção deve fazer os visitantes balançarem a cabeça, não estremecerem — empatia, não medo

Seção 4: Agitação (O Custo de Não Fazer Nada)

Esta seção aumenta as apostas. Não com medo — com clareza sobre o que o problema realmente custa.

Padrão: A cascata de consequências

Mostre consequências crescentes: tempo perdido, dinheiro desperdiçado, oportunidade perdida, moral da equipe corroída. Use números reais quando possível ("A equipe média perde 14 horas/semana com sobrecarga de revisão de código").

Abordagem de design: Fundo mais escuro, tipografia ligeiramente mais compacta, contador animado opcional mostrando o desperdício acumulado. Esta seção é visualmente "mais pesada" que a seção de problema — é o ponto baixo antes da solução chegar.

Seção 5: Solução (Produto como Resolução)

A virada emocional. A página muda do problema para a possibilidade.

Padrão: Vitrine de funcionalidades com revelações acionadas por scroll

function SolutionSection() {
  return (
    <section className="solution-section">
      <h2>Aqui está como funciona</h2>
      <div className="feature-showcase">
        {features.map((feature, i) => (
          <FeatureRow
            key={feature.id}
            reverse={i % 2 === 1}  /* layout alternado */
            title={feature.title}
            description={feature.description}
            visual={feature.visual}  /* vídeo, animação ou interativo */
          />
        ))}
      </div>
    </section>
  );
}

function FeatureRow({ reverse, title, description, visual }) {
  const ref = useRef(null);
  const isVisible = useIntersectionObserver(ref, { threshold: 0.3 });

  return (
    <div
      ref={ref}
      className={`feature-row ${reverse ? 'reverse' : ''}`}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(2rem)',
        transition: 'opacity 0.6s ease, transform 0.6s ease',
      }}
    >
      <div className="feature-text">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
      <div className="feature-visual">
        {visual}
      </div>
    </div>
  );
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}

.feature-row.reverse {
  direction: rtl;
}

.feature-row.reverse > * {
  direction: ltr;
}

.feature-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feature-text p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-row.reverse {
    direction: ltr;
  }
}

O que faz isso vender:

• Layout alternado evita monotonia do scroll
• Os visuais são interativos ou animados — não imagens estáticas
• Cada funcionalidade é enquadrada como um benefício ("Entregue 3x mais rápido") não como uma capacidade ("CI/CD automatizado")
• As revelações acionadas por scroll criam momentos de descoberta — a página "se desdobra" enquanto eles leem
• 3 a 5 funcionalidades no máximo. Mais que isso e você está listando, não vendendo.

Seção 6: Prova (Prova Social Profunda)

Depoimentos, estudos de caso, métricas. É aqui que o ceticismo morre.

function ProofSection() {
  return (
    <section className="proof-section">
      <h2>Equipes entregam mais rápido conosco</h2>

      {/* Barra de métricas — números concretos */}
      <div className="metrics-bar">
        <Metric value="73%" label="ciclos de revisão mais rápidos" />
        <Metric value="2.4x" label="mais implantações por semana" />
        <Metric value="89%" label="menos bugs em produção" />
      </div>

      {/* Depoimento em destaque — uma citação poderosa com rosto */}
      <blockquote className="featured-testimonial">
        <img src="/testimonials/sarah.jpg" alt="Sarah Chen" />
        <div>
          <p className="quote">
            "Passamos de entregar uma vez por mês para entregar diariamente.
            A equipe realmente gosta do processo de revisão agora."
          </p>
          <cite>
            <strong>Sarah Chen</strong>
            <span>VP de Engenharia, Acme Corp</span>
          </cite>
        </div>
      </blockquote>

      {/* Grade de depoimentos — amplitude da prova */}
      <div className="testimonial-grid">
        {testimonials.map(t => (
          <TestimonialCard key={t.id} {...t} />
        ))}
      </div>
    </section>
  );
}

.metrics-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 3rem 0;
}

.metric-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.metric-label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

.featured-testimonial {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.5rem;
  background: var(--color-surface-elevated);
  border-radius: 1rem;
  border: 1px solid var(--color-border-subtle);
  margin: 3rem 0;
}

.featured-testimonial img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.featured-testimonial .quote {
  font-size: 1.25rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Hierarquia da prova social (mais forte para mais fraca):

1. Pessoa nomeada + foto + empresa + cargo + resultado específico ("Sarah Chen, VP de Engenharia, Acme Corp — entrega diária") → mais convincente
2. Pessoa nomeada + empresa (sem foto) → ainda forte
3. Depoimento anônimo → fraco, evite
4. Marcas apenas → moderado
5. Contagens agregadas ("Mais de 10 mil clientes") → o mais fraco, mas essencial para awareness

Onde colocar a prova social:

• DIREITA do preço → reduz a ansiedade sobre o custo
• PRÓXIMO ao CTA → remove a hesitação de último segundo
• ACIMA da dobra (quando os logotipos são reconhecíveis) → constrói confiança imediata
• APÓS o hero → o impulso de credibilidade antes do mergulho profundo

Seção 7: Preços (Arquitetura de Oferta)

O design da página de preços é onde o design de vendas vive ou morre. Esta seção inteira é sobre fazer o plano do meio parecer óbvio.

Padrão: O tier de três colunas

function PricingSection() {
  return (
    <section className="pricing-section">
      <h2>Planos simples, preços transparentes</h2>
      <p className="pricing-subtitle">
        Todos os planos incluem teste grátis de 14 dias. Sem cartão de crédito.
      </p>
      <div className="pricing-grid">
        {plans.map(plan => (
          <PricingCard
            key={plan.name}
            name={plan.name}
            price={plan.price}
            description={plan.description}
            features={plan.features}
            highlighted={plan.highlighted}
            cta={plan.cta}
          />
        ))}
      </div>

      {/* Seção de comparação de recursos — para visitantes analíticos */}
      <details className="pricing-comparison">
        <summary>Comparação detalhada de recursos</summary>
        <table>
          <thead>
            <tr>
              <th>Recurso</th>
              {plans.map(p => <th key={p.name}>{p.name}</th>)}
            </tr>
          </thead>
          <tbody>
            {comparisonRows.map(row => (
              <tr key={row.feature}>
                <td>{row.feature}</td>
                {row.availability.map((avail, i) => (
                  <td key={i}>{avail ? '✓' : '—'}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </details>

      {/* Garantia — reduz o risco percebido */}
      <div className="pricing-guarantee">
        <ShieldIcon />
        <p>Garantia de reembolso de 30 dias. Cancele a qualquer momento.</p>
      </div>
    </section>
  );
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.pricing-card {
  padding: 2rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 1rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.08);
}

.pricing-card.highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0.5rem 1.5rem rgba(99, 102, 241, 0.15);
  position: relative;
}

.pricing-card.highlighted::before {
  content: 'Mais popular';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

O lugar certo (Link → example, não traduzir):

• 3 tiers. Nunca 2, raramente 4. Três cria a âncora (plano mais caro faz o do meio parecer razoável)
• O tier do meio é o padrão — sutilmente destacado, rotulado como "Mais popular" ou "Recomendado"
• O tier mais caro existe para ancorar — faz o do meio parecer um negócio. Se ninguém compra o mais caro, ele ainda está fazendo seu trabalho
• Preços mensais vs. anuais: Mostre o anual como padrão (com desconto indicado), mensal como alternativo
• Botão CTA: "Comece grátis" > "Compre agora" > "Assine" em taxas de cliques
• Coloque uma prova social diretamente na direita do preço
• Mova a comparação de recursos para um elemento expansível — ele está lá para os analíticos, não para distrair os compradores emocionais

Seção 8: CTA Final (Agora ou Nunca)

O último empurrão. A página parou de educar — agora é sobre fechar.

Padrão: Seção de banner completo com urgência

function FinalCtaSection() {
  return (
    <section className="final-cta">
      <h2>Pronto para entregar mais rápido?</h2>
      <p>
        Junte-se a mais de 2.400 equipes que já transformaram seu processo de desenvolvimento.
      </p>
      <a href="/signup" className="cta-primary cta-large">
        Comece sua avaliação gratuita
      </a>
      <div className="final-cta-trust">
        <span>🎉 Sem cartão de crédito</span>
        <span>🔒 Cancelamento com 1 clique</span>
        <span>✅ Configuração em 5 minutos</span>
      </div>
    </section>
  );
}

.final-cta {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(to bottom, var(--color-surface), var(--color-background));
}

.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.final-cta p {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto 2rem;
}

.cta-large {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

.final-cta-trust {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--color-text-tertiary);
}

Por que o CTA final requer repetição:

• Visitantes precisam ver um CTA 3-5 vezes antes de agir (até em páginas curtas)
• Cada repetição remove uma objeção diferente (preço, risco, tempo, esforço)
• O CTA final é onde todas as objeções foram tratadas. Se eles chegaram até aqui, o único trabalho é tornar o próximo passo inevitável.

---

Técnicas de Design de Alta Conversão

O Efeito de Dazzle (O Momento Uau)

Cada página precisa de pelo menos um momento em que o visitante pensa "Uau." Pode ser:

• Uma comparação antes/depois que se revela
• Uma animação que demonstra o produto em ação
• Um contraste dramático entre problema e solução
• Uma demonstração interativa onde o visitante "experimenta" o resultado

Implementação — Revelação de comparação antes/depois:

function BeforeAfterSlider({ before, after }) {
  const [position, setPosition] = useState(50);
  const containerRef = useRef(null);

  const handleMouseMove = (e) => {
    const rect = containerRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    setPosition((x / rect.width) * 100);
  };

  return (
    <div
      ref={containerRef}
      className="before-after-slider"
      onMouseMove={handleMouseMove}
    >
      <div className="after-image" style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}>
        <img src={after} alt="Depois" />
      </div>
      <div className="before-image">
        <img src={before} alt="Antes" />
      </div>
      <div className="slider-handle" style={{ left: `${position}%` }} />
    </div>
  );
}

.before-after-slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  cursor: ew-resize;
  border-radius: 0.75rem;
  overflow: hidden;
}

.before-after-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.before-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: white;
  z-index: 3;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

Regras para o momento uau:

• Ocorre no primeiro terço da página (seção Hero ou Solução)
• É interativo (deslizar, passar o mouse, clicar) ou animado (revelação de scroll, parallax)
• Mostra o benefício, não o recurso
• Funciona sem áudio (para visitantes que navegam sem som)

A Arquitetura de Botões CTA

O botão CTA é o elemento mais testado em qualquer página de vendas. Veja o que funciona:

Tamanho:

• Largo o suficiente para ser proeminente, não tão largo que pareça um banner
• Altura: 48-56px para desktop, 44-48px para mobile
• Largura: mínimo 200px, máximo 400px (a menos que seja largura total)

Cor:

• A cor primária do botão deve contrastar com o fundo da seção
• Fundos claros → botão escuro
• Fundos escuros → botão claro
• Nunca cinza. Cinza é "talvez." Toda cor diz algo
• Verde = crescimento, financeiro. Azul = confiança, corporativo. Vermelho/laranja = urgente, ação

Texto:

• Comece com verbo: "Comece," "Experimente," "Junte-se," "Assista"
• Fale sobre o resultado deles: "Comece Sua Avaliação Grátis" vs "Inscreva-se"
• Evite jargão: "Inicie sessão" é melhor que "Autenticar" (a menos que seja ferramenta dev)
• Adicione valor eliminando risco: "Comece Grátis" > "Compre Agora" > "Assine"

Posicionamento:

• Acima da dobra (mínimo 1)
• Repetido em cada transição de seção
• Fixo no mobile (barra inferior após scroll suficiente)
• Ao lado de prova social ("Junte-se a 10 mil+ — Comece Grátis")

A Grade de Recursos: Benefício, Não Funcionalidade

Cada recurso no site deve ser enquadrado como um benefício. A diferença:

Funcionalidade (Evite)	Benefício (Use)
"CI/CD automatizado"	"Implante código com um clique"
"Análise em tempo real"	"Veja os resultados enquanto eles acontecem"
"Criptografia de ponta a ponta"	"Seus dados estão seguros — garantido"
"API RESTful"	"Integre com suas ferramentas em minutos"

Padrão para texto de recurso:

Título: [Benefício] — "Implante código com um clique" Descrição: [Funcionalidade + por que isso importa] — "Nosso pipeline de CI/CD automatizado executa testes, análises e implantações automaticamente. O que costumava levar horas agora leva segundos."

---

Padrões de Layout e CSS

Gradiente do Herói

.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--color-primary-subtle) 0%,
    var(--color-surface) 50%,
    var(--color-accent-subtle) 100%
  );
  position: relative;
  overflow: hidden;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: var(--color-primary);
  filter: blur(120px);
  opacity: 0.08;
  top: -200px;
  right: -200px;
}

Cartões que Vendem

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.06);
}

Seções Divisórias (Ritmo Visual)

.section-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-subtle);
  margin: 0;
  border: none;
}

Animação de Contagem de Métricas

@keyframes count-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.metric-animate {
  animation: count-up 0.6s ease forwards;
  opacity: 0;
}

.metric-animate:nth-child(1) { animation-delay: 0.1s; }
.metric-animate:nth-child(2) { animation-delay: 0.3s; }
.metric-animate:nth-child(3) { animation-delay: 0.5s; }

---

Dispositivos de Venda Essenciais

O Selo de Garantia (Removedor de Risco)

function GuaranteeBadge() {
  return (
    <div className="guarantee-badge">
      <span className="guarantee-icon">🛡️</span>
      <span>Garantia de reembolso de 60 dias. Sem perguntas.</span>
    </div>
  );
}

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: 9999px;
  font-size: 0.875rem;
}

O Gráfico de Comparação Antes/Depois

Use uma grade lado a lado com métricas concretas:

Antes	Depois
Ciclos de revisão de 2 semanas	Revisões em 4 horas
12 bugs escapando para produção/mês	1-2 bugs/mês
3 deploys/semana	14 deploys/semana

Técnica de design: Cinza/dessaturado para "Antes," cor/energia para "Depois." Tornar visualmente impossível querer o "Antes."

O Bloco "Como Funciona" (Removedor de Atrito)

Para SaaS complexo, uma seção de 3 passos com ícones:

function HowItWorks() {
  return (
    <ol className="how-it-works">
      <li>
        <div className="step-number">1</div>
        <h3>Conecte seu repositório</h3>
        <p>Integração com um clique com GitHub, GitLab ou Bitbucket.</p>
      </li>
      <li>
        <div className="step-number">2</div>
        <h3>Configure suas regras</h3>
        <p>Defina verificações de qualidade, gatilhos de implantação e políticas de revisão.</p>
      </li>
      <li>
        <div className="step-number">3</div>
        <h3>Implante automaticamente</h3>
        <p>Cada PR é revisado, testado e implantado. Sem espera, sem erros.</p>
      </li>
    </ol>
  );
}

---

Padrão Completo de Auditoria de Página de Vendas

Quando solicitado a auditar uma página existente, use esta lista de verificação:

Perguntas de Auditoria da Página

1. Hero: A proposta de valor está clara em 5 segundos? Sem jargão?
2. Emoção: A página segue um arco problema → agitação → solução → prova? Ou é apenas listagem de recursos?
3. Prova social: Ela aparece cedo o suficiente? Está posicionada após o hero para sustentar o interesse?
4. CTA: Há pelo menos 3 CTAs ao longo da página? Eles são orientados à ação ("Comece Grátis") vs. passivos ("Saiba Mais")?
5. Atrito: Há etapas desnecessárias entre o visitante e a conversão? ("Inscreva-se" → formulário de 10 campos → verificação de e-mail → redirect → morte)
6. Urgência: Por que eles deveriam agir agora, e não daqui a um mês? (Oferta por tempo limitado, vagas limitadas, bônus por tempo limitado)
7. Garantia: Há uma garantia explícita? (Devolução do dinheiro, primeiro mês grátis, sem compromisso)
8. Design: A página parece premium? (Tipografia consistente, espaçamento, hierarquia visual, imagens de qualidade)
9. Velocidade: A página carrega em <3 segundos? As animações atrapalham ou melhoram?
10. Dispositivo móvel: A página funciona em celular? (A maioria do tráfego provavelmente vem de mobile)

Modelo de Resposta de Auditoria

Resumo: (1-2 frases sobre a maior fraqueza)

Principais vitórias rápidas (ordem de impacto):

1. ...
2. ...
3. ...

Problemas de design:

• ...

Problemas de conteúdo:

• ...

Problemas técnicos:

• ...

---

Referências e Estudos de Caso (Sites que Vendem)

Estude estes sites para ver padrões em ação:

• Stripe (stripe.com) — Mestres em hero com gradiente animado e microinterações
• Linear (linear.app) — Design mínimo que vende velocidade/precisão
• Vercel (vercel.com) — Hero orientado a tipografia, CTA focado em ação
• Notion (notion.so) — Hero como mini-demo, prova social na dobra
• ConvertKit (convertkit.com) — Prova social forte, CTAs claros, página simples
• Webflow (webflow.com) — Alternância antes/depois, mostrando o resultado em vez de explicá-lo

---

Notas Finais

• Nunca é sobre você. É sobre eles. Cada cabeçalho, cada imagem, cada palavra — responda "O que isso dá ao visitante?"
• A página não termina no fim. Ela termina quando eles agem. Cada pixel deve empurrar para a ação.
• Design de vendas é sobre confiança. Você não pode enganar as pessoas para converter. Você pode apenas remover a dúvida, tornar o valor óbvio e fazer o próximo passo parecer a única escolha lógica.
• Teste tudo. Mas comece com o que as pesquisas mostram: posicionamento de CTA, cor do botão, ordem da seção de prova. Pequenas mudanças têm efeitos comprovados em taxas de conversão.