Tours & experiências Projeto de demonstração
Andorinha — tours em pequeno grupo por Portugal com planeador de viagem
Um diário de viagem editorial e soalheiro para uma empresa de tours de Lisboa: papel marfim quente, tinta preto-andorinha e um acento cobalto-cerâmica sobre fotografias reais de Sintra, Douro, Alfama, Algarve, Belém e Óbidos — com um catálogo de seis tours filtrável e um fluxo de reserva tour-data-pessoas com total em tempo real.
feitura.pt/demo/andorinha — Ao vivo
Uma guia certificada que deixou o circuito dos autocarros de dois andares faz tours numa carrinha de sete lugares, de Lisboa para todo o país. O site tem de vender lentidão e credibilidade ao mesmo tempo: lugares reais em fotografias reais, seis rotas com paragens verdadeiras, durações, limites de grupo e preços em euros, filtros por região e duração, um fluxo de reserva que um viajante termina no telemóvel a partir da praia, as credenciais RNAAT da guia bem à vista, pontos de encontro e o que está incluído preto no branco, e uma porta para tours privados de casamentos e offsites.
O que está lá dentro
- Sistema de design editorial soalheiro — papel marfim quente, tinta preto-andorinha, acento cobalto-cerâmica, serifa itálica de display e factos em mono
- Oito fotografias reais de lugares portugueses, com uma gradação CSS quente e consistente e créditos completos de autor/licença no rodapé
- Catálogo de seis tours com paragens de itinerário reais, durações, limites de grupo e preços em EUR
- Chips de filtro por região (Lisboa, Norte, Centro, Algarve) e duração (meio-dia, dia inteiro) com contagem de resultados em direto
- Fluxo de reserva do planeador: tour, seletor de data, stepper de pessoas e cartão de resumo com total em tempo real
- Os cartões de tour pré-selecionam o fluxo de reserva e fazem scroll até ele com um toque
- Perfil da guia com registo RNAAT, credenciais de guia-intérprete e primeiros socorros
- Pontos de encontro, listas de incluído/não incluído e formulário de pedido de tours privados
- Faixa de citação em full-bleed sobre a Ponta da Piedade, reveals em scroll com IntersectionObserver, seguro com movimento reduzido
- Totalmente bilingue PT/EN com toggle nativo, contraste AA e alvos de toque de 44 px
Registo de construção
- Direção de arte — tokens marfim/tinta/cobalto, escala tipográfica serifa itálica e mono, SVG do logótipo andorinha, curadoria das fotografias e auditoria de licenças dos oito lugares reais
- Sistema de gradação quente das fotografias — tintas de sobreposição em CSS, recortes e legendas; composição do hero com o Cabo da Roca e faixa de factos em mono
- Conteúdo do catálogo — seis rotas com paragens reais, durações, limites de grupo e preços em EUR, escrito em PT-PT e EN
- Chips de filtro por região e duração com contagem em direto, grelha de cartões de tour com blocos de itinerário tracejados
- Máquina de estados da reserva — seleção de tour, seletor de data com data mínima, stepper de pessoas limitado ao grupo, total em direto no cartão de resumo
- Perfil da guia com credenciais RNAAT, faixa de opiniões, secção prática e formulário de tours privados na faixa cobalto
- Faixa de citação sobre a Ponta da Piedade, reveals em scroll, lazy-loading e atributos de dimensão em todas as fotografias, rodapé com créditos fotográficos completos
- Passagem do locale EN, auditoria de contraste e alvos de toque, passagem de movimento reduzido, recomposição móvel do planeador a 375 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
93
Performance
100
Accessibility
100
Best practices
100
SEO