Documentação / Landing Page — Pilot Status

Landing Page — Pilot Status

Entrar

Landing Page — Pilot Status

Estrutura Completa, Copy e Estilo

Visão Geral

Landing page bilíngue (PT/EN) para o Pilot Status — plataforma de infraestrutura para envio de mensagens WhatsApp via API/SDK. Design dark-mode-first, paleta monoescura com acentos primary (verde WhatsApp-like). Tom direto e pragmático, focado em devs e empresas.

Navegação

MarketingHeader (componente separado) com:

  • Logo "Pilot Status" + seletor de idioma (PT/EN)
  • Links: Funcionalidades → scroll para #infra, Preços → scroll para #plans, Documentação
  • Botão CTA "Começar agora"
  • Botão WhatsApp de suporte fixo no canto inferior direito

Seções Visíveis (ordem de aparição)

1. HERO

Container: max-w-6xl mx-auto px-4 sm:px-6 pt-14 pb-16 sm:pt-20 sm:pb-24 md:pt-28 md:pb-32 min-h-screen flex items-center

Grid: md:grid-cols-2 (esquerda copy + direita WhatsApp preview)

Copy (PT/EN):

  • Headline: "Integre WhatsApp ao seu produto em minutos" / "Integrate WhatsApp to your product in minutes"
  • Subheadline: "Sem VPS, sem proxy e sem lutar com a API da Meta. Envie mensagens, receba eventos e rode automações com uma infraestrutura pronta para produção" / "No VPS, no proxy and no fighting with Meta's API. Send messages, receive events and run automations with production-ready infrastructure"
  • CTA primário: "Enviar mensagem agora" / "Send message now" (ArrowRight2)
  • Link secundário: "Ver funcionalidades" / "See features" (scroll para #infra)
  • Trust badges: "Grátis" / "Free" · "Sem cartão de crédito" / "No credit card" · "Setup em minutos" / "Setup in minutes" (TickSquare icons)

Direita: WhatsAppMessagePreviewLanding — preview interativo com template default

Estilo:

  • Background: bg-background com spotlight radial fixo que segue o mouse (CSS vars --px, --py)
  • Hero min-h-screen, centralizado verticalmente
  • Hover lift: hover:-translate-y-0.5 hover:shadow-black/30

2. TRUSTED BY

Componente: TrustedBySection (importado de @spa/components/landing/TrustedBySection)

Copy (PT/EN):

  • Título: "Projetos reais em produção" / "Real projects in production"
  • Sub: "De SaaS a agents de I.A, times que usam a Pilot Status" / "From SaaS to AI agents, teams using Pilot Status"
  • 6 cards em grid (sm:grid-cols-2 lg:grid-cols-3), max-w-4xl mx-auto:
    1. Content Beauty — "Agendamento e notificações de beleza via WhatsApp" / "Beauty scheduling and notifications via WhatsApp" | proof: "Notificações automáticas de agendamento em produção" / "Automated scheduling notifications in production"
    2. MicroSaaS MKT — "Plataforma de marketing com automação de mensagens" / "Marketing platform with message automation" | proof: "Campanhas automatizadas para milhares de contatos" / "Automated campaigns reaching thousands of contacts"
    3. MCP Wapp — "Server MCP para agents enviarem mensagens pelo WhatsApp" / "MCP server for agents to send WhatsApp messages" | proof: "Integrado com AI agents em tempo real" / "Integrated with AI agents in real time"
    4. ShareContent — "Distribuição de conteúdo com entrega por WhatsApp" / "Content distribution delivered via WhatsApp" | proof: "Entrega contínua de conteúdo para criadores" / "Continuous content delivery for creators"
    5. Entrevistas Dev — "Plataforma de entrevistas técnicas com lembretes por WhatsApp" / "Technical interview platform with WhatsApp reminders" | proof: "Lembretes e convites enviados automaticamente" / "Reminders and invites sent automatically"
    6. Git Social — "Rede social para devs com notificações via WhatsApp" / "Social network for devs with WhatsApp notifications" | proof: "Notificações de interação em tempo real" / "Real-time interaction notifications"

Estilo: Cards com avatar circular (inicial), indicator pulsante verde, hover lift

3. PAIN SECTION

Componente: PainSection

Copy (PT/EN):

  • Título: "Você só quer enviar uma mensagem" / "You just want to send a message"
  • Sub: "Mas antes precisa montar tudo ao redor" / "But first you have to build everything around it"
  • 4 cards em grid (sm:grid-cols-2), max-w-3xl mx-auto:
    1. "Infra antes de valor" / "Infrastructure before value" — "VPS, proxy, certificados… tudo antes da primeira mensagem" / "VPS, proxy, certificates… all before the first message"
    2. "Funciona… até parar" / "Works… until it doesn't" — "Webhooks quebram e você só descobre depois" / "Webhooks break and you only find out later"
    3. "Mais conserto que progresso" / "More fixing than progress" — "Você passa mais tempo corrigindo do que construindo" / "You spend more time fixing than building"
    4. "Leva semanas pra sair" / "Weeks to ship" — "Aprovação, burocracia e docs que não ajudam" / "Approval, red tape, and docs that don't help"
  • Footer: "Deveria ser mais simples." / "It should be simpler."

Estilo: Cards com border-destructive/20 bg-destructive/5, ícone CloseCircle vermelho

4. VALUE PROPOSITION

Componente: ValuePropositionSection

Copy (PT/EN):

  • Título: "Tudo o que você precisa, sem a complexidade" / "Everything you need, without the complexity"
  • 4 cards em grid (sm:grid-cols-2), max-w-3xl mx-auto:
    1. "Envie mensagens com facilidade" / "Send messages with ease" — "Sem lidar com endpoints complicados ou múltiplas integrações" / "No complicated endpoints or multiple integrations"
    2. "Receba eventos de forma confiável" / "Receive events reliably" — "Webhooks simples e previsíveis, prontos para produção" / "Simple and predictable webhooks, production-ready"
    3. "Escale sem se preocupar com infraestrutura" / "Scale without worrying about infrastructure" — "Sem VPS, sem proxy, sem manutenção" / "No VPS, no proxy, no maintenance"
    4. "Organize múltiplos projetos com clareza" / "Organize multiple projects with clarity" — "Ideal para SaaS e automações desde o início" / "Ideal for SaaS and automations from the start"

Estilo: Cards border-border bg-card, ícone TickSquare verde primary

5. HOW IT WORKS

Componente: HowItWorksSection

Copy (PT/EN):

  • Título: "Comece em minutos" / "Get started in minutes"
  • 3 steps em grid (md:grid-cols-3), max-w-4xl mx-auto:
    1. Step 01 — "Conecte seu número" / "Connect your number" | "Vincule o seu WhatsApp (ou dos seus clientes) ao Pilot Status" / "Link your WhatsApp (or your customers') to Pilot Status"
    2. Step 02 — "Envie mensagens" / "Send messages" | "Use nossa API REST, SDKs ou Dashboard para enviar mensagens" / "Use our REST API, SDKs or Dashboard to send messages"
    3. Step 03 — "Receba eventos" / "Receive events" | "Saiba quando a mensagem foi entregue e lida" / "Know when the message was delivered and read"

Estilo: Step number em font-mono text-primary/30 grande, cards centralizados com hover lift

6. ICP (Ideal Customer Profile)

Componente: ICPSection

Copy (PT/EN):

  • Título: "Feito para quem está construindo" / "Made for who's building"
  • 3 cards em grid (sm:grid-cols-3), max-w-4xl mx-auto:
    1. SaaS (Layer icon) — "Permita que seus clientes enviem mensagens usando o próprio número do WhatsApp" / "Allow your customers to send messages using their own WhatsApp number"
    2. Agents (MagicStar icon) — "Automatize conversas com IA e workflows, como MCPs e outras plataformas" / "Automate conversations with AI and workflows, like MCPs and other platforms"
    3. Automações (Flash icon) — "Integre o WhatsApp com seus fluxos e integrações, como n8n, GPT Maker e outros" / "Integrate WhatsApp with your flows and integrations, like n8n, GPT Maker, and more"

Estilo: Ícones em bg-primary/10, hover lift

7. TEMPLATES COMPOSER SECTION

Componente: TemplatesComposerSection

Copy (PT/EN):

  • Título: "Crie mensagens com variáveis e botões" / "Create messages with variables and buttons"
  • Sub: "Padronize mensagens e reutilize com {{variáveis}}." / "Standardize messages and reuse with {{variables}}."

Editor (esquerda, flex-1):

  • Textarea para corpo da mensagem com syntax highlighting de variáveis {{var}} (verde esmeralda text-emerald-500 bg-emerald-500/10)
  • Seção de botões (até 3): reply, url, call, copy — com modal de edição completo
  • Modal de edição de botão com campos: tipo (4 opções em grid), texto do botão, valor (ID/URL/Telefone/Código)

Preview (direita, sticky lg:top-[88px], lg:w-[400px]):

  • Preview WhatsApp real (dark/light theme-aware, cores #0b141a / #efeae2)
  • Categorias: OTP, UTILITY, MARKETING com tooltips explicativos sobre regras e exemplos

Template default (PT):

Olá {{name}}!

Seu pedido *{{orderId}}* foi confirmado.
Acompanhe aqui: https://pilotstatus.online

_Responda a qualquer momento._

Template default (EN):

Hi {{name}}!

Your order *{{orderId}}* has been confirmed.
Track here: https://pilotstatus.online

_Reply at any time._

Botões: "Ver pedido" (reply) + "Acompanhar" (url) / "View order" (reply) + "Track" (url)

Estilo: Editor com textarea sobreposta por div de highlight (z-index layering), preview WhatsApp com chat bubble real, timestamp 16:08

8. USE CASES

Localização: border-t border-border/60 min-h-screen

Copy (PT/EN):

  • Título: "Casos de uso para envios de mensagens" / "Use cases for messages sends"
  • Sub: "Exemplos de mensagens de utilidade e operacionais que você pode automatizar no dia 1." / "Examples of utility and operational messages you can automate on day 1."
  • 8 cards em grid (sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4):
    1. OTP e login / OTP and login (ShieldTick) — "Códigos de acesso, verificação de conta e resets de senha." / "Access codes, account verification, and password resets."
    2. Status de pedido / Order status (Send2) — "Confirmação de compra, atualizações de entrega e rastreio." / "Purchase confirmations, delivery updates, and tracking."
    3. Promoções / Promotions (MagicStar) — "Ofertas, cupons e campanhas por tempo limitado." / "Offers, coupons, and limited-time campaigns."
    4. Cobranças e pagamentos / Billing and payments (DocumentText) — "Pix gerado, cobrança vencendo, recibos e confirmações." / "Pix generated, invoices due, receipts, and confirmations."
    5. Onboarding e ativação / Onboarding and activation (Message) — "Boas-vindas, instruções, etapas e lembretes para ativar." / "Welcome messages, instructions, steps, and activation reminders."
    6. Eventos do produto / Product events (Link2) — "Alertas quando algo muda: assinatura, limites, ações do usuário." / "Alerts when something changes: subscriptions, limits, user actions."
    7. Marketing / Marketing (Chart2) — "Reengajamento, newsletters, upsell e lançamentos." / "Re-engagement, newsletters, upsell, and launches."
    8. Alertas críticos / Critical alerts (Flash) — "Incidentes, falhas, segurança e avisos de alta prioridade." / "Incidents, failures, security, and high-priority notices."

Estilo: Cards com ícone bg-primary/10, hover lift

9. WITHOUT / WITH

Componente: WithoutWithSection

Copy (PT/EN):

  • Título: "Sem PilotStatus vs Com PilotStatus" / "Without PilotStatus vs With PilotStatus"
  • Esquerda (vermelho):
    • "Dias configurando infra" / "Days setting up infrastructure"
    • "Bugs e instabilidade" / "Bugs and instability"
    • "APIs difíceis" / "Difficult APIs"
  • Direita (verde/primary):
    • "Pronto em minutos" / "Ready in minutes"
    • "Previsível e confiável" / "Predictable and reliable"
    • "Pronto pra produção" / "Production-ready"

Estilo: Grid md:grid-cols-2, max-w-3xl mx-auto, cards com borda colorida

10. PRICING

Localização: id="plans" border-t border-border/60 min-h-screen

Copy (PT/EN):

  • Título: "Simples e transparente" / "Simple and transparent"
  • Sub: "Escolha o volume ideal para seu produto" / "Choose the right volume for your product"
  • Toggle: Mensal / Anual (-20% badge em bg-primary/15)

4 planos em grid (sm:grid-cols-2 lg:grid-cols-4):

| Plano | Mensal | Anual | Mensagens | |-------|--------|-------|-----------| | Gratuito (Flash) | Grátis / Free | Grátis / Free | 100/mês / 1.200/ano | | Básico (Message) | R$ 29,90 / $5.83 | R$ 287,04 / $55.96 | 700/mês / 8.400/ano | | Pro (Chart2) | R$ 59,90 / $11.68 | R$ 575,04 / $112.13 | 3.600/mês / 43.200/ano | | Premium (ShieldTick) | R$ 99,90 / $19.47 | R$ 959,04 / $186.91 | 5.000/mês / 60.000/ano |

Features em todos: "Sem limite diário" / "No daily limit" · "Logs e webhooks" / "Logs and webhooks" · "Seu próprio Número" / "Your own Number"

Pacotes avulsos (Box1):

  • Título: "Pacotes avulsos" / "One-off packages"
  • Sub: "Precisa de mais mensagens? Compre sem mudar de plano." / "Need more messages? Buy without changing plans."
  • 300 msgs por R$ 9,90 / $1.93 — pagamento único / one-time
  • 1.000 msgs por R$ 19,90 / $3.88 — pagamento único / one-time

Estilo: Plano "Básico" destacado com border-primary bg-primary/5 e badge "Popular"

11. MIGRATION SECTION

Componente: MigrationSection

Copy (PT/EN):

  • Título: "Migre com confiança." / "Migrate with confidence."
  • Sub: "Se você já usa outro provedor, dá para migrar para o Pilot Status sem reescrever tudo." / "If you already use another provider, you can migrate to Pilot Status without rewriting everything."
  • 3 CTAs: "Começar agora" / "Get started" · "Ver documentação" / "View docs" · "Falar com o time" / "Talk to the team" (WhatsApp verde #25d366)

Estilo: WhatsApp CTA com border-[#25d366]/40 text-[#25d366] hover:bg-[#25d366]/10

12. FINAL CTA

Localização: border-t border-border/60 min-h-screen

Copy (PT/EN):

  • Título: "Envie mensagens aos seus usuários desde o dia 1" / "Send message for users on day 1"
  • Sub: "Defina templates, envie via API e rastreie status com webhooks e logs." / "Define templates, send via API, and track status with webhooks and logs."
  • CTAs: "Enviar mensagem agora" / "Send message now" + "Ver documentação" / "View docs"
  • Trust: "Grátis · Sem cartão de crédito" / "Free · No credit card required"

13. FOOTER

Elementos:

  • Logo (Airplane icon) + "Pilot Status" + "© 2026"
  • Links: Termos / Terms, Privacidade / Privacy
  • Toggle PT/EN (font-mono): "EN ↗" / "PT ↗"

Elementos Flutuantes

  1. Botão AI Docs — fixed bottom-20 right-4 sm:bottom-24 sm:right-6 z-[60], ícone MagicStar, abre DocsChat (lazy loaded), título: "Perguntar à I.A." / "Ask AI"
  2. Botão WhatsApp Suporte — fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50, fundo verde #25d366, link para WhatsApp com mensagem pré-preenchida: "Olá! Vim pela landing do Pilot Status e preciso de ajuda." / "Hi! I'm on the Pilot Status landing page and I need help."

Design System

Cores

  • Background: bg-background (via CSS vars, dark mode)
  • Card: bg-card
  • Primary: primary (verde WhatsApp-like, HSL var)
  • Bordas: border-border/60
  • Texto muted: text-muted-foreground
  • Destructive: text-destructive (vermelho)
  • Warning: text-warning (amarelo)
  • WhatsApp preview dark: #0b141a / #202c33
  • WhatsApp preview light: #efeae2 / #white
  • WhatsApp green accent: #00a884 / #46c299
  • WhatsApp support button: #25d366 / #1ebe5d

Espaçamento

  • Seções: min-h-screen flex items-center justify-center com padding py-16 sm:py-24
  • Max-width: max-w-6xl mx-auto
  • Gap entre cards: gap-4

Tipografia

  • Headlines: text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight (seções) / text-3xl md:text-4xl font-bold tracking-tight (hero)
  • Subheadlines: text-base sm:text-lg text-muted-foreground
  • Labels: text-xs font-mono uppercase tracking-widest
  • Monospace: font-mono para preços, badges, código

Ícones

Biblioteca: iconsax-reactjs (ArrowRight2, TickSquare, Code1, Link2, Layer, DocumentText, Chart2, Box1, Flash, ShieldTick, Message, Send2, Call, MagicStar, Add, Trash, Airplane, CloseCircle)

Animações

  • Hover lift: hover:-translate-y-0.5 hover:shadow-black/30
  • Spotlight radial: background radial gradient que segue o mouse (CSS vars --px, --py, --pop)

Interatividade

  • Tracking de eventos com track() em todos os CTAs, cliques e interações
  • Scroll suave para seções via scrollToSection() com header offset de 72px
  • Session storage ping para /api/public/landing-visit
  • Hash-based scroll no mount (#infra, #plans)

Componentes Externos Importados

| Componente | Origem | |---|---| | MarketingHeader | @spa/components/MarketingHeader | | WhatsAppMessagePreviewLanding | @spa/components/WhatsAppMessagePreviewLanding | | TrustedBySection | @spa/components/landing/TrustedBySection | | DocsChat (lazy) | @spa/components/DocsChat | | Button | @spa/components/ui/button | | Dialog* | @spa/components/ui/dialog | | Tooltip* | @spa/components/ui/tooltip |

Seções Comentadas (NÃO visíveis para o usuário)

  • Stats bar (números "2B+ usuários", "90%+", "< 1s", "#1")
  • ApiCodeSnippet (código curl no hero)
  • Badge "Mensagens · Atualizações e automações" no hero
  • Grid de provedores na MigrationSection (8 providers: Z-API, W-API, WAHA, UAZAPI, Evolution API, whatsmeow, Twilio, Infobip)
  • DeliveryAnimationSection
  • BentoGridSection
  • FeaturesSection
  • PlatformMockupSection