landing-page-master

Landing Page Master

Use quando um proprietário disser que as pessoas visitam, mas ninguém reserva, compra ou entra em contato, enviar uma página para corrigir ou pedir uma nova landing page.

O objetivo é uma página que pareça que uma pequena empresa bem financiada pagou um bom designer, diga tudo o que um comprador precisa ver claramente e permita que um visitante de celular aja com um toque, usando apenas o que o proprietário lhe disse. Use seu próprio julgamento de design completo. Essas regras marcam o que páginas fortes acertam e as fracas perdem; elas não são um modelo. Trabalhe em silêncio e responda no formato abaixo em "Entregar de volta".

Escopo: uma página fornecida significa auditar e reparar. "Apenas auditar" significa conclusões e alterações exatas, sem novo HTML. Nenhuma página significa construir nova. Nunca publique, envie, rastreie ou altere uma conta.

1. Obter todos os fatos

Liste para si mesmo: o que é vendido, e cada preço, adicional, plano, parcela, total, depósito, reembolso e garantia; cada local atendido; para quem é e não é; de onde os visitantes vêm e as palavras que viram lá; cada rota que um visitante pode usar (reserva, checkout, telefone, SMS, e-mail, perfil, recursos) e se cada uma funciona; cada prova em suas palavras exatas; cada limite; as perguntas que os compradores fazem com as respostas do proprietário; e as fotos ou arquivos que o proprietário confirma. O resumo do proprietário supera a página antiga sempre que houver discordância.

Antes de escrever, verifique se cada um desses fatos tem um lugar na página. Perder um preço, uma opção de pagamento, um link de compra ou um local atendido é o erro mais caro que um reparo pode cometer.

2. Nomear o que custa mais

Percorra a página antiga como um visitante de celular. Nomeie as poucas falhas que perdem mais pessoas: um título que ignora de onde eles vieram, um botão morto, um preço oculto, uma opção de pagamento faltando, uma afirmação falsa, uma área estreitada ou inflada, respostas ocultas ou vazias, uma imagem quebrada, um formulário que não envia para lugar nenhum, contraste ilegível. Mantenha o que é verdadeiro e funciona: links e arquivos funcionais, citações e preços reais, a redação verdadeira do proprietário. Não mantenha um design fraco. Substitua-o por um completo.

3. Um design finalizado, não um wireframe

A página deve parecer rica e completa tanto na largura do celular quanto do desktop.

• Primeira tela. Lidere com o que o visitante veio buscar, nas palavras dele: a promessa do anúncio, o serviço pesquisado e o local, ou a dor que o resumo descreve. Abaixo, uma linha simples sobre para quem é, o preço ou preço inicial, o botão principal e a segunda rota real. No desktop, use a largura: um herói de duas colunas com um painel lateral forte (o cartão de oferta, um cartão curto de "o que está incluído", a foto do proprietário ou um SVG inline elaborado do ofício) em vez de uma coluna estreita solitária.
• Sistema visual. Uma paleta extraída do ofício, uma escala de tipo clara com um tamanho de exibição confiante para títulos, rótulos de seção em maiúsculas pequenas, faixas de seção coloridas, cartões com bordas ou sombras suaves, espaçamento generoso e um contêiner de página com cerca de 1100 a 1200 px de largura. Texto do corpo com 16 px ou maior e comprimento de linha legível dentro dos cartões e colunas.
• Seções que o resumo suporta, na ordem que responde às dúvidas à medida que surgem: uma faixa de prova (avaliação com contagem e fonte, anos, seguro, associações, exatamente como declarado), o que você obtém, a oferta e preços, como funciona em três ou quatro etapas numeradas, as citações do proprietário como cartões, uma breve nota do proprietário no tom dele, respostas, uma chamada para ação final, um rodapé. Dê a cada seção um título que diga algo específico sobre este negócio. Escreva o máximo que os fatos justificarem: completo, nunca preenchido.
• Ação persistente em celulares. Uma barra estreita fixada na parte inferior da tela abaixo de 720 px de largura, com a ação principal e a segunda rota real (ligar, SMS). Adicione preenchimento inferior à página para que nunca cubra o conteúdo e mantenha-a fora do caminho dos campos de formulário. No desktop, o cabeçalho carrega a ação.
• Sem pop-ups, contagens regressivas ou urgência falsa.

4. Respostas à vista

• Responda às perguntas que o resumo nomeia (preço, área, prazo, o que trazer ou possuir, o que acontece depois, reembolsos) como texto visível: uma grade de respostas de cartões curtos ou uma lista de duas colunas. Não esconda as respostas principais em <details> ou acordeões. Um desdobrável é aceitável apenas para extras menores depois que as respostas principais já estiverem visíveis.
• Coloque cada resposta perto da dúvida que ela resolve também, para que a área apareça ao lado do botão de reserva e o reembolso apareça ao lado do preço.
• A área de serviço, completa. Nomeie cada local que o proprietário atende na linha superior do herói ou logo abaixo do título, e novamente perto da seção de contato. Nunca a encurte para o primeiro ou maior local, e nunca a amplie.

5. A oferta, completa

• Construa um bloco de oferta claro: cada opção como seu próprio cartão com seu nome, preço exato, o que está incluído, qualquer plano de pagamento com seu valor de parcela e total exatamente como declarado, e seu próprio botão para seu próprio link de compra ou reserva funcional.
• Se houver vários links de compra (avulso, plano de pagamento, níveis), cada um aparece como seu próprio botão claramente nomeado. Nunca os colapse em um.
• Coloque os termos de garantia, reembolso ou depósito no ou ao lado do cartão em tipo normal legível.
• Cada preço, adicional, plano, parcela e total que o proprietário deu aparece exatamente; nenhum é adicionado.

6. Rotas que funcionam, e nada que finja

• Use apenas os links, números e endereços fornecidos. Nunca invente uma URL, um sistema de reserva ou um serviço.
• Cada rota funciona com JavaScript desligado: links simples e elementos nativos. Telefone é tel:, SMS é sms: com um corpo inicial, e-mail é mailto: com um assunto e um corpo listando o que o proprietário precisa. Mostre o número ou endereço em si também como um link.
• Nunca coloque um formulário desabilitado onde uma rota funcional existe. Remova formulários que não enviam para lugar nenhum e vincule a rota funcional. Se o resumo pedir um espaço reservado, construa um formulário rotulado com um action placeholder óbvio, seus campos em um <fieldset disabled>, uma linha dizendo que ainda não está conectado e a rota funcional ao lado.
• Diga uma lacuna uma vez, em uma linha simples onde for importante. Não repita notas "nada é enviado" ou "não conectado" pela página.
• Mantenha cada destino funcional que ainda serve a um propósito, rotulado honestamente. Remova destinos mortos ou falsos e nomeie cada remoção na auditoria.

7. Ativos

• Use as fotos confirmadas do proprietário nos caminhos exatos fornecidos, com alt, width, height específicos e uma cor de fundo.
• Remova qualquer imagem, logotipo ou arquivo que o resumo não confirme e mencione isso na auditoria. Substitua por uma ilustração SVG inline elaborada do ofício marcada como aria-hidden="true", dimensionada para preencher seu painel, nunca algo que possa passar pelo trabalho real do proprietário.
• Um arquivo HTML. Sem fontes externas, scripts, rastreadores ou imagens remotas.

8. Acessível em todo lugar

Um link de pular, um h1, estilos de foco visíveis, rótulos reais em cada entrada, alvos de toque de pelo menos 44 px, contraste aprovado e um layout que funciona de 360 px a desktop sem rolagem lateral.

9. Regras de verdade

Execute cada linha contra estas. Remova qualquer coisa que falhe.

• Apenas os fatos do proprietário. Sem avaliações, contagens, classificações, logotipos, prêmios, garantias, tempos de resposta ou "melhor da cidade" inventados. Remova falsificações que a página antiga tinha e diga isso.
• Citações exatas, com os nomes e locais que o proprietário deu. Alterar a redação de uma citação conta como inventá-la.
• Limites respeitados. Nunca prometa fora da área, capacidade, idades ou escopo. Sem promessas médicas, de renda, economia ou velocidade. Sem escassez ou prazos falsos.
• Nunca escreva "em breve" ou qualquer data ou estado futuro que o proprietário não deu.
• Nenhum teste reivindicado. Você só leu o código.

10. Verifique mentalmente

Percorra o código a 390 px e no desktop. Cada preço, total do plano, link de compra e local da sua lista de fatos está na página? As respostas principais estão visíveis sem tocar? A barra de telefone fixa deixa o conteúdo descoberto? A primeira tela do desktop usa ambas as colunas? Cada rota funciona com script desligado? Algo é mais largo que a tela? Corrija o que falhar.

11. Um pequeno exemplo

Um alfaiate em Regina recebe visitantes de panfletos e agenda provas através de um agendador funcional.

Antes: <h1>Crafted With Passion</h1> <a href="#" onclick="openBooking()">Learn more</a>

Depois, primeira tela:

<section class="hero">
  <div>
    <p class="label">Stitchwell Alterations · Downtown Regina e Harbour Landing</p>
    <h1>Alterações de roupas em Regina, agendadas online</h1>
    <p>Bainhas, zíperes, ajustes para diminuir ou aumentar, geralmente prontos em uma semana.</p>
    <p class="price">Bainhas a partir de R$ 18 <span>prova incluída</span></p>
    <a class="btn" href="https://book.example/stitchwell">Agende uma prova</a>
    <a href="tel:+13065550142">Ou ligue (306) 555-0142</a>
  </div>
  <aside class="card">
    <h2>O que uma prova inclui</h2>
    <ul><li>Alfinetação enquanto você veste a peça</li><li>Um preço por escrito antes do início do trabalho</li><li>Data de retirada na hora</li></ul>
  </aside>
</section>
<nav class="phone-bar"><a href="https://book.example/stitchwell">Agende uma prova</a><a href="tel:+13065550142">Ligar</a></nav>

Entregar de volta

Responda nesta ordem:

1. O que estava errado e o que mudou: uma tabela de no máximo seis linhas. Cada linha cita o texto ou marcação da página antiga, depois nomeia o que você mudou e onde. Em seguida, uma linha "Mantido:".
2. A página: o HTML completo em um bloco de código.
3. Antes de publicar: no máximo quatro linhas curtas. Bloqueadores reais primeiro (uma ferramenta a conectar, um fato a confirmar), depois uma frase dizendo que nenhum teste de navegador, telefone ou entrega foi realizado.

Mantenha tudo fora do HTML em cerca de 200 a 300 palavras. Palavras simples, sem emoji, sem exagero e sem afirmação de que a página converterá.