Trip Sampa Documentos internos

Plano de Refatoração — Trip Sampa Viagens

Documento gerado em 2026-04-27 após reconhecimento completo do site atual via Puppeteer. Status: aguardando aprovação do Aldo. Nada implementado ainda. Local: /home/claude/tripsampa/PLANO-REFATORACAO.md

1. Diagnóstico do site atual

Stack atual: WordPress 6.9.4 + WooCommerce, hospedado no Hestia deste mesmo servidor (porta 80/443, MySQL 3306). Domínio tripsampaviagens.com.br.

Performance medida agora:

SEO atual:

Estrutura mapeada (16 rotas únicas, 12 visitadas):

Catálogo identificado (preços em R$):

Diagnóstico visual (screenshots em /home/claude/tripsampa/recon/screenshots/):

Aspecto Hoje Problema
Paleta Laranja #FF6B00 saturado puro Lê como "fast food / promoção barata", não premium
Tipografia Sans-serif default WP, peso único Sem hierarquia, tudo "achatado"
Cards de pacote WooCommerce padrão, mosaico apertado Genéricos, parecem qualquer loja online
Hero Slider com texto sobreposto difícil de ler Sem impacto, sem call-to-action claro
Mobile Funcional, mas tudo comprimido Sem cuidado de spacing/touch targets
Galeria de equipe 9 fotos pequenas amontoadas Subaproveitada — é prova social forte
Trust signals Quase ausentes Sem reviews, sem CNPJ visível, sem CADASTUR
Checkout WooCommerce padrão Funciona, mas frio e quebra a estética

2. Visão "Wow" — o que o cliente vai sentir ao abrir

Promessa de impacto: quando o Aldo abrir a versão nova lado a lado com o WP atual, ele deve pensar "isso parece um site da Smiles/CVC premium, não uma agência de bairro". A diferença não é cosmética — é hierarquia, ritmo e confiança.

Os 7 momentos de impacto da home:

  1. Hero cinematográfico — vídeo curto em loop (10-15s) de uma das viagens reais (Chile, Foz, Búzios) com overlay tipográfico editorial. Headline forte ("Sua próxima viagem começa em São Paulo"), subhead curta, CTA único ("Ver pacotes deste mês"). Sem slider giratório — uma cena, uma mensagem.

  2. Barra de busca inteligente logo abaixo do hero: "Para onde?" + "Quando?" + "Quantas pessoas?" — mesma sensação Booking/Airbnb, adaptada para excursão.

  3. Próximas saídas (cronograma vivo) — em vez de só "categorias", mostrar as 6-8 próximas datas confirmadas em formato calendário visual. Cria urgência real ("sai sexta", "restam 4 vagas").

  4. Categorias como cartões editoriais — não 4 quadradinhos laranja: 4 imagens grandes ocupando viewport com tipografia sobreposta (estilo revista de viagem).

  5. Mapa interativo dos destinos — pinos clicáveis no mapa do Brasil + Cone Sul mostrando todos os destinos cobertos. Cliente vê a abrangência num piscar.

  6. Galeria social "Quem foi com a gente" — grid de fotos reais de viagens (não estoque), com legendas curtas. Prova social esmagadora.

  7. Equipe com personalidade — em vez de 9 retratos amontoados, 3-5 destaques com nome, função e quote curto ("eu cuido das saídas pro Chile"). Humaniza.

Bônus "shock factor":

3. Direção visual

Confirmar com Aldo antes de codar.

Paleta proposta:

Tipografia (Google Fonts, gratuitos):

Ritmo / espaçamento:

Componentes-chave (shadcn/ui base):

4. Stack técnica recomendada

Confirmada com Aldo na conversa: ele quer não mexer em código nunca. Isso favorece ecossistemas com mais exemplos e padrões consolidados que a IA executa com menos erro.

Camada Escolha Por quê
Framework Next.js 15 (App Router, Turbopack) Volume gigante de exemplos de e-commerce + Mercado Pago = menos bug
UI Tailwind 4 + shadcn/ui + Framer Motion Componentes prontos premium, animações performáticas
Banco PostgreSQL 16 (local no servidor) Aguenta concorrência (carrinho + admin + webhook MP simultâneos)
ORM Prisma 5 Schema-first, migrations automáticas, type-safety total
Auth Auth.js v5 (NextAuth) Login admin + cliente, magic link, OAuth Google
Pagamento Mercado Pago SDK Node oficial Checkout Pro + Checkout Transparente + PIX
Imagens Sharp (build) + next/image (runtime) + Cloudflare R2 ou pasta local WebP/AVIF automático, responsive srcset
Email Resend ou SMTP do Hestia Confirmação de compra, lembretes de saída
Maps MapLibre GL + tiles OpenStreetMap ou Maptiler free tier Sem custo Google Maps
Analytics Plausible self-hosted ou Umami Privacy-first, leve
Forms Server Actions nativos do Next Zero biblioteca extra
Process manager PM2 Já roda Node nesse servidor, padrão Hestia
Reverse proxy Nginx (já configurado pelo Hestia) Subdomínio dedicado durante dev

Por que NÃO outras opções:

5. Arquitetura de páginas (sitemap proposto)

/                                Home (hero + busca + próximas saídas + categorias + mapa + sobre + FAQ)
/pacotes                         Catálogo completo com filtros (destino, mês, preço, tipo)
/pacotes/[slug]                  Página individual de pacote (galeria, datas, embarque, incluso, FAQ específica)
/categoria/[slug]                Listagem por categoria (praias, cidades, hospedagem, internacional, semana)
/destinos                        Mapa interativo + lista de destinos
/destinos/[slug]                 Hub de destino (Ilhabela, Búzios...) com todos pacotes que vão lá
/sobre                           Página dedicada (não âncora) — história, equipe, CADASTUR, CNPJ
/embarque                        Locais de embarque com mapa (Barra Funda, Itaquera, Santo Amaro, Tatuapé)
/galeria                         Fotos reais de viagens passadas, organizadas por destino/ano
/blog                            Conteúdo SEO (rotas de viagem, dicas) — opcional fase 2
/faq                             FAQ completa (não só âncora na home)
/contato                         WhatsApp + form + endereço + mapa
/checkout                        Fluxo próprio (carrinho + dados + pagamento Mercado Pago)
/conta                           Área do cliente: pedidos, próximas viagens, downloads de voucher
/conta/login                     Login (magic link ou Google)
/admin                           Dashboard (vendas, pacotes, datas, clientes, financeiro)
/admin/pacotes                   CRUD de pacotes (slug, preço, datas, fotos, incluso, embarque)
/admin/pedidos                   Lista de vendas + status pagamento
/admin/clientes                  CRM básico
/admin/relatorios                Vendas por período, ocupação por saída

6. Modelo de dados (Prisma — esboço)

model User {
  id            String   @id @default(cuid())
  email         String   @unique
  name          String?
  phone         String?
  cpf           String?  @unique
  isAdmin       Boolean  @default(false)
  orders        Order[]
  createdAt     DateTime @default(now())
}

model Pacote {
  id            String   @id @default(cuid())
  slug          String   @unique
  titulo        String
  subtitulo     String?
  descricao     String   @db.Text
  destino       String       // "Ilhabela - SP", "Chile", etc.
  categoria     Categoria    // PRAIAS_BATE_VOLTA, CIDADES_BATE_VOLTA, COM_HOSPEDAGEM, INTERNACIONAL, DURANTE_SEMANA
  precoBase     Int          // em centavos
  precoCrianca  Int?
  duracaoDias   Int          // 1 = bate-volta
  incluso       String[]
  naoIncluso    String[]
  observacoes   String?  @db.Text
  fotos         Foto[]
  saidas        Saida[]
  acomodacoes   Acomodacao[]
  destaque      Boolean  @default(false)
  ativo         Boolean  @default(true)
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

model Saida {
  id            String   @id @default(cuid())
  pacoteId      String
  pacote        Pacote   @relation(fields: [pacoteId], references: [id])
  dataSaida     DateTime
  dataRetorno   DateTime?
  vagasTotal    Int
  vagasOcupadas Int      @default(0)
  precoOverride Int?     // se diferente do precoBase
  status        StatusSaida @default(DISPONIVEL)  // DISPONIVEL, ULTIMAS_VAGAS, ESGOTADA, CANCELADA
  observacao    String?
  itens         OrderItem[]
}

model PontoEmbarque {
  id        String  @id @default(cuid())
  nome      String  // "Barra Funda", "Itaquera"
  endereco  String
  lat       Float?
  lng       Float?
  ativo     Boolean @default(true)
}

model Acomodacao {
  id        String @id @default(cuid())
  pacoteId  String
  pacote    Pacote @relation(fields: [pacoteId], references: [id])
  nome      String  // "Hostel duplo", "Hotel triplo c/ café"
  precoExtra Int    @default(0)  // diferença sobre o precoBase
}

model Foto {
  id        String @id @default(cuid())
  pacoteId  String
  pacote    Pacote @relation(fields: [pacoteId], references: [id])
  url       String
  alt       String
  ordem     Int    @default(0)
  capa      Boolean @default(false)
}

model Order {
  id            String   @id @default(cuid())
  numero        Int      @unique @default(autoincrement())
  userId        String?
  user          User?    @relation(fields: [userId], references: [id])
  email         String
  nome          String
  telefone      String
  cpf           String
  itens         OrderItem[]
  total         Int      // centavos
  status        OrderStatus @default(PENDENTE)  // PENDENTE, PAGO, CANCELADO, REEMBOLSADO
  mpPaymentId   String?  // ID do Mercado Pago
  mpPreferenceId String?
  metodoPagamento String? // PIX, CREDIT_CARD, BOLETO
  pontoEmbarqueId String?
  observacoes   String?
  createdAt     DateTime @default(now())
  pagoEm        DateTime?
}

model OrderItem {
  id          String @id @default(cuid())
  orderId     String
  order       Order  @relation(fields: [orderId], references: [id])
  saidaId     String
  saida       Saida  @relation(fields: [saidaId], references: [id])
  passageiros Passageiro[]
  precoUnitario Int
  quantidade    Int
  acomodacaoId  String?
}

model Passageiro {
  id          String @id @default(cuid())
  orderItemId String
  orderItem   OrderItem @relation(fields: [orderItemId], references: [id])
  nome        String
  rg          String?
  dataNasc    DateTime?
  isCrianca   Boolean @default(false)
}

model Cupom {
  id        String @id @default(cuid())
  codigo    String @unique
  desconto  Int    // % ou valor fixo
  tipo      TipoDesconto  // PERCENT, FIXO
  validoAte DateTime?
  usosMax   Int?
  usosFeitos Int @default(0)
  ativo     Boolean @default(true)
}

model Review {
  id        String @id @default(cuid())
  pacoteId  String
  nome      String
  nota      Int    // 1-5
  texto     String @db.Text
  fotoUrl   String?
  aprovado  Boolean @default(false)
  createdAt DateTime @default(now())
}

7. Sprints de entrega (autonomia total)

Aldo pediu (2026-04-27): agrupar fases e entregar mais coisa de uma vez, sem travar pra validação granular. Reorganizado em 3 sprints ao invés de 5 fases — cada sprint vira uma entrega completa e testável.

Sprint 1 — Fundação + Site público completo + SEO básico — ~16h

Infra:

Site público (todos os 7 momentos "wow" da seção 2):

SEO:

Sprint 2 — E-commerce funcional + Admin completo — ~18h

Loja:

Admin (/admin):

Sprint 3 — Diferenciais + Cutover — ~10h

Polimento "wow":

Migração:

Total estimado: ~44h de trabalho meu, em 3 entregas grandes ao invés de 5 fases pequenas. Reporto a você apenas no fim de cada sprint, com URL pra revisar.

8. Como o WordPress atual fica protegido

9. Decisões registradas (2026-04-27)

# Decisão Status
1 Paleta terracota/burnt orange premium (#C9531A + areia #F5EFE6 + marrom-café #1F1611) ✅ Confirmada
2 Logo atual (Site-logo.png) mantido para Fase 1 ✅ Confirmado
3 Hero com imagem estática premium (sem vídeo na Fase 1) ✅ Confirmado
4 CADASTUR / CNPJ — espaço reservado no rodapé/sobre, valores virão depois 🕒 Pendente
5 Mercado Pago — conta existe; tokens (Access Token + Public Key) virão na Fase 2 🕒 Pendente
6 Email transacional — Resend (config quando chegar a Fase 2) ✅ Confirmado
7 Fotos dos pacotes — varredura automática da galeria de cada pacote do WP via Puppeteer (em /home/claude/tripsampa/assets/pacotes/[slug]/) + JSON estruturado pronto pra seed ✅ Confirmado e em execução
8 Subdomínio dev — novo.tripsampaviagens.com.br (criado em Hestia, SSL ativo, placeholder publicado) ✅ Provisionado
9 Equipe — bios serão levantadas com Aldo depois 🕒 Pendente
10 Conteúdo dos destinos — eu escrevo (1 parágrafo autoral por destino) ✅ Confirmado

10. Inventário do que já tenho pronto

Catálogo final mapeado (24 pacotes, R$ 99 a R$ 3.750)

Praias bate-volta (10): Guarujá, Ilhabela, Trindade, Arraial do Cabo, Angra dos Reis, Ilha do Pelado, Ilha do Coco/Paraty, Gruta que Chora/Lázaro/Sununga (Ubatuba), Praia da Santa Rita/Enseada (Ubatuba), Show Shakira em Copacabana (categorização confusa — sugiro mover pra "Eventos")

Cidades bate-volta (6): Campos do Jordão, Itu+Fazenda do Chocolate, Serra Negra, Aparecida, São Roque (Rota dos Vinhos+Templo Zu Lai), Holambra (Cidade das Flores)

Com hospedagem (7): Chile 5 dias internacional (R$3.750), Búzios+Arraial, Cabo Frio+Arraial, Beto Carrero+Camboriú, Paraty+Ilha do Coco, Tríplice Fronteira (Foz/Paraguai/Argentina), Copacabana/Lapa

Bate-volta (1): Poços de Caldas — MG

Pendências de qualidade dos dados:

11. Status atual — Todas as 3 sprints entregues ✅

Sprint 3 entregue em 2026-04-28

Polimento e diferenciais:

Documentos prontos:

Pendências cosméticas (cliente precisa fornecer):

Decisão sobre o cutover: está congelado aguardando os tokens e dados acima. Quando todos chegarem, o cutover é executado seguindo CUTOVER.md. Até lá, novo.tripsampaviagens.com.br segue como ambiente de homologação completamente funcional.

11.0 Status — Sprints 1 e 2 entregues ✅

Sprint 2 entregue em 2026-04-28

E-commerce funcional:

Área do cliente (/conta):

Admin (/admin):

Pendências identificadas pra Sprint 3:

11.0 Status — Sprint 1 entregue ✅

Site público completo no ar em https://novo.tripsampaviagens.com.br/.

O que está rodando

Infra:

Páginas no ar:

SEO:

Decisões técnicas executadas:

Pendências reconhecidas (entram em sprints futuras)

O que vem na Sprint 2

E-commerce funcional + admin completo (carrinho, checkout em etapas, Mercado Pago stub, voucher PDF, dashboard admin com CRUD pacotes/saídas/pedidos/clientes/cupons/manifesto de embarque/relatórios).

Quando o Aldo abrir o site novo, o que ele vai ver:

Aspecto WP atual novo.tripsampaviagens.com.br
TTFB 1.17s ~50-100ms
Paleta Laranja saturado fluorescente Terracota premium + areia + marrom-café
Hero Slider genérico, texto ilegível Cinematic com tipografia editorial Fraunces, CTA único
Cards WooCommerce padrão Aspect 4:5 cinematic com gradient e badges
Catálogo Lista de pacotes amontoada Grid responsivo com filtros
Páginas de destino Não existem 20 hubs com conteúdo autoral
Schema SEO Inexistente TravelAgency + TouristTrip + Offer + FAQPage
Mobile Apertado Layout próprio, touch targets, header sticky
Galeria 9 fotos da equipe amontoadas 80 fotos reais de viagens em grid
Próximas saídas Aparecem misturadas Cronograma vivo com data destacada
Documento interno — gerado automaticamente em 27/04/2026, 21:59:56 — fonte: /home/claude/tripsampa/PLANO-REFATORACAO.md