# Estudo do Novo Site Astram > Estudo de referência para o redesign do site **astram.tur.br** inspirado na estrutura, UX e componentes do site **voeazul.com.br**, adaptado à realidade da Astram (transporte marítimo Valença ↔ Tinharé/Boipeba). > > **Foco:** venda de passagens e passeios + páginas institucionais + responsividade mobile-first. > > **Data:** 25/05/2026 --- ## 1. Resumo Executivo O novo site da Astram deve seguir o modelo de **e-commerce de viagens** consolidado pela Azul: um **widget de busca em destaque** no hero, abaixo a **vitrine de destinos**, depois conteúdo institucional/confiança/programa de fidelidade, com checkout claro e mobile-first. A estrutura e o fluxo de UX da Azul são referências excelentes — esses padrões são consolidados no mercado de viagens. O que será **adaptado à Astram** é a identidade visual (paleta marítima própria), o conteúdo (rotas Valença / Bom Jardim / Morro / Boipeba) e o tom de voz (turismo náutico baiano). > ⚠️ **Nota sobre propriedade intelectual:** o logo, fontes proprietárias, ícones específicos e imagens da Azul são marca registrada e não podem ser reproduzidos literalmente. **A inspiração será na estrutura, no fluxo de UX e nos componentes funcionais** (que são padrões abertos do mercado), com identidade visual própria para a Astram. Isso é, inclusive, melhor para SEO e para construção de marca. --- ## 2. Análise da Estrutura do Site da Azul Da análise da homepage da Azul (referência visual fornecida), identifiquei **9 blocos funcionais** que estruturam a página: | # | Bloco | Função | Adaptação Astram | |---|---|---|---| | 1 | **Header fixo escuro** com logo + menu + login + idiomas + carrinho | Navegação persistente | Header azul-marinho com logo Astram, menu institucional, "Entrar / Cadastrar", PT/EN/ES, carrinho | | 2 | **Tabs de produto** (Passagens, Voo+Hotel, Check-in, etc) | Segmentação de busca | Tabs: **Travessias** / **Passeios** / **Pacotes** / **Check-in** | | 3 | **Widget de busca** em card destacado | CTA principal | Origem, Destino, Data Ida, Data Volta, Passageiros, Crianças, "Buscar" | | 4 | **Banner promocional** (110% pontos) | Conversão de oportunistas | Banner: "Reserva ida+volta com 10% off" ou "Crianças até 4 anos não pagam" | | 5 | **"Vamos viajar juntos"** com cards de planos | Cross-sell | "Monte seu pacote": travessia + passeio + transfer hotel | | 6 | **Cards de destinos** ("Sua viagem dos sonhos te espera") | Inspiração de compra | Cards: Morro de São Paulo, Boipeba, Garapuá, Cairu, Gamboa | | 7 | **Cartão de crédito co-branded** (Azul Itaú Mastercard) | Receita financeira | *Não se aplica nesta fase*. Pode virar "Clube Astram" (fidelidade) no futuro | | 8 | **Programa de fidelidade** (TudoAzul Unique) | Retenção | Versão simplificada: "Astram Cliente Frequente" — desconto pra recorrentes | | 9 | **Footer institucional** com links | Confiança e SEO | Sobre, Política, Termos, Contato, Imprensa, Trabalhe Conosco, redes sociais | ### Padrões de UX a replicar - **Booking widget sempre acima da dobra** (não exige scroll para começar a comprar). - **Cards de destinos com imagem grande + nome + preço a partir de** — gatilho de inspiração e ancoragem de preço. - **Hierarquia visual clara** (CTA primário sempre em cor de destaque contrastante). - **Confiança no rodapé**: bandeiras de cartão, selo de site seguro, CNPJ, endereço físico. ### Padrões de UX a evitar - A Azul tem **excesso de seções** (>10 dobras na home) — para a Astram, **manter 5–6 seções** no máximo, foco em conversão direta. - Múltiplos pop-ups e modais — usar com parcimônia para não afastar o usuário móvel. --- ## 3. Análise de Origens, Destinos e Rotas da Astram ### 3.1. Rotas identificadas | Origem | Destino | Tipo | Duração | Preço médio* | |---|---|---|---|---| | Valença | Morro de São Paulo | Lancha rápida | 35–45 min | R$ 45–65 | | Valença | Morro de São Paulo | Convencional | 1h45 | R$ 25–30 | | Valença | Bom Jardim | Catamarã/lancha | ~30 min | R$ 30–40 | | Bom Jardim | Morro de São Paulo | Lancha rápida | 10–15 min | R$ 35 | | Valença | Galeão (Boipeba) | Lancha + 4x4 | ~2h | R$ 60–80 | | Valença | Boipeba (direto) | Lancha rápida | ~1h10 | R$ 63 | | Salvador | Morro de São Paulo | Semi-terrestre (catamarã + ônibus + lancha) | ~4h | R$ 100–150 | *\* Valores aproximados de mercado em mai/2026 — devem ser confirmados com a Astram para tarifário oficial do site.* ### 3.2. Mapa de origens e destinos ``` ┌─────────────────────┐ │ SALVADOR │ │ (Terminal Náutico) │ └──────────┬──────────┘ │ semi-terrestre ┌──────────▼──────────┐ │ ITAPARICA │ └──────────┬──────────┘ │ ônibus ┌──────────▼──────────┐ ┌────┤ VALENÇA ├────┐ │ │ (hub principal) │ │ │ └─────────┬───────────┘ │ │ │ │ lancha │ │ lancha │ lancha direta │ ▼ │ direta │ ┌─────────────────────┐ │ │ │ BOM JARDIM │ │ │ │ (atracadouro) │ │ │ └─────────┬───────────┘ │ │ │ │ ▼ ▼ ▼ ┌──────────────┐ ┌──────────┐ ┌──────────────┐ │ BOIPEBA │ │ MORRO │ │ GALEÃO/CAIRU│ │ (Tinharé) │ │ DE SP │ │ (Tinharé) │ └──────────────┘ └──────────┘ └──────────────┘ ``` ### 3.3. Destinos turísticos (catálogo proposto para o site) **Cards principais (homepage):** 1. **Morro de São Paulo** — vila mais famosa de Tinharé, 4 praias numeradas, vida noturna. 2. **Ilha de Boipeba** — destino exclusivo, praias preservadas (Moreré, Cueira, Tassimirim). 3. **Garapuá** — vila tranquila, piscinas naturais. 4. **Cairu** — cidade histórica colonial (sede do município). 5. **Gamboa do Morro** — vila com argila terapêutica. 6. **Galeão** — porta de entrada para Boipeba via 4x4. ### 3.4. Passeios (produto secundário do site) Pela pesquisa de mercado, os passeios mais vendidos na região e candidatos a estarem no catálogo: - **Volta à Ilha** — R$ 350/pessoa, 8h, percorre Garapuá, Moreré, Boipeba, Cairu, Canavieiras. - **Piscinas naturais de Moreré** (Boipeba) — meio dia. - **Tour histórico Cairu** + manguezais. - **Passeio Garapuá** (Tinharé) — piscinas naturais. - **Transfer Salvador ↔ Morro** semi-terrestre completo. --- ## 4. Wireframe Textual da Nova Home (estrutura tipo Azul) ``` ┌─────────────────────────────────────────────────────────────────┐ │ [LOGO ASTRAM] Travessias Passeios Pacotes Ajuda │ │ Entrar | PT|EN|ES│ ← header fixo └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ [Imagem hero: lancha cortando o mar azul de Tinharé] │ │ │ │ ┌─[Travessias]─[Passeios]─[Pacotes]─[Check-in]──────────┐ │ │ │ │ │ │ │ Origem ▼ Destino ▼ Ida 📅 Volta 📅 │ │ │ │ Pagantes ▼ Crianças ▼ (até 4 anos não pagam) │ │ │ │ │ │ │ │ [ BUSCAR LANCHAS ] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ 🎁 Reserva ida+volta no mesmo dia tem 10% off │ ← banner └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ "Descubra o paraíso da Costa do Dendê" │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ MORRO │ │BOIPEBA │ │GARAPUÁ │ │ CAIRU │ │GALEÃO │ │ ← cards destinos │ │ SP │ │ │ │ │ │ │ │ │ │ │ │R$45 │ │R$63 │ │R$60 │ │R$50 │ │R$80 │ │ │ │ a partir│ │ a partir│ │a partir│ │a partir│ │a partir│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ "Monte seu pacote completo" │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │ Travessia + │ │ Travessia + │ │ ← cross-sell │ │ Volta à Ilha │ │ Transfer hotel │ │ │ │ R$ 380 │ │ R$ 120 │ │ │ └─────────────────┘ └─────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ Por que escolher a Astram? │ │ 🚤 27 anos ⚓ Frota 🛡️ Embarque 💬 Suporte│ │ de mercado vistoriada seguro WhatsApp │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ Veja o que dizem nossos passageiros │ │ [Carrossel de avaliações Google + TripAdvisor] │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ Astram | Suporte | Legal | Redes │ ← footer │ Sobre nós | FAQ | Termos de Uso | Instagram │ │ Frota | Contato | Privacidade | Facebook │ │ Imprensa | WhatsApp | ANTAQ | TripAdvisor│ │ │ │ Formas de pagamento: 💳 VISA MC ELO PIX 💵 │ │ Astram - CNPJ 02.705.996/0001-66 | R. Juvêncio de Rezende,19 │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 5. Sistema de Design Proposto ### 5.1. Paleta de cores (identidade Astram, inspirada estruturalmente na Azul) | Cor | Hex | Uso | |---|---|---| | **Azul-marinho profundo** | `#0A2A4E` | Header, títulos, backgrounds escuros | | **Azul-oceano vibrante** | `#0072CE` | Links, CTAs secundários, ícones | | **Azul-céu claro** | `#E6F2FB` | Backgrounds de seção alternados | | **Laranja salva-vidas** | `#F26522` | CTA primário "Buscar / Comprar" — referência à boia do logo atual | | **Amarelo coral** | `#FFC857` | Selos, badges promocionais, "10% off" | | **Branco** | `#FFFFFF` | Cards, contraste | | **Cinza neutro** | `#F5F7FA` / `#3A4A5B` | Backgrounds e textos | > A paleta **mantém o azul como cor de marca dominante** (igual à Azul como referência estrutural), mas o **laranja salva-vidas** vem da identidade própria da Astram (boia do logo atual) — diferencia visualmente sem conflito com a marca da Azul. ### 5.2. Tipografia - **Títulos:** `Inter` ou `Poppins` (fontes abertas, modernas, gratuitas Google Fonts). - **Corpo:** `Inter` ou `Open Sans` 16px base. - **Hierarquia:** H1 32–48px / H2 24–32px / H3 18–22px / Corpo 16px / Caption 14px. *Evitar fontes proprietárias usadas pela Azul (Helvetica Now, etc.) — usar fontes abertas é melhor para performance, licenciamento e identidade própria.* ### 5.3. Componentes-chave - **Botões primários:** fundo laranja `#F26522`, texto branco, raio 8px, padding generoso (mobile ≥ 48px de altura). - **Cards de destino:** imagem 16:9 no topo, título, "a partir de R$ X", botão "Reservar". - **Inputs:** borda azul-marinho clara, foco azul vibrante, ícones nos rótulos. - **Carrossel:** swipe nativo no mobile (sem libs pesadas). --- ## 6. Booking Widget Detalhado (componente central) O **widget de busca é o coração do site**. Estrutura proposta: ``` ┌──── Travessias ─── Passeios ─── Pacotes ─── Check-in ────┐ │ │ │ ORIGEM* DESTINO* │ │ [ Valença ▼ ] [ Morro de São Paulo ▼ ] │ │ │ │ IDA* VOLTA PASSAGEIROS │ │ [ 25/05/2026 📅 ] [ + Adicionar ] [ 1 adulto, 0 cr ▼]│ │ │ │ TIPO DE TRAVESSIA │ │ ( ) Lancha rápida (40min) │ │ ( ) Convencional (1h45) │ │ ( ) Semi-terrestre (4h) — partindo de Salvador │ │ │ │ ╔═════════════════════════╗ │ │ ║ 🔍 BUSCAR LANCHAS ║ ← laranja │ │ ╚═════════════════════════╝ │ └────────────────────────────────────────────────────────────┘ ``` **Regras de UX importantes:** - ✅ **Crianças até 4 anos** — tooltip explicando isenção (gancho legal/comercial). - ✅ **"Apenas ida"** como padrão (a maioria dos turistas compra trecho único). - ✅ **Inversão rápida** origem ↔ destino com botão `⇄`. - ✅ **Auto-sugestão inteligente**: se origem = "Valença", destinos válidos = ["Morro", "Bom Jardim", "Boipeba", "Galeão"]. - ✅ **Persistência mobile**: lembrar última busca no localStorage. --- ## 7. Mapa de Páginas Institucionais Páginas além das de venda: ### Institucional - `/sobre` — História (27 anos), missão, frota, equipe - `/frota` — Embarcações, capacidade, fotos, vistorias ANTAQ - `/seguranca` — Protocolos, coletes, treinamento da tripulação - `/imprensa` — Releases, contato comercial - `/trabalhe-conosco` — Vagas e cadastro de currículo ### Suporte - `/ajuda` (Central de Ajuda) - `/faq` (perguntas frequentes — bagagem, atrasos, etc) - `/contato` (telefone, WhatsApp, formulário, mapa) - `/check-in` (consulta de reserva por código) ### Legal - `/termos` (Termos de Uso) - `/privacidade` (LGPD) - `/politica-cancelamento` (regras de remarcação e reembolso) - `/politica-isencao` (crianças, idosos, PCDs — ver seção 8) - `/cookies` ### Conteúdo (SEO) - `/blog` — guias de destinos, dicas, eventos sazonais - `/destinos/morro-de-sao-paulo` — landing page por destino - `/destinos/boipeba` - `/destinos/cairu` - `/destinos/garapua` --- ## 8. Política de Isenção (requisito explícito do cliente) Página `/politica-isencao` clara, baseada em legislação brasileira e prática do setor: ### Crianças de colo (0 a 4 anos) - **Isenção total** se não ocuparem assento próprio (uma criança por adulto pagante). - Documento obrigatório: certidão de nascimento ou RG. - Limite: 1 criança de colo por adulto. ### Crianças de 5 a 11 anos - **Tarifa promocional reduzida** (a definir com a Astram — sugestão: 50% do valor). - Documento: RG ou certidão. ### Idosos (60+) - Conforme **Estatuto do Idoso (Lei 10.741/2003)**, transporte coletivo interestadual prevê gratuidade/desconto. **Verificar enquadramento** com a Astram (transporte intermunicipal aquaviário pode ter regras específicas). - Sugestão prática: **desconto de 10–20% mediante apresentação de documento**. ### Pessoas com Deficiência - **Atendimento prioritário** em embarque e desembarque. - **Acompanhante** com tarifa reduzida ou isenta (a definir). ### Política de cancelamento (proposta) - **Até 7 dias antes da viagem:** reembolso 100%. - **Entre 2 e 7 dias:** reembolso de 80%. - **Menos de 48h:** crédito para uso em até 12 meses (não há reembolso em dinheiro). - **No-show:** sem reembolso, sem crédito. - **Cancelamento por mau tempo / impedimento operacional:** reembolso integral ou reagendamento sem custo. ### Direitos do passageiro (ANTAQ) Citar referência à cartilha oficial da **ANTAQ — Direitos e Deveres dos Passageiros do Transporte Aquaviário** ([link](https://www.gov.br/antaq/pt-br/assuntos/passageiros/antaq-cartilha_direitos_deveres_passageiros.pdf)), com link no rodapé. Isso aumenta credibilidade institucional. --- ## 9. Mobile-First & Responsividade (atenção especial pedida) O cliente destacou a importância de responsividade. Diretrizes técnicas: ### Princípios - **Mobile-first** real: design e código pensados primeiro para celular, depois desktop. - **Hit targets** ≥ 48×48 px para qualquer elemento clicável. - **Sem hover crítico** — toda informação acessível por toque. - **Performance**: Lighthouse mobile alvo ≥ 90 (atualmente o site da Astram está provavelmente < 50). ### Breakpoints sugeridos | Faixa | Layout | |---|---| | 0–639px | Mobile (1 coluna, menu hamburguer, widget empilhado) | | 640–1023px | Tablet (2 colunas em cards, widget em 2 linhas) | | 1024px+ | Desktop (3–4 colunas, widget em 1 linha) | ### Booking widget no mobile - Empilhar campos verticalmente. - Botão "Buscar" full-width grudado na parte inferior da viewport durante scroll (`sticky`). - Date picker nativo (``) — leve e familiar. ### Imagens - Servir **WebP** com fallback JPG. - Lazy-load em tudo abaixo da dobra. - Imagens hero **diferentes** para mobile (vertical) e desktop (horizontal). ### Acessibilidade - Contraste AA mínimo (texto sobre fundo). - Navegação por teclado funcional. - `alt` em todas as imagens. - Labels associados a inputs. --- ## 10. Stack Técnica Recomendada | Camada | Sugestão | Justificativa | |---|---|---| | **Frontend** | Next.js 15 (App Router) ou Astro 5 | SEO server-side, mobile-fast, modernos | | **CSS** | Tailwind CSS | Velocidade de desenvolvimento, design system consistente | | **Componentes** | shadcn/ui ou Radix UI | Acessibilidade built-in, customizáveis | | **Backend** | Node.js/Express ou Laravel | API REST para reservas, pagamentos, painel admin | | **DB** | PostgreSQL | Relacional, robusto pra inventário de assentos | | **Pagamento** | Mercado Pago, Pagar.me ou Stripe BR | PIX nativo (essencial no Brasil), cartão, boleto | | **Hospedagem** | Vercel/Netlify (front) + VPS Hetzner/DO (back) | Custo-benefício | | **CDN/imagens** | Cloudflare + Cloudinary | Performance global, otimização auto de imagens | | **Analytics** | GA4 + Meta Pixel + Microsoft Clarity | Conversão + heatmaps | | **Suporte** | WhatsApp Business API + Tawk.to (chat) | Canal principal já existente | ### Migração suave - Manter o **sistema atual `coopevastram/`** funcionando em paralelo enquanto o novo é desenvolvido. - Quando lançar, redirecionar `astram.tur.br/coopevastram/*` → novas URLs equivalentes (301). - Garantir que **reservas em andamento** no sistema antigo continuem acessíveis (importar histórico ou link cruzado). --- ## 11. Roadmap Sugerido (12 semanas) | Sprint | Semanas | Entregas | |---|---|---| | **Discovery & Design** | 1–2 | Aprovação de identidade visual, paleta, wireframes finalizados, protótipo Figma | | **Backend core** | 3–5 | API de rotas/horários/preços, sistema de inventário de assentos, integração de pagamento (PIX + cartão) | | **Frontend público** | 4–7 | Home, busca, listagem de horários, checkout, página de confirmação | | **Painel administrativo** | 6–8 | Cadastro de rotas/horários/preços, gestão de reservas, relatórios | | **Páginas institucionais & SEO** | 7–9 | Sobre, FAQ, políticas, blog inicial, schema.org, sitemap | | **QA, performance, mobile** | 9–10 | Testes em devices reais, Lighthouse, acessibilidade, carga | | **Migração & go-live** | 11 | DNS, redirects 301, monitoramento | | **Pós-lançamento** | 12 | Ajustes finos, ativação Google Ads / Meta Ads, treinamento da equipe | --- ## 12. Próximos Passos (decisões necessárias) Antes de iniciar o desenvolvimento, são necessárias as seguintes definições do cliente: 1. ✅ **Aprovação da paleta visual** (azul-marinho + laranja salva-vidas — usa logo atual como ancoragem). 2. 📋 **Tarifário oficial** atualizado (Astram precisa fornecer tabela de preços por rota/dia da semana/temporada). 3. 📋 **Horários oficiais** por embarcação e rota (matriz de partidas). 4. 📋 **Política de cancelamento** definitiva (regras de reembolso, no-show, mau tempo). 5. 📋 **Política de bagagem** (limite de volume/peso, taxas extras). 6. 📋 **Definição da modalidade do programa de fidelidade** (descontos para passageiros recorrentes? cartão presente?). 7. 📋 **Fotos profissionais** de embarcações, atracadouros, destinos (essencial — fotos de banco de imagens descaracterizam). 8. 📋 **Decisão sobre multilíngue** no MVP (sugestão: lançar em PT, EN e ES desde o início para captar turista internacional). 9. 📋 **Integração com gateway de pagamento** (escolher 1: Mercado Pago é o mais usado no segmento). 10. 📋 **Domínio definitivo** (manter `astram.tur.br` ou migrar para `astram.com.br`?). --- ## 13. Resumo da Visão > O **novo site da Astram** será um **e-commerce de viagens enxuto, mobile-first e otimizado para conversão**, com a estrutura e o fluxo de UX que a Azul Linhas Aéreas validou para o mercado brasileiro: **widget de busca no hero, vitrine de destinos, prova social, conteúdo institucional e checkout claro**. > > A identidade visual será **própria da Astram** — paleta marítima azul-marinho + laranja salva-vidas (do logo atual) — preservando a alma náutica baiana e diferenciando da marca da Azul. > > O foco principal é a **venda direta de passagens e passeios**, com páginas institucionais cumprindo papel de **suporte, transparência (políticas claras) e SEO**. A **responsividade mobile** será tratada como requisito #1, não como adaptação posterior. --- ## Fontes consultadas - [voeazul.com.br — referência estrutural](https://www.voeazul.com.br/br/pt/home) - [Horários travessia Valença ↔ Morro](https://www.morrodesaopaulocatamara.com/post/horarios-lancha-valenca-morro-de-sao-paulo) - [Como chegar em Morro de SP — guia](https://morrodesaopaulo.com.br/comochegar/lanchas-rapidas-convencional/) - [Boipeba ganha rota direta de Salvador](https://valencaagora.com/boipeba-ganha-rota-maritima-direta-saindo-de-salvador-saiba-detalhes/) - [Passeio Volta à Ilha — referência de produto](https://www.morrodesaopaulocatamara.com/post/volta-ilha-morro-de-sao-paulo) - [ANTAQ — Cartilha Direitos do Passageiro Aquaviário](https://www.gov.br/antaq/pt-br/assuntos/passageiros/antaq-cartilha_direitos_deveres_passageiros.pdf) - [Lei 14.834/2016 — isenção de crianças](https://atendimento.clickbus.com.br/hc/pt-br/articles/10391460018957-Como-funciona-o-embarque-para-crian%C3%A7as-com-at%C3%A9-5-anos-de-idade) - [Biotur — concorrente referência](https://biotur.com.br/) - [Site atual Astram](https://www.astram.tur.br/coopevastram/)